Favicon
A trendy website needs to have a "favicon", short for short for favorite icon, present. It used to be something one would place as a small and simple file called favicon.ico in the websites root. Most major web browsers will still try to look for a favicon.ico file in your websites root after looking up your domain name, and your website should still have one placed there. However, several other formats and standards have emerged over the years and favicon.ico, while still valid, is sort-of deprecated.
Moderm web browsers use a "favorite icon" in various ways. They show them on web browser tabs, next to page bookmarks, in address bar drop down lists and some use them in other ways. Some search engines use them in their search results. Having a flashy yet easily identifiable one is generally a good idea. Ensuring that modern devices get a high quality favorite icon they know what to do with is equally important. Read on, because the "standards" are a bit .. confusing.
HOWTO Create A Good Old favicon.ico Shortcut Icon[edit]
 |
Note: Modern web browsers are generally capable of understanding PNG, GIF, JPEG and even SVG images named favicon.ico. Some support files that are 16×16, 32×32, 48×48 and 64×64 with 8-bit, 24-bit, or 32-bit. You can put a 64x64 JPEG image in /favicon.ico and most modern web browsers will accept and use it - but don't expect all browsers to understand and use a JPEG favicon.ico. A 16x16 "win icon" .ico file is what the ancient "standard" proclaims.
|
You need to have netpbm installed to use this guide.
- Create a
16x16image using GIMP or similar image editor. - Save your icon file as a
.jpg,.pnmor.pngand follow one of the steps below in a terminal:convert yourfile.jpg favicon.icoppmtowinicon -output favicon.ico yourdrawing.pnmif your image is .pnmjpegtopnm yourfile.jpg | ppmtowinicon -output favicon.icoif your image is .jpgpngtopnm yourfile.png | ppmtowinicon -output favicon.icoif your image is .png
Place the image in the / root of your web server. You can place it elsewhere by including a line in a websites <head></head> section. It could look like:
<link rel="shortcut icon" href="/path/favicon.ico"/>
However, this will not matter all that much: Some web browsers will look at your web pages HTML before they try to fetch the favicon.ico but others will go for /favicon.ico in your websites root before they load the HTML page. You will see 404 errors for /favicon.ico if you do not have one there.
Modern Favorite Icons[edit]
Higher resolution favorite icons can be made available in two ways. The first is to include a link rel="icon" line with a type and href in a websites <head></head> section.
<link rel="icon" type="image/png" href="https://example.com/image.png" />
or
<link rel="icon" type="image/jpeg" href="https://example.com/image.jpg" />
Note that the JPEG mime type is image/jpeg, not image/jpg (there is no such mime type) - though most software will understand image/jpg anyway..
Using images up to 64×64 is perfectly safe when they are linked by a link rel="icon" line.
You can include multiple link rel="icon" lines, and that would be the right thing to do given the HTML5 standard, but there is also a good reason why you shouldn't. Some web browsers will use the icon that is listed first (Chrome/Chromium), others will use the last listed icon (Firefox/Safari).
The HTML5 specification says that you can list multiple files and declare a list of sizes=, separated by a whitespace, each of the images should be used for. This is an option worth considering even though there are some browsers that won't get it. Here's an example:
<link rel="icon" type="image/png" href="/favicon-32.png" sizes="16x16 32x32" />
<link rel="icon" type="image/png" href="/favicon-64.png" sizes="48x48 64x64 " />
<link rel="icon" type="image/png" href="/favicon-256.png" sizes="128x128 256x256" />
The above method is supposedly the standard, so it is possible that all the major browsers will behave accordingly at some point in the future. They don't as of April 2021.
The "apple-touch-icon"[edit]
The American fruit company Apple Inc started doing their own thing starting with iOS version 1.1.3. Their .. standard(?) is sort-of to have a link rel="apple-touch-icon" in the websites <head></head> section pointing to a 152x152 PNG file preferably with round corners. That would look like:
<link rel="apple-touch-icon" href="https://example.com/apple-touch-icon.png">
Some Android tablets will accept apple-touch-icon icons up to 192x192. Modern iPads will accept 180x180.
iOS versions prior to iOS7 would add a reflective shine and a drop shadow effect to all the "apple-touch-icon" icons. Thus, we got another fine Apple standard for icons called apple-touch-icon-precomposed where the -precomposed part signals that the icon shouldn't have those "effects" added to it. The result of this is that you may likely observe various software try to fetch the following files from your web servers root directory even if you have no link rel="apple-touch-icon" or mention of it in your websites header:
/apple-touch-icon.png
/apple-touch-icon-precomposed.png
/apple-touch-icon-120x120.png
/apple-touch-icon-120x120-precomposed.png
/apple-touch-icon-152x152.png
/apple-touch-icon-152x152-precomposed.png
You should create these files even if you choose to not have a <link rel="apple-touch-icon" line in your websites <head></head> section and you might as well have a <link rel="apple-touch-icon" line pointing to a /apple-touch-icon.png given that one should exist there anyway.
Other "apple-touch-icon" Worth Considering[edit]
A bot called got, identifying itself as "got (https://github.com/sindresorhus/got)", requests these files on a regular basis:
/apple-touch-icon-57x57-precomposed.png
/apple-touch-icon-72x72-precomposed.png
/apple-touch-icon-76x76-precomposed.png
/apple-touch-icon-114x114-precomposed.png
/apple-touch-icon-120x120-precomposed.png
/apple-touch-icon-144x144-precomposed.png
/apple-touch-icon-152x152-precomposed.png
/apple-touch-icon-176x176-precomposed.png
/apple-touch-icon-180x180-precomposed.png
/apple-touch-icon.png
/apple-touch-icon-precomposed.png
/favicon.ico
That particular bot begun requesting those files before we had made any "apple-touch-icon" file available. We have not seen anything else randomly requests "apple-touch-icon" files in most of those sizes.
We have seen web browser software ask for 120x120 and 152x152, we have not seen legitimate web browser software randomly ask for 57x57, 72x72, 114x114, 144x144, 176x176 or 180x180. You may want to keep an eye out for other software randomly requesting those files and make "apple-touch-icon" icon files available in them if it becomes a regular occurrence. We have not (yet) done so since the "got" bot appears to be the only one asking for those files.
Our Humble Recommendation[edit]
1) Create a good old favicon.ico file and place it in your web servers root.
2) Create a high quality 256x256 large favorite icon. You could do a 512x512 or 1024x1024 in your image editor and down-scale that. Call your 256x256 icon favicon-256.png
3) Convert your 256x256 favicon to the following sizes:
- 120x120, PNG, named
apple-touch-icon-120x120.pngandapple-touch-icon-120x120-precomposed.png - 152x152, PNG, named
apple-touch-icon.png,apple-touch-icon-precomposed.png, apple-touch-icon-152x152.png andapple-touch-icon-152x152-precomposed.png
- 256x256, PNG, named
favicon-256x256.png - 64x64, PNG, named
favicon-64x64.png - 32x32, PNG, named
favicon-32x32.png - 16x16, Windows ICO format, named
favicon.ico
Place all the files in your web servers root directory. You don't strictly need to place the ones you named favicon-* there, but you should place the "apple-touch-icon" files and the "favicon.ico" there because many browsers, bots and other software will request them there regardless of what you do or don't do in your sites <head></head> section. Next, add this to your websites <head></head> section:
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="16x16 32x32" />
<link rel="icon" type="image/png" href="/favicon-64x64.png" sizes="48x48 64x64 " />
<link rel="icon" type="image/png" href="/favicon-256x256.png" sizes="128x128 256x256" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
Notice that we intentionally omit a old-school <link rel="shortcut icon" href="/favicon.ico"/> line. This is to discourage the use of the 16x16 ICO file. It should exists so software requesting it can have it, but there's no need to encourage anyone to get it by pointing at it.
The following handy little snippet assumes you have
- pngquant
- ImageMagick (provides
convert)
and an icon file called favicon-512x512.png
# Assuming you have a favicon-512x512.png
convert favicon-512x512.png -resize ${s}x${s} favicon.ico
for s in 256 64 32 ; do
convert favicon-512x512.png -resize ${s}x${s} favicon-${s}x${s}.png
pngquant --force favicon-${s}x${s}.png -o favicon-${s}x${s}.png
done
for s in 152 120 ; do
convert favicon-512x512.png -resize ${s}x${s} apple-touch-icon-${s}x${s}.png
pngquant --force apple-touch-icon-${s}x${s}.png -o apple-touch-icon-${s}x${s}.png
done
cp apple-touch-icon-152x152.png apple-touch-icon-152x152-precomposed.png
cp apple-touch-icon-152x152.png apple-touch-icon.png
cp apple-touch-icon-152x152.png apple-touch-icon-precomposed.png
cp apple-touch-icon-120x120.png apple-touch-icon-120x120-precomposed.png
Enable comment auto-refresher