制作并添加网站图标(favicon)

网站图标就是俗说的favicon。有了它,通过浏览器访问你的网站时就可以在地址栏的地址前面显示出来。比如你现在看到的这个页面,在浏览器地址栏开头部分显示了一个“红色c+蓝色z”的图标就是了。另外,当别人收藏你的网站的时候,网站名称前面也会显示这个网站LOGO。Google现在也开始将这个图标转换成图片用在很多地方,比如水景一页的站外资源页上面就使用了这样的功能,在每个地址前显示该地址的logo。

那么,如何制作并使用网站图标呢?下面一步步进行说明。

一、制作LOGO图片

第一步当然是要先制作出你要用来作为图标的图片,可以是 jpg、png、bmp、gif 等格式。最好是正方形的,大于96*96像素,并且图片文件不大于150KB。例如我的原始图片,见右边的图。

如果你希望图标的背景是透明的,就必须使用 gif 或者 png 格式了。

可以使用 photoshop 来制作,当然别的方法也行。这就不是本文能解决的问题了。

二、将图片转换为图标

图标和图片是不同的,图标必须是 .ico 格式。可以到Dynamic Drive网站去免费转换。转换方法:

转换图片为 favicon 图标

转换图片为 favicon 图标

如上图所示,打开上面提到的网址后看到该页面,

1、单击 1 处上传你制作好的图片;

2、勾选 2 处的两个勾,使图标包含不同大小的格式;

3、单击 3 处的按钮进行转换,结果如下图,单击下面的蓝色按钮下载即可。

从上面的图片上还能看到图标的显示效果,如果不满意就重新制作吧。可以看到,水景一页的图标使用的就是透明背景。

三、使用网站图标

1、先将下载好的 favicon.ico 文件上传到网站服务器根目录

2、修改网页模板,在 </head> 标记前面插入下面的 html 代码:

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

另外,如果你也使用的是WordPress建的网站,修改方法是在你使用的主题文件夹里,找到页头模板(如,header.php ),打开后找到 </head> 并在它前面加上上面的 html 代码。

好了,这样就可以了。不过添加完成之后并不是立即可见的,也许要等待一到两天。当然,如果你清除自己的浏览器缓存(包括 cookie ),也许会立即就能看到。我忘记了。©

本文发表于水景一页。永久链接:<https://cnzhx.net/blog/make-and-use-favicon-for-ur-site/>。转载请保留此信息及相应链接。

5 条关于 “制作并添加网站图标(favicon)” 的评论

雁过留声,人过留名

您的电子邮箱地址不会被公开。 必填项已用 * 标注

特别提示:与当前文章主题无关的讨论相关但需要较多讨论求助信息请发布到水景一页讨论区的相应版块,谢谢您的理解与合作!请参考本站互助指南
您可以在评论中使用如下的 HTML 标记来辅助表达: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>