多平台 Favicon 在线生成器 – RealFaviconGenerator.net

新年快乐啊大家!不知大家有没注意到我的博客前面的小图标发生了一些有趣的变化呀~既然提到了这个 Favicon,今天我就来推荐一个网站:RealFaviconGenerator.net。这是由一位机智的“歪果仁”开发的可以根据你的要求而自动生成一套适应主流平台与浏览器的 Favicon 方案的网站。

先来简述一下什么是 Favicon,我直接引用 Wikipedia 上的内容吧:

Favicon 是 favorites icon 的缩写,亦被称为 website icon(网页图标)、page icon(页面图标)或 url icon(URL 图标)。Favicon 是与某个网站或网页相关联的图标。网站设计者可以多种方式创建这种图标,而目前也有很多网页浏览器支持此功能。浏览器可以将 favicon 显示于浏览器的地址栏中,也可置于书签列表的网站名前,还可以放在标签式浏览界面中的页标题前。

Favicon 最早于 1999 年出现在 IE5 上,并且在几个月之后由 W3C 纳入标准,作为代表网站的小图标。上图书签栏中可爱的 MIKU 酱和哔哩哔哩小电视就是网站的 Favicon 啦!在我看来,拥有一个好看的 Favicon,能为你的网站添上画龙点睛的一笔~

Favicon 通常指站点下一个名为 favicon.ico 的文件。ICO 是一种允许使用一个文件来包含多个版本的图标格式。Favicon.ico 的标准最初是由 Microsoft 和其他一系列厂商共同制定的,其建议尺寸为 16×16、32×32 和 48×48。然而如今我们生活中显示设备的屏幕尺寸和分辨率较以往已大大提高,这就使得这一标准下的图标在大部分情况下都会显得十分模糊(例如任务栏与桌面)。而且,不同的平台对于 Favicon 的处理有自己的标准,于是单一的 Favicon.ico 文件不再能应付得了需求了。下面贴几张图片来说明这个问题:

16×16 的 Favicon 在任务栏上的显示情况

16×16 的 Favicon 在桌面上的显示情况

57×57 的 Apple Touch 图标在 Retina iPad 上的显示情况

可以看到,上面的几个场景中,图标都较为模糊,与环境格格不入。今天推荐的这个 RealFaviconGenerator 呢,它和传统的 Favicon 生成器不太一样。RealFaviconGenerator 主要可以满足用户的两大需求:编辑图标,并自动生成关联代码。你只需要导入一个尺寸足够的源图像文件,接着在在线编辑器中对各个平台的 Favicon 进行配置,便可自动生成一个包含各种格式标准的图标压缩包和 HTML 代码。

先说图标编辑的部分。这个在线编辑器具有一些简单的效果处理功能。例如,你可以为 iOS 设备生成带不透明背景的图标,而为 Metro 磁贴生成白色阴影图标。这里展示一下我的博客被固定到 Windows 10 开始屏幕的磁贴上的效果吧:

接下来就是 HTML 代码自动生成了,把生成这段代码贴到相应的网页文件中就可以了。

如果你希望在 WordPress 站点下应用 Favicon,只需要这样操作:

1. 将得到的压缩包中的所有 Favicon 资源解压到网站主目录下

2. 打开你的 WordPress 管理界面

3. 点击外观

4. 点击主题编辑

5. 选择名为 header.php 的文件,并单击编辑按钮

6. 寻找一段以 <link rel=”shortcut icon” 开头,以 /favicon.ico” 结尾的代码。如果它存在,则用生成的代码块来覆盖它。没有的话则添加到 <head> 标签下面。

7. 保存更改

8. 刷新缓存,看看效果吧!

推荐链接

1. Wikipedia – Favicon

2. Favicons, Touch Icons, Tile Icons, etc. Which Do You Need?

3. GitHub – RealFaviconGenerator

4. WordPress – Creating a Favicon

1 条评论

发表评论

*