您在這裡

消除找不到apple-touch-icon.png的報錯

James Qi 在 2019年11月17日 - 17:32 發表

  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 GuidelinesApp Icon

 

回應

版主你好,
我有點搞糊塗了...
請問文章中提到的三種作法,隻要擇一即可嗎?
比如說,我選擇第一種作法,將我的網站的favicone的logo命名為apple-touch-icon.png,然後再透過FileZilla將這個png檔案上傳到html_public的資料夾中,這樣就可以了嗎?
還是說上傳到html_public之後,還得在HTML的head添加<link rel="apple-touch-icon" href="apple-touch-icon.png">呢?

因為我在這篇文章
https://webhint.io/docs/user-guide/hints/hint-apple-touch-icons/
看他的說明好像是命名自己的logo為apple-touch-icon.png,並且上傳到html_public,然後還要在HTML的head添加<link rel="apple-touch-icon" href="apple-touch-icon.png">,
他的作法看起來像是結合你說的第一種+第二種,隻是你說的第二種是<link rel="apple-touch-icon" href="/logo.png" />,指向的圖片網址不一樣,所以我有點困惑,想請你幫我確認一下,避免我自己誤解而搞砸了,感謝你。

版主你好,謝謝你有回覆我。
我最後使用「1」+「2」的方案,但是反而出現了更多的404報錯,我不曉得是否哪裡做錯了,能否請你幫我看一下?

方案「1」的做法,我製作了二個網站logo的png檔案,並且將他們命名為「apple-touch-icon.png」以及「apple-touch-icon-precomposed.png」。
接著將他們上傳到「public_html」的文件夾裡面,如下面這張圖:
https://upload.cc/i1/2020/11/29/kb3H02.png

接著是方案「2」
將html程式碼使用「CodeSnippet」這套外掛插入到hear.php
「CodeSnippet」的程式碼片段如下面這張圖:
https://upload.cc/i1/2020/11/29/8o1rcs.png

不知道為什麼,從11/19之後,到現在反而產生更多的404報錯。

發表新回應

Plain text

  • 不允許使用 HTML 標籤。
  • 自動將網址與電子郵件地址轉變為連結。
  • 自動斷行和分段。