This page is the first part of a discussion on supporting favicons, Apple Touch icons, and site thumbnail images. First, I'll try to explain the rôles and invocations of these images without peculiar reference to WordPress or to PHP.

If you're already quite familiar with these three sorts of graphics and with the HTML to associate them with a webpage, and just want some PHP which you can insert into a WordPress theme to generate such HTML, then you might want to go onto FavIcons, Apple Touch Icons, Site Thumbnail Images, and WordPress: The Code and How to Use It.

FavIcons

favicons are those images, typically tiny, associated with specific websites, in or beside URL fields on browser tabs and especially in menus of bookmarks

(The fav[orite]icon is named from Microsoft's practice of calling a browser bookmark a favorite, begun as part of an effort to dominate use of the 'Net, in part by controlling the vernacular; and the favicon was introduced as something first supported by MSIE.)

Some browsers look for a favicon as a file named favicon.ico (and encoded in the Windows .ICO format) in the basis directory or in the the highest directory of a domain. Some look for it as specified for a page by a tag of form

<link rel="icon" href="imageURL" type="image/mimeImageSubtype" />

such as

<link rel="icon" href="http://www.oeconomist.com/favicon.png" type="image/png" />

while others look for it as specified for a page by a tag of form

<link rel="shortcut icon" href="imageURL" type="image/mimeImageSubtype" />

such as

<link rel="shortcut icon" href="http://www.oeconomist.com/favicon.png" type="image/png" />

A reasonable response is to include both tags in each webpage and, where possible, put a favicon.ico in the highest directory of the domain. Putting a favicon.ico in every remaining directory (even as a symbolic link to the image in the main directory) may not be worth the effort.

Typically, a favicon should be 16×16. The .ICO format allows a website to deliver a set of images in different resolutions, from which a browser might choose one most suitable to whatever it is doing, but such files are larger, and browsers won't necessarily make good use of alternate sizes.

Apple Touch Icons

Apple Touch icons are graphics for the iPod, iPhone, iPad, and similar products to use in creäting virtual buttons linked to websites.

In the absence of a specifying tag, the highest directory of the domain is searched for a .PNG with one of these names:

1. apple-touch-icon-57x57-precomposed.png
2. apple-touch-icon-57x57.png
3. apple-touch-icon-precomposed.png
4. apple-touch-icon.png

and the first if any found is used. (Adding -precomposed to the name asks software not to tweak the image.)

Originally, the Apple Touch icon was to be 57×57. Now, for higher resolution iPods and iPhones, and for iPads, one is urged to also supply 114×114 images (for higher resolution iPods and iPhones) and 72×72 images (for iPads). And, since this entry was first posted, there is a further standard size of 144×144; I am editting this series accordingly.

The original tag for specifying an Apple Touch icon was of form

<link rel="apple-touch-icon" href="imageURL" />

or (again using -precomposed)

<link rel="apple-touch-icon-precomposed" href="imageURL" />

typically

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

In order to support icons of different resolutions, a sizes attribute was introduced. its values are of form

widthxheight

as in

<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />

(In the absence of this attribute, an icon is presumed to have a 57×57 resolution.) Multiple resolutions are supported by multiple tags (with associated images).

Reasonable webdesign will employ a distinct image and distinct tag for each resolution supported by this class of devices,

<link rel="apple-touch-icon" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png" />

and perhaps for whatever seems to be coming down the pike. Given that one is using these tags, I don't think that there is a particular need to have a fall-back image in the highest-level directory.

Site Thumbnail Images

Site thumbnail images are used when some other websites, such as Facebook, link to the site with a thumbnail. In the absence of a specifying tag, some sites will try to find a suitable image, but may fail, or may choose one that the site owner would prefer not be used in such manner.

Some sites look for a tag of form

<link rel="image_src" href="imageURL" type="image/mimeImageSubtype" />

such as

<link rel="image_src" href="http://www.oeconomist.com/blogs/daniel/thumbnail_graphic.png" type="image/png" />

Others look for a tag of form

<meta property="og:image" content="imageURL" />

such as

<meta property="og:image" content="http://www.oeconomist.com/blogs/daniel/thumbnail_graphic.png" />

Naturally, I recommend that both tags be used.

For Facebook, images should be in the PNG format, in JPEG FIF, or in GIF; and be at least 50×50, with an aspect ratio no greater than 3-to-1. I don't know what might obtain elsewhere.

The same image file as is used for an Apple Touch icon might be quite suitable as the site thumbnail image.

Next: Working Code and How to Use It

Comments