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

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

favicon图标介绍

所谓favicon,即Favorites Icon的缩写,望文生义,便是其能够让阅读器的珍藏夹中除显现相应的标题外,还以图标的方式区别不同的网站。当然,这不只仅是Favicon的全部,依据阅读器的不同,Favicon显现也有所区别:在大多数主流阅读器如FireFox和Internet Explorer (5.5及以上版本)中,favicon不只在珍藏夹中显现,还会同时呈现在地址栏上,这时用户能够拖曳favicon到桌面以树立到网站的快捷方式;除此之外,标签式阅读器以至还有不少扩展的功用,如FireFox以至支持动画格式的favicon等。图标文件普通尺寸较小,常见的是16*16,32*32和48*48。图标是局部透明的,能够直接翻开阅读。

墨涩网favicon图标

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

如何使用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文件可以同时满足多个尺寸的需求,不需要每个尺寸单独生成一个文件。


站内资源声明

本资源仅用于个人学习收藏欣赏,禁止任何其他行为的使用

  1. 1、本网站名称:H5宝库
  2. 2、本站永久网址:https://www.h5bk.com
  3. 3、游客请注册本站用户后,再下载资源。本站暂不开放第三方登录,请牢记自己的注册邮箱,以便找回密码。
  4. 4、坚持【每日签到】可获得站内积分,积分可免费兑换站内精品资源和更多服务。
  5. 5、本站资源来源于互联网收集/个人购买,如有内容侵犯到您的权益,请查看【版权声明】
  6. 6、本资源和内容来自互联网搜索,仅允许个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业环境,任何人不得擅作它用,否则后果自负!请在下载24小时内删除!为尊重作者版权,请购买原版作品,支持你喜欢的作者,谢谢!
  7. 7、本文资源和内容,仅供站长个人学习测试使用。站内资源不保证任何完整性和安全性,请自行检查。站内资源不包含任何技术服务,请大家谅解。有问题留言讨论!

为作者充电
人已赞赏
网站教程

hfs2.3中文版快速搭建http文件下载服务器系统

2021-4-25 12:16:53

网站教程

解决博客网站的文章直接复制到微信公众号图片失效问题

2021-4-25 12:24:26

0 条回复 A文章作者
    暂无讨论,说说你的看法吧

解锁会员资源

开通会员

解锁海量优质VIP资源

立即开通

个人中心
购物车
优惠劵
今日签到
搜索