Stack Overflow 是如何做到的，所以他们的 apple-touch-icon 没有边框效果

Question

浏览页面源码后，我发现：

<link rel="apple-touch-icon image_src" href="//cdn.sstatic.net/Whosebug/img/apple-touch-icon.png?v=41f6e13ade69">

但即使在我这样做之后，我的形象仍然有一种无聊的效果。我的图像也是透明的png。有什么想法吗？

这是我的尝试（10.10.1 OS X Yosemite，Safari：版本 8.0.2）：

我用这个网站生成了收藏夹：

http://realfavicongenerator.net

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

Answer 1

这个答案有两点：

我是如何重现 Whosebug 的行为的
为什么这可能不是一个好主意

如何重现 Whosebug 的行为

我做了什么：

下载http:////cdn.sstatic.net/Whosebug/img/apple-touch-icon.png
将此图片提交至 RealFaviconGenerator（完全披露：我是该网站的作者）
将生成的图片和HTML放在测试网站
使用 Safari 访问它并添加书签

我得到了你预期的结果，即。透明背景。

这基本上就是你做的，所以肯定有问题。一些提示：

无论使用何种浏览器，favicon 都可能存在很多问题。他们经常缓存旧图标而不加载新图标。有时他们根本不加载您的图标，但如果您等待几秒钟就会加载它。等等。我的建议：尝试使用另一个域以确保您从一个全新的状态开始。
也许您的测试网站是一些可能与您的实际测试冲突的额外内容。例如，如果您的根目录中有一个文件 apple-touch-icon.png，Safari 可能会加载它，即使它没有在您的 HTML 代码中声明。

为什么这可能不是个好主意

Mac OS Safari 依赖于 Touch 图标，主要是为 iOS 设计的。它主要用于 "Add to home screen" 特性。在这种情况下，iOS 会阻止透明度并用黑色填充透明区域。将 whosebug.com 添加到主屏幕，您将获得：

老实说结果还可以，但这真的是所期望的吗？您的选择。

Answer 2

我想通了这里的问题。

右边最远的一个 TLD 为 .io

中间的 TLD 为 .com

它们是完全相同的克隆，相同的代码。所以一定是因为域名TLD不是.com/.net

编辑： 为了进一步回顾我发现的有关此的信息。貌似在我的域名前加上一个www，让它完全透明。

mysite.com 有效
www.mysite.com 有效
mysite.io不工作
www.mysite.io 有效

Answer 3

T运行sparent Apple Touch 图标确实是可能的。您需要做的是使用 ImageOptim for Mac 或 Windows 上的类似程序从 PNG 中删除所有多余信息。我进行了广泛的研究，并通过查看 Virtual DJ 站点使用的 Apple Touch 图标偶然发现了答案。此图标在 iOS 和 MacOS Sierra 上保持其 t运行sparent 背景。我查看了文件大小，意识到它与我在 Safari 中为我的收藏夹制作的具有 t运行sparency 的自定义苹果触摸图标相比是多么小。接下来，我使用 Mac 的预览应用程序中的检查器查看了文件信息。我所有的自定义 apple touch 图标在检查器部分都有四个选项卡，分别名为 General、exif、PNG 和 TIFF。虚拟 DJ 图标只有两个选项卡，分别名为 PNG 和 General。一旦我通过 ImageOptim 运行我的自定义图像，文件大小下降了 90% 以上，额外的 TIFF 和 exif 标签从预览中的检查器中消失了。果然，一旦我重新加载我的自定义图像并启动 Safari，我所有的收藏夹选项卡都有 t运行sparent 背景！

Stack Overflow 是如何做到的，所以他们的 apple-touch-icon 没有边框效果

How does Stack Overflow make it so their apple-touch-icon doesn't have a border effect

html

favicon