How to define the website screen shortcut icon?

Question

I can't find how to make Android use a custom icon (e.g. the favicon or the app-touch image that iOS uses) for a website shortcut.

Can you give me a hint?

Answer 1

Android uses a home screen image AND a "Shortcut icon" (like favicon). If you only specify the home screen icon, the web page will not display an icon next to the URL in the web browser.

The "shortcut icon" must be listed separately, even though it can be the same file.

<link rel="shortcut icon" href="http://yourdomain.com/path/icon57.png" />
<link rel="apple-touch-icon" href="http://yourdomain.com/path/icon57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="http://yourdomain.com/path/icon72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="http://yourdomain.com/path/icon114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="http://yourdomain.com/path/icon144.png" />

Relative URLs will work for many devices, but most sources say you need to use absolute URLs.

Listing the sizes separately allows the device to download only the smallest image that meets it's needs. For the "shortcut icon", you can't list different sizes, but you can use an ICO file which may contain multiple sizes encoded in the file. Many image programs like GIMP can save ICO files with multiple sizes.

Note that if you want the shortcut icon to display in IE, it must be a real ico file.

Apparently, Android versions 2.1 and earlier only recognize the "precomposed" image link, but if you include the precomposed icon, every device that is capable of "fancifying" icons will skip their process and just use the precomposed ones. The Androids I tested can do their own fancifying, so I don't use precomposed icon links. It will depend on your compatibility needs.

<link rel="apple-touch-icon-precomposed" href="http://yourdomain.com/custom_icon.png"/>

For more information about using home screen icons...

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

Answer 2

Android and iOS seem to use the same references for the icons on the home screen.

For the HTML link icons:

<!-- These two are what you want to use by default -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

<!-- This one works for anything below iOS 4.2 -->
<link rel="apple-touch-icon-precomposed apple-touch-icon" href="apple-touch-icon-precomposed.png">

The difference between the two types are that the top two don't have a space. The bottom one includes both with a space in between. The space is not recognized by iOS 4.2+. Your best bet is to use all three. If you are limited on space, use only the top two.

For Sizes:

144 × 144 pixels for an iPad Retina display.

114 × 114 pixels for an iPhone Retina display.

57 × 57 pixels for almost anything else

One thing to watch out for is that iOS 4.2+ will simply ignore the size attribute, so you can just link them with out it. I'd suggest putting the size within the icon's file name just for organizational purposes.

Another thing to note is that you don't even need to include the links for the "apple-touch-icon"s. If there is no icons defined in the html, iOS will search through the root folder for files named the following in order. Android DOES need them defined, so put them in the code anyways.

apple-touch-icon-57x57-precomposed.png
apple-touch-icon-57x57.png
apple-touch-icon-precomposed.png
apple-touch-icon.png

Answer 3

This looks like a good explanation.

It would appear that if you place:

<link rel="apple-touch-icon" href="/path/to/some.png"/>
<link rel="apple-touch-icon-precomposed" href="/custom_icon.png"/>

In the bookmarked page's HTML, it will appear on the desktop automagically.

Answer 4

This Android and iPhone icon page suggests absolute URLs for Android.

So just amend KenY-N's tags to

<link rel="apple-touch-icon" href="http://yourdomain.com/path/to/some.png"/>
<link rel="apple-touch-icon-precomposed" href="http://yourdomain.com/custom_icon.png"/>