I found a few references to this lately and just had to look into it. This is similar to the FAVICON approach used in browsers, but supports a (60×60), officially a 57×57 pixel icon.
The code is simple:
<link rel="apple-touch-icon" type="image/jpeg" href="/example.jpg" />
Old Reference (no longer works):
Using this will increase branding efforts by displaying and icon in the users browser while they are on the site, as well as showing it in their bookmarks.
If you do not add this file, there are two potential (neutral/negative) effects:
- The default icon from the webserver may be shown (example: sun/iplanet).
- The default icon from the browser will be shown – additionally resulting in a ”’404 Not Found”’ in your webserver logs.
The standard location for this file is the webserver root, you MAY specify other locations, but not all browsers will retrieve it (unless you explicitly define it in your HTML).
Additionally, to be selective you can add HTML markup to the <head> section of each page.
<link rel="SHORTCUT ICON" href="/favicon.ico" type="image/x-icon" title="FAVICON" />
NOTE: title is optional, type is preferred, rel and href are mandatory.