如何制作网站的ico图标favicon.ico

最新推荐文章于 2023-10-09 19:41:21 发布

转载最新推荐文章于 2023-10-09 19:41:21 发布 · 1.1k 阅读

文章标签：

#internet #ie #url #浏览器 #图形 #扩展

PS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何创建及使用个性化网站图标（favicon.ico），包括图标的设计、转换为.ico格式的方法、正确显示图标的步骤，以及如何为不同页面设置不同图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当我们打开一些网站后，会在 URL 地址栏和（收藏该站后）收藏夹 Favorites 里看到该站前有个个性化的图标，这些漂亮的图标在收藏列表中显得格外醒目，让人印象深刻。

　　Internet Explorer 5.0 提供了一个新的功能，就是可以让网页设计者自己设计网站URL的图标。也就是在 Internet Explorer 地址栏前面，以及在收藏夹里面，显示的是你自己设计的图标，而不是默认的 Internet Explore r 图标。

　　这种图标（Icon）是一种特殊的图形文件格式，它是以 .ico 作为扩展名。普通的图像设计软件无法使用这种格式。下面我们就讲讲这些个性化图标 favicon.ico(Favorites icon) 是怎么做出来的。

　　1、用画图软件如Photoshop或者FireWorks做一个16*16的图标，为gif或jpg格式；

　　2、转换成16 x 16 像素的 .ico 图标文件，有以下几种转换方式可供选择：

　　(a).最简单的方法：到提供在线生成 ico 图标文件的网站，提交你的图片，自动生成 .ico 文件，如：

　　http://www.chami.com/html-kit/services/favicon/(简单易操作)

　　http://www.favicon.com，

　　http://www.graphicsguru.com/，。

　　(b).为 photoshop 安装图标格式支持插件，安装方法，将压缩包中的 ICOFormat.8bi 拷贝到 photoshop 安装目录下的 Plug-Ins/File Formats 下，再运行 photoshop 程序看看，已经支持 icon 文件了。

　　(c).下载很好用的 icon 文件编辑软件，很多软件集合了 icon 文件的库管理和编辑功能，使用很方便。如： MicroangeloV5.59c 汉化版(修正版)。

　　3、如何让图标文件正确显示

　　通常情况下，我们只要把图标文件命名为 Favicon.ico ，放到站点根目录下，不需要做其它任何修改，IE5 就会自动搜索Favicon.ico 文件，一旦发现便会在IE和收藏夹列表显示出图标了。

　　如果希望在同一个站中的不同页面可以设置不同的 icon 图标，那么您就需要在该网页文件的 head 部分加入这个内容：

　　<head>

　　</head>

　　注意：该图标的路径一定要使用绝对路径。

　　4、检验成果

　　上面的工作都做好后就可以检验自己的劳动成果了，把自己的页面收藏一下，如果不能直接看到，就关闭 IE，再重新打开，你就可以看到自己的个性化标志了。

　　小提示：如果你不要你的 Internet Explorer 在收藏夹中出现这些网站自行制作的图标，在加入收藏夹之后，做清除 History 的操作。然后再重新打开 Internet Explorer 浏览器之后，这些自行制作的图标就会消失，恢复成 Internet Explorer 默认的图标。

以上可概括简化为速成三式：

　1：先用画图软件最好是FireWorks或Photoshop做一个16*16的图标，存为gif格式；

　2：到这个网站转化为ico文件：http://www.chami.com/html-kit/services/favicon/

　 3：下载该ico文件并上传到网站的根目录下就完成了。