* 此文章仅适用于 Mac 用户
favicon ... 也就是浏览器书签里那个小图标。在不同设备和浏览器上，其显示形态不同。
Mac Safari
iOS Safari
当然，除此之外还有 Chrome 、IE ... 这些不同的浏览器；除了浏览器多样，还有设备尺寸多样 ── iPad 、iPhone 、Web 、Android ...
因此，为了打造出优秀的用户体验，必须考虑到跨平台、跨设备问题。
说这么多，要满足这些条件一个 Mac App 就够了，它就是 Image2Icon 。对于动手能力强的朋友，教程到这里就结束了。请移步官网下载。
Image2Icon
下载完 app 后，按照下面这几个步骤：
1. 在 Photoshop 等软件中制作好 icon ，以图片格式导出即可；
以这个 emoji.png 为例
2. 将图片拖动到 app 中，app 会自动导出一个文件夹到桌面；
演示动图
3. 打开文件夹，其中有一个名为「index.html」文件，它是将 favicon 内嵌到网页中的代码模板。将代码模板复制到要内嵌的 html 文件的 <head></head> 标签中。把上一步生成的文件夹上传至服务器，更改模板中的路径为自己上传的文件夹的路径。（注意，模板中的文件名和格式不要更改，更改文件夹路径即可。）
下划线部分为我更改后的路径
完成效果：
Mac Safari
网友评论