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

迈不过友情╰ 2023-10-05 11:47 5阅读 0赞

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70][]

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

一个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之类的程序。另外，您可以[在此处][Link 1]选择一种在线工具 [。][Link 1]

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

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][Pics]转换为[FavIcon][Pics]来生成动画图标 。

网站图标兼容性

<table style="width:471.75pt;"> 
 <tbody> 
 <tr> 
 <td style="border-color:#dddddd;"> 平台 </td> 
 <td style="border-color:#dddddd;"> 名称 </td> 
 <td style="border-color:#dddddd;"> 相对值 </td> 
 <td style="border-color:#dddddd;"> 网站图示大小 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#dddddd;vertical-align:top;"> Google TV </td> 
 <td style="vertical-align:top;"> favicon.png </td> 
 <td style="vertical-align:top;"> 图标 </td> 
 <td style="vertical-align:top;"> 96×96 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#dddddd;"> Opera Coast </td> 
 <td> favicon-coast.png </td> 
 <td> 图标 </td> 
 <td> 228×228 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#dddddd;vertical-align:top;"> Ipad Retina，iOS 7或更高版本 </td> 
 <td style="vertical-align:top;"> apple-touch-icon-152×152-precomposed.png </td> 
 <td style="vertical-align:top;"> 苹果触摸图标 </td> 
 <td style="vertical-align:top;"> 152×152 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#dddddd;"> Ipad Retina，iOS 6或更高版本 </td> 
 <td> apple-touch-icon-144×144-precomposed.png </td> 
 <td> 苹果触摸图标 </td> 
 <td> 144×144 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#dddddd;vertical-align:top;"> Ipad Min，第一代iOS 7或更高版本 </td> 
 <td style="vertical-align:top;"> 苹果触摸图标76×76-precomposed.png </td> 
 <td style="vertical-align:top;"> 苹果触摸图标 </td> 
 <td style="vertical-align:top;"> 76×76 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#dddddd;"> Ipad Mini，第一代iOS 6或更低版本 </td> 
 <td> 苹果触摸图标72×72-precomposed.png </td> 
 <td> 苹果触摸图标 </td> 
 <td> 72×72 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#dddddd;vertical-align:top;"> Iphone Retina，iOS 7或更高版本 </td> 
 <td style="vertical-align:top;"> 苹果触摸图标120×120-precomposed.png </td> 
 <td style="vertical-align:top;"> 苹果触摸图标 </td> 
 <td style="vertical-align:top;"> 120×120 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#dddddd;"> Iphone Retina，iOS 6或更低版本 </td> 
 <td> apple-touch-icon-114×114-precomposed.png </td> 
 <td> 苹果触摸图标 </td> 
 <td> 114×114 </td> 
 </tr> 
 </tbody> 
</table>

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

**HTML**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201016140134378.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI=,size_16,color_FFFFFF,t_70
[Link 1]: https://www.google.com/search?hl=en&q=online+favicon+generator&meta=
[Link 2]: https://www.google.com/search?hl=en&q=Favicon+Validator+&meta=
[Pics]: http://www.htmlkit.com/services/favicon/