Does the apple touch icon have to be in the root folder?

Question

A seemingly simple question that I can't find a clear answer to.

Does the apple touch icon have to be in the root folder of my site?

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

Or is it okay if I place it in another location?

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

Answer 1

Not necessarily. From the Safari Web Content Guide, the Configuring Web Applications section states:

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

You should be able to place it in another folder and use the link elements to refer the browser to the alternate location of the apple-touch-icon file, and have it work just fine.