如何将 Safari 图标添加到我的网站？答案

【问题标题】：How do I add a Safari icon to my website?如何将 Safari 图标添加到我的网站？
【发布时间】：2017-11-03 22:02:35
【问题描述】：

我有几个带有图标的网站。然而，我的个人网站只是网站的第一个字母。

如何添加将出现在 Safari 收藏夹中的图标？ Favicon 没有像我最初想象的那样显示在这里。

【问题讨论】：

【解决方案1】：

您可以在您的<head> 中添加一个图标到您的浏览器（称为favicon）：

<link rel="shortcut icon" type="image/png" href="/favicon.png"/>

对于苹果：

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

如果您想了解更多信息，请阅读这篇文章：https://css-tricks.com/favicon-quiz/

请记住，图标需要很长时间才能更新，因此您需要稍等片刻。

【讨论】：

谢谢，我要把它添加到我的站点中吗？
是的，在标签中。查看本站：realfavicongenerator.net
好的，由于某种原因，它似乎仍然无法正常工作。我添加了以下几行： s3-us-west-2.amazonaws.com/clipshout-production/csicon.png"> s3-us-west-2.amazonaws.com/clipshout-production/…>
它只有字母 C，没有图标 :(，有什么想法吗？
@AnthonyPinto Favicon 和 Icon 通常需要 A LONG TIME 才能更新，所以请稍等。

【解决方案2】：

你需要像下面的例子那样设置apple-touch-icon：

<link rel="apple-touch-icon" href="/custom_icon.png">

【讨论】：

【解决方案3】：

将其插入您的脑海中：

<link rel="icon" type="image/png" href="https://cdn.css-tricks.com/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="https://cdn.css-tricks.com/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="https://cdn.css-tricks.com/favicon-96x96.png" sizes="96x96">

只需将链接替换为您喜欢的大小的图标，这样看起来不错且不模糊

【讨论】：

不幸的是没有工作，我正在尝试更新这个imgur.com/a/HJQr8 ..有什么想法吗？文件是否必须是某种类型，例如不是 PNG？
是的，它必须是 png
是 rel="icon" 还是 rel="apple-touch-icon"
它的意思是图标
好吧，我做了两个都加了..还是不行，有什么想法吗？ s3-us-west-2.amazonaws.com/clipshout-production/…" /> s3-us-west-2.amazonaws.com/clipshout-production/…" sizes="16x16 ">