原文发表于: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">