新手必备:如何设计FAVICON站点图标!

各种教程 疯子墨 来源:互联网收集 3年前 (2016-04-01) 1646次浏览 2个评论

新手必备:如何设计 FAVICON 站点图标!

现代网页设计中最令人沮丧和感到混乱的莫过于网站图标了(favicon),是“favorite icon”的简称。这枚小小的图标一般出现在浏览器的选项卡里、地址栏处,根据我们操作系统和浏览器的不同,还有可能出现在其他地方。

我先给大家科普下:favicon,即 Favorites Icon 的缩写。favicon 就是出现在浏览器地址栏左侧的那个小图标。favicon,中文名称是网站头像。当然,这不仅仅是 Favicon 的全部,根据浏览器的不同,Favicon 显示也有所区别:在大多数主流浏览器如 FireFox 和 Internet Explorer (5.5 及以上版本)中,favicon 不仅在收藏夹中显示,还会同时出现在地址栏上,这时用户可以拖曳 favicon 到桌面以建立到网站的快捷方式;除此之外,标签式浏览器甚至还有不少扩展的功能,如 FireFox 甚至支持动画格式的 favicon 等。

新手必备:如何设计 FAVICON 站点图标!

新手必备:如何设计 FAVICON 站点图标!

由于他们不同寻常的文件格式和超级小的图像尺寸使得设计师们在设计这些图标时显得很费劲。更加见鬼的是,人们有时候甚至纠结于这单词的发音(我曾听人说“fah-vee-con”和“fave-eye-con”,尽管前者更常见)。啊,穿过一切没用的元素,直击主题吧!

设计一枚 favicon

创建标识是设计的第一步。一个好的 favicon 应该在本身小得如同表情的情况下捕获网站的本质,并且在非常紧凑的空间里传达你的品牌。Favicon 最常见的形式是该公司的商标标志(并非完整的标志与文字合并成的商标)。

新手必备:如何设计 FAVICON 站点图标!

(这些网站使用该品牌的标志,或至少接近它)

排除任何文本是一个好主意,毕竟这图标是在太小了。不过也有例外,那就是标志性的标志标记文本。例如,维基百科使用公认的“W”而 Facebook 使用其众所周知的「F」。

新手必备:如何设计 FAVICON 站点图标!

(这些图标使用与该品牌密切关联的一个字母。在这个例子中,你还会注意到,迪斯尼图标出现失常。这是因为这截图拍摄于视网膜显示屏,他们只使用一个 16×16 图标大小,而其他网站提供一个 32×32 大小和更多的细节。)

这些网站图标们实在是太小了导致了每个像素都被计算在内。有时候直接把一个完整的 logo 缩小下来很容易造成图标变得很模糊。所以,制作这些网站图标时往往都是按照像素级别去设计。

新手必备:如何设计 FAVICON 站点图标!

(这是 Facebook 的 logo 被整合为 32*32 像素时的一部分,边缘混淆而模糊,再一次证明像素级别的设计是很有必要的。)

在编辑图标时,我喜欢用位图软件编辑。例如 Photoshop 或者 Pixelmator 就可以做出很棒的效果。我通常先调整我的大标志到 64×64px,因为这是我需要的最大的图标大小。接着我使用铅笔工具编辑一次,知道像素图标看起来很脆。这是一个非常繁琐的过程,可能需要一两个小时,但它会产生最好的结果。

一旦我把满意的 64×64px 图标做出来,我会按照原来的方法继续做出 32×32, 24×24 和 16×16 的图标。下面是各尺寸对应的用途:

  • 64×64 –Safari 阅读列表和 Windows 网站图标
  • 24×24 –固定在 IE9
  • 32×32 –高 DPI 或视网膜显示屏往往会用到这个尺寸的图标
  • 16×16 – 在各种浏览器中最常用的尺寸大小

你可能会发现要得到这些小图标,通常通过调整 64×64 的就可以了,但往往会有更多的地方需要用到像素级别的编辑。记住如果你想调整这些小图标的 alpha 值也是可以的。几乎所有当下使用的浏览器都支持透明小图标。

保存 favicon

我们做完所有尺寸的图标后就可以保存了!在 ps 中使用“存储为 web 所用格式”然后选择 png 格式。接下来需要转换 png 为 ICO 文件。我们把这些图标再次统一放进一张大的 png 图片里。ICO 并不是一个常用的格式,但是我们依然需要它。使用 X-Icon 编辑器可以很好地转换之。这是一个免费的 web 在线工具,我们上传自己的图像然后导出合适大小的图标。步骤非常简单,跟着该网上的步骤指示就 OK 了。

新手必备:如何设计 FAVICON 站点图标!

(X-Icon 可以让我们很方便地根据网站指示上传 png 格式的图片然后导出 ico 格式的图标,尺寸很丰富~)

给网站添加 favicon

完成以上步骤后我们就可以把 ico 文件存到网站根目录下了。现在我们在网站的顶级域名外加上“/favicon.ico”即可看到该图标。比如https://www.fengzimo.com/favicon.ico

几乎每一个浏览器都会自动查找网站根目录下的 favicon.ico 文件然后显示出来,所以不要将它藏在文件夹里面,不然浏览器无法读取。同时,考虑到跨浏览器的兼容性,我们不要给这个图标添加任何链接。

更新 favicon

由于某些原因浏览器很喜欢保存网站图标,这很糟糕,因为我们在开发的过程中需要更新图标,每次我们放进一个新的图标浏览器却不会自动把新的覆盖旧的,看起来很不舒服。

此时,我们可以添加一个临时的 html 指向 favicon.ico 的位置。此外,我们应该添加一个短而无意义的图标 URL 查询字符串,如下:

<link rel=”shortcut icon” href=”https://www.fengzimo.com/favicon.ico?v=2″ />

这将使浏览器认为这是一个迫切需要完成的任务,我们的新图标就这么被更新了。切记更新完毕后记得立马删掉该语句。那么如果我们需要额外再更新着这图标呢?一样的方法,增加 v 后面的数值就 OK 了。这样子这个 url 永远都是独特有用的,但是要确保每次更新完都记得把这串语句删掉。

制作花样繁杂的网站图标  

本文只是粗略地介绍一个网站图标制作并投入使用的流程,但实际设计中我们往往需要制作各式各样的图标。比如 ioc 触屏图标,windows 的 metro 风格图标,google TV 图标等等,所以墙裂建议你查看一下这份 favicon 审核列表。

新手必备:如何设计 FAVICON 站点图标!

(Favico.js 允许我们创建动态图标)

你可能需要创建很多可标记的动态图标,标记是为了统计数量,所以很有必要去看这份文件。对了,这文件的跨浏览器支持性不是很好,但是依然很好用。

So~小伙伴们有什么额外的网站图标的知识内容或者疑问都在评论里写出来吧!


来源/作者:疯子墨 (微信/QQ:973525196 公众号:fengzimo168)
本文地址:https://www.fengzimo.com/255.html 欢迎转载,转载请注明作者名称。
喜欢 (9)
疯子墨
关于作者:
一个混迹于互联网边缘的人,关注IT互联网和自媒体的站长博客!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 学习了
    学习了2016-04-05 00:27 回复 未知操作系统 | 未知浏览器
  2. 签到成功!签到时间:2016-04-02 00:04:32,每日打卡,生活更精彩哦~
    疯子2016-04-02 00:05 回复 Windows 7 | Chrome 45.0.2454.101