如何在我的网站上添加Safari图标？

Question

如何在我的网站上添加Safari图标？

htmlcsssafari

5

如此所见 - http://imgur.com/a/g72bN

我有几个带有图标的网站。然而，我的个人网站只有网站名称的首字母。

我该如何添加一个在Safari收藏夹中显示的图标？原本我以为Favicon会显示，但它并没有。

- Anthony Pinto

3个回答

0

您需要像下面的示例一样设置apple-touch-icon：

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

- Sebastian Knopp

0

将以下代码插入到您的文件头部：

<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">

只需用您喜欢的大小替换链接，这样它看起来漂亮而不会模糊。

- Mechetle

很不幸，没有成功。我正在尝试更新这个链接：http://imgur.com/a/HJQr8。有什么建议吗？文件是否需要特定类型，比如非Png格式？ - Anthony Pinto

是的，它必须是一个PNG。 - Mechetle

是 rel="icon" 还是 rel="apple-touch-icon"？ - Anthony Pinto

它是图标意思。 - Mechetle

1

我已经添加了两个链接，但还是不起作用，有什么想法吗？<link rel="apple-touch-icon" sizes="180x180" href="https://s3-us-west-2.amazonaws.com/clipshout-production/apple-touch-icon-180x180.png" /> <link rel="icon" type="image/png" href="https://s3-us-west-2.amazonaws.com/clipshout-production/apple-touch-icon-57x57.png" sizes="16x16"> - Anthony Pinto

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- paolobasso · Accepted Answer

您可以通过将以下代码放入<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">

如果您想了解更多关于it技术的内容，请阅读这篇文章：https://css-tricks.com/favicon-quiz/

请记住，图标需要很长时间才能更新，所以您需要等待一段时间。