什么是favicon.ico，以及如何使用它

Favicon是“收藏夹”图标中的快捷方式。

它是访问的URL前面的一个小徽标，可以在地址栏中看到，并用于宣传公司或商标。另一方面，它对用户很有用，以便可以在其加书签的站点中快速找到他要单击的URL。

如何在我的网站上添加收藏夹

一个Favicon必须具有以下特征。

• 名称-默认名称为favicon.ico
• 尺寸-16×16、32×32、48×48、64×64或128×128像素
• 颜色-8位，24位或32位

这是在地址栏中获取收藏夹图标所需的脚本

HTML<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

如果您不上传图像并更改图标位置，则此脚本将不起作用。建议此位置是根站点。

该文件由Mozilla，Firefox，Opera等浏览器显示，但Internet Explorer不显示。

要制作收藏夹图标，可以使用Adobe Photoshop之类的程序。另外，您可以在此处选择一种在线工具 。

您可以在线检查favicon文件及其在页面中的插入方式是否正确。 点击这里。

Favicon-支持的文件类型

如今，favicon对所有浏览器均具有完全支持，并且该支持还扩展到了其他各种文件类型格式。根据网站图标的格式，您必须更改type属性。

• 对于PNG，您需要使用image/png。
• 对于GIF，您需要使用image/gif。
• 对于JPEG，您需要使用image/gif。
• 对于ICO，您需要使用image/x-icon。
• 对于SVG，您需要使用image/svg+xml。

动画图标

您也可以使用其他版本的Favicon，例如动画版本。为此，我们将插入以下代码：

HTML<link rel="icon" href="favicon.gif" type="image/gif">

您可以通过将图片从Pics转换为FavIcon来生成动画图标 。

网站图标兼容性

平台	名称	相对值	网站图示大小
Google TV	favicon.png	图标	96×96
Opera Coast	favicon-coast.png	图标	228×228
Ipad Retina，iOS 7或更高版本	apple-touch-icon-152×152-precomposed.png	苹果触摸图标	152×152
Ipad Retina，iOS 6或更高版本	apple-touch-icon-144×144-precomposed.png	苹果触摸图标	144×144
Ipad Min，第一代iOS 7或更高版本	苹果触摸图标76×76-precomposed.png	苹果触摸图标	76×76
Ipad Mini，第一代iOS 6或更低版本	苹果触摸图标72×72-precomposed.png	苹果触摸图标	72×72
Iphone Retina，iOS 7或更高版本	苹果触摸图标120×120-precomposed.png	苹果触摸图标	120×120
Iphone Retina，iOS 6或更低版本	apple-touch-icon-114×114-precomposed.png	苹果触摸图标	114×114

这是将其实现到站点代码中的方法。

HTML<!-- default favicon -->

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

 

<!-- wideley used favicon -->

<link rel="icon" href="/favicon.png" sizes="32x32" type="image/png">

 

<!-- for apple mobile devices -->

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-152x152-precomposed.png" type="image/png" sizes="152x152">

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-152x152-precomposed.png" type="image/png" sizes="120x120">

 

<!-- google tv favicon -->

<link rel="icon" href="/favicon-googletv.png" sizes="96x96" type="image/png">