移动触摸图标答案

【问题标题】：Mobile Touch Icon移动触摸图标
【发布时间】：2017-06-20 06:20:07
【问题描述】：

我想为相关的智能手机/平板电脑设置不同尺寸的触摸图标。

我试过了：

<link rel="apple-touch-icon" sizes="76x76" href="http://www.mywebsite.com/img/touch-icon/apple-touch-icon-76.png" />
<link rel="apple-touch-icon" sizes="120x120" href="http://www.mywebsite.com/img/touch-icon/apple-touch-icon-120.png" />
<link rel="apple-touch-icon" sizes="152x152" href="http://www.mywebsite.com/img/touch-icon/apple-touch-icon-152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="http://www.mywebsite.com/img/touch-icon/apple-touch-icon-180.png" />
<link rel="shortcut icon" sizes="196x196" href="http://www.mywebsite.com/img/touch-icon/android-icon.png">
<meta name="msapplication-square70x70logo" content="http://www.mywebsite.com/img/touch-icon/smalltile.png" />
<meta name="msapplication-square150x150logo" content="http://www.mywebsite.com/img/touch-icon/mediumtile.png" />
<meta name="msapplication-wide310x150logo" content="http://www.mywebsite.com/img/touch-icon/widetile.png" />
<meta name="msapplication-square310x310logo" content="http://www.mywebsite.com/img/touch-icon/largetile.png" />

这不适用于 iOS 和 Android。链接可能是正确的，因为 Windows 可以识别不同的图标。

是否有任何我没有注意到的错误命名或快捷方式？

【问题讨论】：

标签： android html ios apple-touch-icon

【解决方案1】：

您需要确保服务器上有一个有效且受信任的安全证书才能使用绝对 URL，或者您需要使用相对 URL：

<link rel="apple-touch-icon" sizes="76x76" href="img/touch-icon/apple-touch-icon-76.png" />
<link rel="apple-touch-icon" sizes="120x120" href="img/touch-icon/apple-touch-icon-120.png" />
<link rel="apple-touch-icon" sizes="152x152" href="img/touch-icon/apple-touch-icon-152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="img/touch-icon/apple-touch-icon-180.png" />
<link rel="shortcut icon" sizes="196x196" href="img/touch-icon/android-icon.png">
<meta name="msapplication-square70x70logo" content="img/touch-icon/smalltile.png" />
<meta name="msapplication-square150x150logo" content="img/touch-icon/mediumtile.png" />
<meta name="msapplication-wide310x150logo" content="img/touch-icon/widetile.png" />
<meta name="msapplication-square310x310logo" content="img/touch-icon/largetile.png" />

更多信息请参见here。

希望这会有所帮助！

【讨论】：

这很有趣。我的猜测是，这是因为 Windows 默认允许 CORS，而 Apple 不允许。无论如何，尽量使用相对链接——相对链接适用于这两种情况:)

【解决方案2】：

您可能希望将您的网站提交给RealFaviconGenerator's favicon checker。此在线工具会分析您的网站图标标记并生成报告。例如，您可能会发现您的图片 URL 无效或图片格式不正确。

完全披露：我是这个工具的作者。

【讨论】：