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

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内容指南中," 配置Web应用程序"部分指出:

• 要指定整个网站的图标(网站上的每个页面),请将PNG格式的图标文件放在名为的根文档文件夹中 apple-touch-icon.png

• 要为单个网页指定图标或使用特定于网页的图标替换网站图标,请在网页中添加链接元素,如下所示:

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

• 要为不同的设备分辨率指定多个图标(例如,同时支持iPhone和iPad设备),请sizes为每个链接元素添加一个属性,如下所示:

  • <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">

使用最适合设备大小的图标.如果未设置sizes属性,则元素的大小默认为60 x 60.

您应该能够将它放在另一个文件夹中,并使用这些link元素将浏览器引用到apple-touch-icon文件的备用位置,并使其正常工作.