最全的 Favicon 浏览器网站标识图标教程

Question

Favicon 最开始作为网址收藏夹图标，也可以作为网站的头像，显示在地址栏或者浏览器标题栏的位置，它能让网站给人更专业的观感，让人很容易记住网站的标识。

创建一个 Favicon 是必须的，浏览器会访问一个网站的时候，会自动去请求根目录下的 Favicon 文件，如果没有那么就会返回404，服务器也会有相应的记录，时间久了这个错误日志肯定会很大，给服务器的稳定性造成影响。

使用方法

基本用法

主要用于图标本身，最好是跨浏览器兼容，不使用任何的HTML。只是favicon.ico文件必须放置到你网站的根目录下面，浏览器会自动请求这个文件。

这个方法适用于几乎所有的浏览器，包括IE6的就版本的浏览器，但是这个方法也有很多局限性，虽然我们可以生成三个不同大小的文件，但是浏览器只认一个，并不能完全适应所有的环境。

推荐的设置方法

为了达到更好的视觉效果，你可以使用下面的设置方法。

1、移动端 iOS 2.0+ 和 Android 2.1+：

<link rel="apple-touch-icon-precomposed" href="path/to/favicon-152.png">

2、IE10 扁平化图标：

<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/path/to/favicon-144.png">

将 #FFFFFF 替换为你想要的颜色。

3、Windows 中 IE11 启动页面：

<meta name="application-name" content="Name">
<meta name="msapplication-tooltip" content="Tooltip">
<meta name="msapplication-config" content="/path/to/ieconfig.xml">

ieconfig.xml 文件如下：

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/path/to/smalltile.png"/>
      <square150x150logo src="/path/to/mediumtile.png"/>
      <wide310x150logo src="/path/to/widetile.png"/>
      <square310x310logo src="/path/to/largetile.png"/>
      <TileColor>#FFFFFF</TileColor>
    </tile>
  </msapplication>
</browserconfig>

完美主义者

如果你有强迫症，你必须完美的实现各个浏览器的兼容效果，达到最好的视觉体验：

1、设置不同尺寸的 apple-touch-icons 图标。

2、针对不同的浏览器添加额外的代码到你的HTML页面中。

<link rel="icon" href="/path/to/favicon-32.png" sizes="32x32">

3、针对 Chrome for Android。

<link rel="shortcut icon" sizes="196x196" href="/path/to/favicon-196.png">

图标尺寸

至少创建这两个图标

Sizes	Name	Purpose
16x16 & 32x32	favicon.ico	Default required by IE. Chrome and Safari may pick ico over png, sadly.

更多尺寸的 favicon.ico 在线，就是一个文件对应多个尺寸。如果你对 iOS and Android 有所担心，但是自己有比较懒，不想过多的编写代码：

Size	Name	Purpose
152x152	favicon-152.png	General use iOS/Android icon, auto-downscaled by devices.

但是记住，复杂的图标不适合制作 Favicon，浏览器上的 favicon 图标只有 16PX，即使你的原始文件有多大，依然不能够显示更多的细节。

如果你是完美主义者，那么就创建下面的一系列文件吧。

Size	Name	Purpose
32x32	favicon-32.png	Certain old but not too old Chrome versions mishandle ico
57x57	favicon-57.png	Standard iOS home screen (iPod Touch, iPhone first generation to 3G)
76x76	favicon-76.png	iPad home screen icon
96x96	favicon-96.png	GoogleTV icon
120x120	favicon-120.png	iPhone retina touch icon (Change for iOS 7: up from 114x114)
128x128	favicon-128.png	Chrome Web Store icon
128x128	smalltile.png	Small Windows 8 Star Screen Icon
144x144	favicon-144.png	IE10 Metro tile for pinned site
152x152	favicon-152.png	iPad retina touch icon (Change for iOS 7: up from 144x144)
180x180	favicon-180.png	iPhone 6 plus
195x195	favicon-195.png	Opera Speed Dial icon (Not working in Opera 15 and later)
196x196	favicon-196.png	Chrome for Android home screen icon
228x228	favicon-228.png	Opera Coast icon
270x270	mediumtile.png	Medium Windows 8 Start Screen Icon
558x270	widetile.png	Wide Windows 8 Start Screen Icon
558x558	largetile.png	Large Windows 8 Start Screen Icon

ICO 文件

创建 favicon.ico 至少需要下面的这些尺寸：

Size	Purpose
16x16	IE9 address bar, Pinned site Jump List/Toolbar/Overlay
32x32	New tab page in IE, taskbar button in Win 7+, Safari Read Later sidebar
48x48	Windows site icons

如果你有强迫症，并且不介意1-3KB大小的文件，那么下面的的尺寸也是可以的：

Size	Purpose
24x24	IE9 Pinned site browser UI
64x64	Windows site icons, Safari Reading List sidebar in HiDPI/Retina

从优化PNG文件中创建你的 ICO 图标。

SVG 文件

固定标签在 Safari 9+ 使用SVG矢量蒙版而不是其他PNG、ICO等图标可能会出现的图标。SVG文件中的矢量艺术品应该是黑色的（没有黑色或其他颜色的阴影）和透明的背景。另外，填充颜色需要在 <link> 中定义，十六进制值或颜色简写将起作用。下面是添加图标的标记：

<link rel='mask-icon' href='icon.svg' color='#ff0000'>

强制刷新图标

有时候你会发现你已经修改的 Favicon 图标，但是无论浏览器如何刷新，都不能显示新的图标，这时候我们可以实用些小技巧，迅速的刷新我们的新图标。

1、清理浏览器缓存，可以是浏览器选项里面的清除缓存，也可以快捷键的强制刷新，Windows (Ctrl+F5 or Ctrl+Shift+R) and on Mac (Command + Shift + R)。

2、在文件引用地址的后面随机加一个参数，这样每次请求都会刷新文件，而不是使用用户本地的缓存。

<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico?v=2" />
<link rel="icon" sizes="16x16 32x32" href="/favicon.ico?v=2">

相关链接

• 原文：https://github.com/audreyr/favicon-cheat-sheet
• PNG优化工具：http://optipng.sourceforge.net/
• https://en.wikipedia.org/wiki/Favicon.ico