Favicon.ico浏览器图标文件制作和正确使用——墨涩网

墨涩 • 2019-09-21 • 建站经验 • 5907 阅读

favicon图标介绍

所谓favicon，即Favorites Icon的缩写，顾名思义，便是其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。当然，这不仅仅是Favicon的全部，根据浏览器的不同，Favicon显示也有所区别：在大多数主流浏览器如FireFox和Internet Explorer (5.5及以上版本)中，favicon不仅在收藏夹中显示，还会同时出现在地址栏上，这时用户可以拖曳favicon到桌面以建立到网站的快捷方式；除此之外，标签式浏览器甚至还有不少扩展的功能，如FireFox甚至支持动画格式的favicon等。图标文件一般尺寸较小，常见的是16*16,32*32和48*48。图标是部分透明的，可以直接打开浏览。

墨涩网favicon图标

如何使用Favicon.ico？

1. 将成功生成的图标文件下载并改名为favico.ico，上传到网站根目录。
2. 在网站首页的源文件 head 之间插入下面的代码:

<link rel="shortcut icon" href="/favicon.ico"/>
<link rel="bookmark" href="/favicon.ico"/>

制作ico图标

一：手动制作

.可以手动用ps等软件制作尺寸为6*16,32*32和48*48像素的png格式图片，然后再用格式工厂等软件转换图片格式为ico格式。

二：在线制作

我们也可以在线制作，推荐两个在线制作的网站。

http://www.bitbug.net/

http://www.faviconico.org/

操作很简单，上传自己喜欢的图片点击制作即可，完成后下载即可使用。

如何创建动态ico图标

先把做好的gif动态图标命名为favicon.gif，然后再 head 之间加上：

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

注意

強烈推荐使用.ico而不是使用png或者gif

1. 最重要的就是，所有的浏览器，包括IE5，都支持ico文件，gif、png等都没有ico支持范围广
2. 如果有favicon.ico，服务器的404错误会有友好返回，我们测试了所有现代浏览器（测试了 Chrome 4, Firefox 3.5【火狐】, IE8, Opera 10 and Safari 4），发现他们都会请求favicon.ico，这样错误页就会有对应图标显示，所以最好用ico！
3. 一个.ico文件可以同时满足多个尺寸的需求，不需要每个尺寸单独生成一个文件。

版权声明：本文采用知识共享 署名4.0国际许可协议BY-NC-SA 进行授权
文章作者：墨涩
文章链接：https://www.sunweihu.com/4479.html
免责声明：本站为资源分享站，所有资源信息均来自网络，您必须在下载后的24个小时之内从您的电脑中彻底删除上述内容；版权争议与本站无关，所有资源仅供学习参考研究目的，如果您访问和下载此文件，表示您同意只将此文件用于参考、学习而非其他用途，否则一切后果请您自行承担，如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。
本站为非盈利性站点，并不贩卖软件，不存在任何商业目的及用途，网站会员捐赠是您喜欢本站而产生的赞助支持行为，仅为维持服务器的开支与维护，全凭自愿无任何强求。

THE END
分享
二维码
打赏
海报
Favicon.ico浏览器图标文件制作和正确使用——墨涩网
favicon图标介绍 所谓favicon，即Favorites Icon的缩写，顾名思义，便是其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。当然，……
<<上一篇
下一篇>>