*这是有关代码的一系列文章的一部分,您可以安全地从网站的<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] 其他设备将降低图像以适合。
如果您仍然宁愿为每个可能的图标大小指定一个不同的图像,则仍然可以执行此操作,而无需在 您可以将多个 旧版本的 这是告诉 如果 因此,您甚至可以通过遵循本指南来掩盖这种不寻常的情况:(零字节favicon markup)[https://dev.to/shadowfaxrodeo/zero-byte-favicon-markup-keep-the-favicons-without-any-of-the-markup-47hg]。
那其他尺寸呢?
<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-icons
。 But this practice ended as it was using koude26 of mobile users bandwith! android
找不到要使用的大图标。它将使用该网站的favicon.