自定义网站图标
本文由 小茗同学 发表于 2016-08-02 浏览(1338)
最后修改 2016-08-30 标签:html 自定义 网站 图标 favicon

原文发表于:2014-08-06

如何自定义网站图标

所谓网站图标,就是每个标签上方网页的小图标,一般显示大小为16*16,如:

默认情况下浏览器会加载网页所在域名的根目录下的favicon.ico。

举个例子,假如你访问的网页是:http://blog.liuxianan.com/aaa/bbb/index.html
在你不做特殊设置的前提下,浏览器会自动把如下图片当成网站的图标:http://blog.liuxianan.com/favicon.ico

所以,最简单的自定义图标的方式就是替换这张图片,用于网页图标的ico图标分辨率理论上说一般不需要太大,但是为了照顾一些高分辨率的移动设备,建议统一使用64*64的尺寸。

如果我想换个路径呢?

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

使用非ICO格式

老式浏览器只支持ico格式图片作为网站图标,现代浏览器一般支持任意格式,包括gif,如果考虑兼容性的话,可以两者都写:

<!-- 老式浏览器写法 -->
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<!-- 现代浏览器写法 -->
<link rel="icon" href="images/favicon.png" type="image/png">