FavIcons, Apple Touch Icons, and Site Thumbnail Images
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 are those images, typically tiny, associated with specific websites, in or beside URL fields on browser tabs and especially in menus of bookmarks
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
(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
while others look for it as specified for a page by a tag of form
<link rel="icon" href="http://www.oeconomist.com/favicon.png" type="image/png" />
<link rel="shortcut icon" href="imageURL
A reasonable response is to include both tags in each webpage and, where possible, put a
<link rel="shortcut icon" href="http://www.oeconomist.com/favicon.png" type="image/png" />
favicon.icoin the highest directory of the domain. Putting a
favicon.icoin every remaining directory (even as a symbolic link to the image in the main directory) may not be worth the effort.
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:
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
or (again using
<link rel="apple-touch-icon" href="imageURL
<link rel="apple-touch-icon-precomposed" href="imageURL
In order to support icons of different resolutions, a
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
sizesattribute was introduced. its values are of form
(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).
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
Reasonable webdesign will employ a distinct image and distinct tag for each resolution supported by this class of devices,
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.
<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" />
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
Others look for a tag of form
<link rel="image_src" href="http://www.oeconomist.com/blogs/daniel/thumbnail_graphic.png" type="image/png" />
<meta property="og:image" content="imageURL
Naturally, I recommend that both tags be used.
<meta property="og:image" content="http://www.oeconomist.com/blogs/daniel/thumbnail_graphic.png" />
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.