问题标签 [apple-touch-icon]

我有一个用 Bootstrap 3 构建的网站。我创建了所有格式的 favicon 和 apple-touch-icons：

然而，当我在 Safari 中查看我网站的书签时，我会看到 Bootstrap 图标。我不知道这些图标来自哪里和/或如何覆盖它们。

有任何想法吗？

我有在设备上以独立模式（从主屏幕启动）工作的 Web 应用程序。我需要的是当图标被改变时，它会在我的设备上被改变。所以在页面上我有：

运行应用程序然后重新启动 iPhone 后图标会发生变化。是否可以在不重新启动 iPhone 的情况下更改图标？

顺便说一句，我的应用程序使用应用程序缓存..也许这可能会导致问题

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

我试过这个：

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

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

我最近在我的网站上添加了苹果触摸图标。当我在我的 iPad 或我妻子的 4S 上将该网站添加到我的收藏夹时，它会使用该图标。我认为这只是因为我以前从未在这些设备上为该网站添加过书签。

在我的 iPhone 上，我之前在我的收藏夹中为网站添加了书签，它使用网站名称的通用第一个数字/字母作为触摸图标。现在我在那里有触摸图标，我无法让它使用它们。我试过在手机上清除 Safari 上的网站数据，关闭浏览器并重新打开它，甚至关闭并重新启动手机。不管我做什么，它仍然使用通用的触摸图标。有什么办法可以让它更新吗？

这是网站：3to1video.com

我的主机（hostgator）因为他们所说的 CPU 过度使用而关闭了我的网站。我正在使用wordpress。我没有添加任何新内容，但在他们的日志中，我看到有数百个对各种形式的 apple-touch-icon.png 的请求。

例子：

有人可以告诉我如何解决这个问题吗？他们说他们不会重新启用我的托管，直到它得到解决并且不提供任何帮助。

我想为 iPhone 设备提供一个自定义的主屏幕图标。这是我的 -Tag 之后的代码：

这在 6s 上运行良好，但在 iPhone 7 上无法运行。我做错了什么？

有人可以告诉我更多关于 iOS 如何优先显示书签图标的信息，以及是否可以显示与 favicon 不同的图标？谢谢

我正在尝试为我的标签apple-touch-icon中的每个尺寸提供图像。head我这样做是这样的：

问题是当页面被渲染时，所有这些图像都直接包含在页面中，作为数据 URI 中的 base 64，而不是相对 url。像这样：

由于几个原因，这是有问题的。一方面，这些图像仅在渐进式 Web 应用程序场景中需要；普通桌面浏览器不需要它们，但桌面浏览器被迫下载所有这些 base 64 块，从而减慢了页面加载速度。其次，即使在 PWA 场景中，每个设备也只需要这些图像中的一个，而不是所有图像，因此页面加载时间也会减慢。

这是对 <10,000 字节的图像的记录优化，因此它们都在此处加载可能是微不足道的差异。但是，原始 png 的总大小总计约为 27kb（转换为 base 64 后我不知道），如果不需要，我似乎宁愿不将这些数据包含在每个页面中。

我发现我可以将图像全部移动到 /static 文件夹并使用 引用它们href="logo57.png"，但是我失去了这些图像实际上存在于给定 href 的编译时验证，以及图像哈希的包含在文件名中（出于缓存原因）。

如何告诉 Gatsby 不要将这些图像作为数据 URI 直接内联到页面中？

在当今破碎的网络图标环境中（令人惊讶的是）.svg图标尚未获得广泛支持，人们可能会想在头部添加大量元素指向任意数量的

• favicons
• icons
• apple-touch-icons
• safari-pinned-tabs
• mstiles

等等

任何页面上的图标、图标、触摸图标、磁贴等的综合列表将是巨大的。

这会影响页面初始化和加载时间，在某些情况下会非常显着。

goldilocks 解决方案是能够根据<link>需要添加尽可能多的图标引用，而不会影响页面加载性能。

那么......异步加载这些元素是一种合法的方法吗？

例如。

<link>或者异步加载这些元素是否DOMContentLoaded意味着各种用户代理会错过他们正在寻找的图标？

在将 Web 应用程序添加到主屏幕之前，会弹出一个窗口来确认 PWA（渐进式 Web 应用程序）的名称和图标。最初，图标显示为当前页面的屏幕截图。当图像最终加载时，这里的图标...

<link rel="apple-touch-icon" sizes="128x128" href="appleicon.png">

...淡入并替换屏幕截图。有人知道在将其保存到主屏幕之前“预取”或“预加载”此图标的方法吗？

我正在尝试删除在下载图像之前显示的尴尬屏幕截图。

到目前为止，在<img >标签中渲染图像是行不通的。

谢谢