当前位置

消除找不到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标签。
  • 自动将网址与电子邮件地址转变为链接。
  • 自动断行和分段。