为 Web 页面添加 iPhone 固定标签页的图标

为 Web 页面添加 iPhone 固定标签页的图标

2017-10-27 16:16

我曾经将一个 Web 标签页固定到 iPhone 的主屏幕上，发现居然有一个图标。当时没有留意，可直到今天发现我的博客页面在我的 iPhone 主屏幕上显示一片空白后，才想起来原来还可以自定义图标。

将 Web 页面图标固定到主屏幕：

固定到主屏幕

方法非常简单，只需要在我 html 里的 head 中加入以下代码即可：

<link rel="apple-touch-icon" href="图标的链接.svg" />

对于我的博客，也就是这篇文章来说，我用了我的个人头像作为图标。

我的头像

最终固定到 iPhone 主屏幕的效果还不错！

最终效果

参考资料

• Creating Pinned Tab Icons
• Configuring Web Applications

本文会经常更新，请阅读原文： https://walterlv.com/post/add-icon-for-pinned-tab-icons.html ，以避免陈旧错误知识的误导，同时有更好的阅读体验。

知识共享许可协议

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布，但务必保留文章署名 吕毅 （包含链接： https://walterlv.com ），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请 与我联系 (walter.lv@qq.com) 。