html - 苹果触摸图标是否必须位于根文件夹中？

Question

一个看似简单的问题，我找不到明确的答案。

apple touch 图标是否必须位于我网站的根文件夹中？

<link href="http://example/apple-touch-icon.png" rel="apple-touch-icon" />

或者如果我把它放在另一个位置可以吗？

<link href="http://www.yoursite.com/some/other/folder/apple-touch-icon.png" rel="apple-touch-icon" />

Answer 1

不一定。来自Safari Web Content Guide , Configuring Web Applications section状态:

• To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png

• To specify an icon for a single webpage or replace the website icon with a webpage-specific icon, add a link element to the webpage, as in:

  • <link rel="apple-touch-icon" href="/custom_icon.png">

• To specify multiple icons for different device resolutions—for example, support both iPhone and iPad devices—add a sizes attribute to each link element as follows:

  • <link rel="apple-touch-icon" href="touch-icon-iphone.png">

  • <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">

  • <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">

  • <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

The icon that is the most appropriate size for the device is used. If no sizes attribute is set, the element’s size defaults to 60 x 60.

您应该可以将它放在另一个文件夹中并使用 link元素将浏览器指向 apple-touch-icon 的备用位置文件，让它正常工作。