favicon.ico

在线ICO图标制作


目标尺寸:

原始图片(不超过175kb):


Favicon/ICO图标使用


1、根据上面过程,选择目标尺寸,选择本地的jpg, jpeg, gif, png图标,制作

2、将我们下载的.ICO图标保存为"favicon.ico"名称

3、将.ico图标上传到我们网站根目录下

4、在网站首页源代码<head>....</head>之间加入"<link rel="shortcut icon" href=" /favicon.ico" /> "


示范例子:

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

Favicon/ICO图标介绍


有什么用

Favicon.ico图标在一定程度上可以体验网站的特诊,类似LOGO一样。

简单制作

我们通过上面的步骤制作属于自己的.ico图标,加入到网站中。

附加作用

增强用户体验的同时,在搜索结果或者搜索引擎也有一定的加分价值。

大小要求

一般,我们制作32像素大小的.ico图标,上传已有的图标不要超过175px。

添加要求

我们需要将安装脚本添加到所有网站头部区域,需要全站显示。

图标后缀

个人建议上传素材最好是.png/.jpg,这样制作出来的.ico不失真。

ICO转换

favicon.ico显示位置

谷歌 favicon.ico  雅虎 favicon.ico 显示示例

在线ico图标制作工具使用说明

1. 原始图片必须为jpg、gif、png格式
2. 原始图片文件大小<5M。
3. 建议原图长宽相同,避免转换后生成的ico图标因缩放而失真。
4. 点击"浏览/选择文件"按钮上传本地图片,再点"在线生成favicon.ico图标"即可。

ICO 帮助

如何使用Favicon.ico?

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

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

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

什么是favicon.ico

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

ICO百科

ICO原本是windows中存储单个图案的一种图标文件格式,现可以用作软件、文件夹以及网站等的缩略标志,显示在用户的资源管理器,浏览器的地址栏、标题栏和多页面浏览器的标签栏上。图标文件一般尺寸较小,常见的是16*16,32*32和48*48。图标是部分透明的,可以直接打开浏览。更多请参考 http://en.wikipedia.org/wiki/ICO_(file_format)