Stack Overflow如何使它们的apple-touch-icon没有边框效果

Question

浏览页面源后，我发现：

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

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

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

我使用这个网站来生成favico：

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

这个答案有两件事：

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

如何重现StackOverflow的行为

我做了什么：

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

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

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

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

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

Mac OS Safari依赖于Touch图标，主要是为iOS设计的。它主要用于＆＃34;添加到主屏幕＆＃34;特征。在这种情况下，iOS会阻止透明度并使用黑色填充透明区域。将StackOverflow.com添加到主屏幕，您将获得：

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

Answer 2

我在这里想出了问题。

右边最远的一个TLD为.io

中心的TLD为.com

它们是精确的克隆，相同的代码。所以必须是因为域名TLD不是.com/.net

---

修改 为了进一步回顾我发现的信息。似乎在我的域前添加www，允许它完全透明。

• mysite.com正常工作
• www.mysite.com正常工作
• mysite.io 不工作
• www.mysite.io正常工作

Answer 3

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