零字节苹果触摸 - 元音标记
#html #网络开发人员 #性能 #webperf

*这是有关代码的一系列文章的一部分,您可以安全地从网站的<head>标签中删除。

您可以在此处阅读其余内容:getoutofmyhead.dev*


apple-touch-icon是将网站添加到HomeScreen时在iOS设备上使用的图像。

不同的iOS设备以不同的尺寸显示图标,因此看到这样的东西很常见:

<link rel="apple-touch-icon" sizes="152x152" href="https://assets.guim.co.uk/images/favicons/fee5e2d638d1c35f6d501fa397e53329/152x152.png"/>
<link rel="apple-touch-icon" sizes="144x144" href="https://assets.guim.co.uk/images/favicons/1fe70b29879674433702d5266abcb0d4/144x144.png"/>
<link rel="apple-touch-icon" sizes="120x120" href="https://assets.guim.co.uk/images/favicons/c58143bd2a5b5426b6256cd90ba6eb47/120x120.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="https://assets.guim.co.uk/images/favicons/68cbd5cf267598abd6a026f229ef6b45/114x114.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="https://assets.guim.co.uk/images/favicons/873381bf11d58e20f551905d51575117/72x72.png"/>
<link rel="apple-touch-icon-precomposed" href="https://assets.guim.co.uk/images/favicons/6a2aa0ea5b4b6183e92d0eac49e2f58b/57x57.png"/>
// 830 bytes - from theguardian.co.uk

您可以从网站的<head>中删除所有这些代码!

就像使用favicon.ico一样,您可以删除这些链接并将单个apple-touch-icon.png放在您的根目录中。

例如。 https://example.com/apple-touch-icon.png

koude7 is the largest icon size any koude2 device requires. [^1] 其他设备将降低图像以适合。


那其他尺寸呢?

如果您仍然宁愿为每个可能的图标大小指定一个不同的图像,则仍然可以执行此操作,而无需在<head>中添加任何代码。

您可以将多个apple-touch-icons放在网站的根目录中。 So long as they're named in the following way:

  • 默认/apple-touch-icon.png
  • 指定尺寸/apple-touch-icon-72x72.png
  • 指定预先构造/apple-touch-icon-precomposed.png
  • 指定尺寸和预先构造/apple-touch-icon-57x57-precomposed.png

预先构成的意思是什么?

旧版本的iOS为房屋屏幕上的图标添加了照明效果。添加precomposed后缀消除了这些效果。

这是告诉iOS您已经添加了效果的一种方式,这可能是不正确的。


Android和apple-touch-icons

Chrome for Android的较旧版本使用apple-touch-icons在房屋屏幕上添加快捷方式。
但仅当找不到足够大的非苹果图标时。

android的一些较旧版本会在网站的根部寻找apple-touch-iconsBut this practice ended as it was using koude26 of mobile users bandwith!

如果android找不到要使用的大图标。它将使用该网站的favicon.

因此,您甚至可以通过遵循本指南来掩盖这种不寻常的情况:(零字节favicon markup)[https://dev.to/shadowfaxrodeo/zero-byte-favicon-markup-keep-the-favicons-without-any-of-the-markup-47hg]。