0%

网站图标 Favicon 的那些事

Rain

自从用 Hexo 建站后,总想把 hexo-theme-next 的默认 Logo N换掉,直到今天才终于完成了它。
下午我花了点时间亲自做了个 H 的 Logo。在自制 Logo 的过程中才发现一个简简单单的网站 Logo 知识点也不少。特此记录下来,以做备忘。

  • 原来的图标N
  • 现在的图标H

起初一直纳闷 hexo-theme-next 的 Logo 尺寸为什么只有 16x1632x32 的,我还自大的认为 Logo 的尺寸越大在浏览器中显示的越清楚,直至 Google 下,才发现大错特错。

原来 Logo 也是要尺寸和大小限制的。下面就从 Logo 是什么开始讲起。

一、图标介绍

Favicon 是 favorites icon 的缩写,亦被称为 website icon(网页图标)、page icon(页面图标)或 urlicon(URL图标)。Favicon 是与某个网站或网页相关联的图标。

Favicon 显示在浏览器的地址栏、标签或者收藏夹上,是展示网站个性的缩略 logo 标志,也可以说是网站头像,目前主流的浏览器都支持 favicon.ico 图标,如果要让网站看起来更专业、更美、更有个性,favicon.ico 是必不可少的。
现在的浏览器也支持 PNG(便携式网络图片)格式,少部分还支持 GIF(图形交换格式)动画图像格式(如 Firefox)。

Firefox 分原版(英文版)和中文版。中文版被国人添加了好多不干不净的东西,至于原因嘛你懂的。所以请下载英文版的Firefox再安装中文语言插件。至于操作步骤请善用搜索。

1999年3月,微软发明了 Favicon,用于在IE的收藏夹上显示网站个性图标。
1999年12月,W3C将 Favicon 在 HTML 4.01 中标准化。
2000年1月,XHTML 1.0 标准中也包含了它。XHTML 中规定了 Favicon 在HTML页面中的声明方法。
2003年,Mozilla 发布 Firefox 0.9.6 扩展了 Favicon 的图片格式,当时已经提供了对 PNG/GIF/JPEG 的支持。
此后其它浏览器跟随着Firefox也都添加了此功能,现在所有的浏览器都支持 ICO/PNG/GIF/JPEF 格式的 Favicon

Firefox 还添加了对 GIF 动画/SVG 的支持。目前属它支持的图片格式最多。

二、部署方法

最初,定义一个 favicon 的方法是将一个名为 favicon.ico 的文件置于 Web 服务器的根目录下。

后来 favicon 纳入XHTML标准之后,开始在HTML页面的<head>里使用<link>元素来声明它的格式、名称与路径。这样,任何一个适当大小的(16×16 像素或更大)的图像都可以用作 favicon

例子:

1
2
3
4
5
6
<head>
...
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="bookmark" href="/favicon.ico" type="image/x-icon" />
...
</head>

如果,你想展现个性,也可以做一个动态的favicon,申明方法如下:

1
<link rel="icon" href="/favicon.gif" type="image/gif" />

对于 GIF 动画格式,现在已知的只有Firefox支持,其它浏览器请自行测试。

三、制作方法

1. 懒人做法

如果你不想设计,不想做图,可以自行在 Google百度搜索网页图标。

2. 自己制作

个性,是一种生活态度,所以大部分人还是会选择自己设计一个网站图标。可以使用 PhotoShop 或其它制图工具进行设计。

这里,我使用的在线SVG制作工具,制作完成后可以保存为svg格式,也可以导出为png格式。

SVG(Scalable Vector Graphics),即可缩放的矢量图形。它是基于XML(Extensible Markup Language),由World Wide Web Consortium(W3C)联盟进行开发。
SVG3种类型的图形对象:矢量图形(由直线和曲线组成的路径)、图象(image)、文本(text)。

  • 优点,为体积小、制作方便、压缩性高、放大后不图像不失真。
  • 缺点,它的文本对象,因计算机的字库不同,所以存在字体变形的问题。

为了解决SVG的缺点,我们将制作完成的SVG导出为PNG格式来给字体定形,然后再将PNG转换成路径格式的SVG。

这里我们使用在线网站vectorizer来将PNG转换成路径格式的SVG。

PNG图标(已压缩,5.71KB) SVG图标(体积,2KB) 备注
logo.png logo.svg 原图
png svg 各自放大500%

四、图标大小

许多人并不清楚,网站图标到底做成多大才合适,16x16?还是 32x32?甚至是 128x128??

很多人想当然的认为尺寸越大越清晰,展示起来越给力!比如博主自己……

根据实际测试,16x16 和 32x32 的网站图标,实际展示在浏览器标签栏的效果也没有很明显的区别。超过 32x32 的 favicon.ico 图标,不但效果没有明显改变,还可能会导致某些浏览器无法显示。

最主要的是谷歌网站图标缓存服务器,不会缓存超过 16kb 的图标。

所以,对于网站 favicon 图标的大小,建议大家选择 16x16 或者 32x32,再大也是完全没有必要的。效果不见涨,还可能会影响网站加载速度。


References:

  • 维基百科 Favicon
  • 关于网站图标favicon.ico那点事儿
  • 网页中favicon.ico图标的作用、尺寸、制作
---- The End Thanks ----
Donate if you like the article.