消除找不到apple-touch-icon.png的报错

　　Drupal的报错日志里面常常堆满了这样的报错：

page not found 11/17/2019 - 11:26 apple-touch-icon.png 匿名使用者 (未驗證)
page not found 11/17/2019 - 11:26 apple-touch-icon-precomposed.png 匿名使用者 (未驗證)
page not found 11/17/2019 - 11:26 apple-touch-icon-120x120.png 匿名使用者 (未驗證)
page not found 11/17/2019 - 11:26 apple-touch-icon-120x120-precomposed.png 匿名使用者 (未驗證)

　　还有各种不同的尺寸，例如: 57x57, 152x152等。

　　在网上查了一下，这是iPhone、iPad等苹果公司设备用户用Safari浏览器访问网站的时候会检测是否有这些文件，以便添加到桌面的时候把这种图片作为图标，也就是说这是iOS的一种专门属性。

　　要解决这个问题主要几种办法：

1. 在网站根目录下增加这种文件，可以处理成多种尺寸，iOS添加到桌面的时候还会进行圆角化等处理；
2. 在网页html的head部分添加<link rel="apple-touch-icon" href="/logo.png" />，指定Apple设备读取的文件名；
3. 拦截或重定向对这些文件的访问，不记录到Drupal报错日志中，下面显示.htaccess里面的设置：

RewriteCond %{REQUEST_URI} ^\/apple-touch-icon.*\.png$
RewriteRule ^ logo.png [L]

　　也就是apple-touch-icon*.png的文件都会给出logo.png的结果，自然也不会有404的报错了。

　　第二、第三种办法其实都是拿以前现成的logo.png顶替，我们网站用的64x64透明PNG图片，我刚才拿自己的旧iPhone手机试着用Safari打开我们网站，添加到桌面，就看到一个黑底的LOGO出现，不是很美观，有待后面修改成白底的。

　　上面的第一种办法是最标准的做法，只是需要制作多种尺寸的图片，稍微麻烦一点，但效果要好一些。

  　　2020-3-5补充：添加了多个尺寸的图片，在html中添加：

<!-- Standard iPhone 57x57 --><!-- Retina iPhone 114x114 --><!-- Standard iPad 72x72 --><!-- Retina iPad 114x144 -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon-precomposed.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120-precomposed.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152-precomposed.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />

参考链接：

CSDN Blog：关于Apple设备私有的apple-touch-icon属性详解

Apple官方文档：Human Interface Guidelines - App Icon

• 添加新评论