如何给wordpress添加Favicon图标?

AD:

b5f37156c2bfcc5eae0b07fbd655a50a50f4286a1572f-Rgdxdi_fw658

什么是Favicon?

如图,就是在浏览器title旁边的小图标

QQ20160121-0@2x

当然其实现在大部分的wordpress都会在主题设置里有关于这个的选项.

没有的话可以自行添加代码;

首先,你需要设置好一个图片,格式不一定是icon的可以是png、jpg或gif,

大小尽量不要太大,一般都是正方形32*32的,

将图片上传到多媒体里,然后获得图片的路径,这时候再去你主题里找 header.php 也可以直接在后台 外观 – 编辑 – 主题页眉中打开

在 </head> 结束之前 插入一下代码

XHTML
1
<link  rel="icon"  type="[图片类型]"  href="[图片地址]" />

type 的类型是你图片的类型

1
2
3
4
5
png 填写 image/png
 
jpg 填写 image/jpg
 
gif 填写 image/gif

保存后就可以看到效果,切记图片地址一定要写对了

那么这样就可以了么?

NO!

图标的代码还是有很多的

比如在手机平台以及在其他平台上

mac自带的浏览器Safari书签栏会有个图标排序刚才的代码显然不能满足这个需求

QQ20160121-1@2x

如果有兴趣 你可以 了解以下代码

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- Set render engine for 360 browser -->
<meta name="renderer" content="webkit">
 
<!-- No Baidu Siteapp-->
<meta http-equiv="Cache-Control" content="no-siteapp" />
 
<link rel="icon" type="image/png" href="[图片地址]">
 
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="[图片地址]">
 
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="qzhai" />
<link rel="apple-touch-icon-precomposed" href="[图片地址]">
 
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="[图片地址]">
<meta name="msapplication-TileColor" content="#0e90d2">

 

发表评论

关注我们