文档中心

  1. 文档中心
  2. /
  3. WP通用教程
  4. /
  5. 正文

设置网站Icon小图标

Favicon图标就是浏览器窗口网页tab上显示的小图标,还有就是书签或者收藏夹里显示的网站小图标,目前设置小图标的方法有两种,第一中即使把icon图标(名称为:favicon.ico)放到根目录,当然目前的浏览器需求也是各种各样,不同的浏览器或者系统需要的图标格式和大小也有不同所以不建议大家用这种方式设置小图标这里也就不给大家介绍了,直接用目前WordPress比较主流而且方便的方式进行配置我们自己的Icon图标。

上面的视频中演示了2种设置方法,大家可以按需选择适合自己的方式!图标原图尺寸尽量保持512px*512px以上才可以适配更多不同的设备!图标上传之后WordPress会进行多个尺寸裁切并添加到网页Head标签内进行引用。

Icon图标Meta标签说明:

如果您上传的图片达到512px*512px及以上,WordPress程序会自动裁切多个尺寸的图片并往head标签中添加3个link标签和一个meta标签,下面是每个标签的说明:

<link rel="icon" href="icon.png" sizes="32x32" />
<link rel="icon" href="icon-192x192.png" sizes="192x192" />

sizes="32x32" 这个标签用于指定一个32x32像素的图标,适用于大多数浏览器和设备; sizes="192x192"适用于高分辨率设备,如Retina屏幕。

<link rel="apple-touch-icon" href="icon-180x180.png" />

这个标签用于指定一个180x180像素的图标,适用于iOS设备上的Web应用。当用户将你的网站添加到主屏幕时,这个图标将会显示。

<meta name="msapplication-TileImage" content="icon-270x270.png" />

这个标签用于指定一个270x270像素的图标,适用于Windows 8及以上版本的磁贴图标。当用户将你的网站固定到开始屏幕时,这个图标将会显示。

以上就是关于网站Icon图标的全部说明,如果您对自动添加的标签不满意可以手动修改主题header.php文件并在代码中的head标签中添加icon标签!

—— END ——