消除找不到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

• 發表新回應