如何为网站设置 favicon(收藏夹小图标)之 Mac App 篇

* 此文章仅适用于 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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,860评论 18 139
  • Spring Boot 参考指南 介绍 转载自:https://www.gitbook.com/book/qbgb...
    毛宇鹏阅读 46,936评论 6 342
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,018评论 25 708
  • 22年12月更新:个人网站关停,如果仍旧对旧教程有兴趣参考 Github 的markdown内容[https://...
    tangyefei阅读 35,215评论 22 257
  • 小王子的狐狸说:“对我来说,你还只是一个小男孩,就像其他千万 个小男孩一样。我不需要你。你也同样用不着我。对你来说...
    只为遇见新的你阅读 267评论 0 0