* 此文章仅适用于 Mac 用户
favicon ... 也就是浏览器书签里那个小图标。在不同设备和浏览器上,其显示形态不同。


当然,除此之外还有 Chrome 、IE ... 这些不同的浏览器;除了浏览器多样,还有设备尺寸多样 ── iPad 、iPhone 、Web 、Android ...
因此,为了打造出优秀的用户体验,必须考虑到跨平台、跨设备问题。
说这么多,要满足这些条件一个 Mac App 就够了,它就是 Image2Icon 。对于动手能力强的朋友,教程到这里就结束了。请移步官网下载。

下载完 app 后,按照下面这几个步骤:
1. 在 Photoshop 等软件中制作好 icon ,以图片格式导出即可;

2. 将图片拖动到 app 中,app 会自动导出一个文件夹到桌面;

3. 打开文件夹,其中有一个名为「index.html」文件,它是将 favicon 内嵌到网页中的代码模板。将代码模板复制到要内嵌的 html 文件的 <head></head> 标签中。把上一步生成的文件夹上传至服务器,更改模板中的路径为自己上传的文件夹的路径。(注意,模板中的文件名和格式不要更改,更改文件夹路径即可。)

完成效果:

网友评论