Favicons
Favicons are a small distracting job in any web code.
Why do I know about favicons?
Either you know, or have seen the message. Every heavyweight browser sends a request for a favicon, so a server will log,
Not Found: /favicon.ico
Not having a favicon is a failed request, which can slow servers.
Recommendations
Upfront,
If your image scales well, you only need a couple of icons, say 16x16 and 32x32. Check large, and add a 192x192 image if necessary.
Images that don’t scale well (usually bold curves), may need more steps, like 48 and 64 images
Keep your main favicon under 20k
If you can access your server, make an ICO from the images, name it ‘favicon.ico’ and drop at server root
If you can’t access the server, use a link in your base templates
Use a link to handle large sizes, it will keep your main favicon size down.
If you have concern for scaling, particularly on mobile devices that use large versions of favicons, control them with media‐dependant links
Right, the long story.
How do I make a favicon?
Plenty of online image conversion tools. Personally, I dislike them. Why not use GIMP or PhotoShop?
What format?
Nowadays, nearly any common image format is supported. The interesting ones,
‘ico’
Microsoft’s original format. ICO format is a way of gathering several images of different sizes. Supported on every browser that uses favicons
‘png’
Unless you must support Firefox < 1.0 and Safari < 4.0
‘svg’
Technically, by far the best format for favicons. But only supported in Firefox and Chrome 80 (2019)
What colour?
If you support before Windows XP, stick to 8 bit and 16 colours. After that, anything your operating system can make, a browser can display.
What sizes?
Standard favicon size for browser tabs is 16×16.
This is a tiny size to create a graphic image in. You will see many ingenious solutions. Besides design, the small size has another problem. Favicons can be used in many places, particularly in menus listing websites. Here are some,
32x32
Taskbars, newer browser tabs
72x72
iPad home screen
96x96
Desktop shortcuts
192×192
Google Developer recommendation.
196x196
Chrome for Android home screen
When scaled up, A 16x16 favicon can look bad. So the current recommendation is to provide at least two favicons.
The different sizes of favicon are handled differently depending on the image format,
‘ico’
Can contain the different size icons within one file.
‘png’
Requires HTML links to differentiate size (for instructions, look down a bit)
‘svg’
The image will likely look good at any scale. This is why SVG is technically superior. That said, an SVG favicon solution needs backup. SVG favicons are poorly supported.
Despite advice on the web, you don’t need lots of sizes, it depends how your image scales. And a bigger favicon is a bigger page load. 20kB max is sensible. Wikipedia’s three image ICO is 2.7kB. Flicker’s four image ICO is 32kB. You may want to look at ‘What do other sites do?’ further down.
Transparency
‘ico’ and ‘png’ can handle transparency. This is how you make an icon that is not a square of colour.
Tips for creation
In practice, designers make a big icon first, then scale it down and adjust the result to fix scale and alias issues
Whatever tool you use, an SVG graphic original will scale down better
GIMP is the only editor that can create an ICO. Otherwise, use an online tool
If using GIMP to make an ICO, you need to create all the scaled down images and save as PNG. Compress the PNG as much as possible, reduce bits, etc. If you are using GIMP to create the individual images, GIMP does a good job on default
GIMP handles ICO assembly by holding each image on a seperate layer, then exporting as ICO
Where do I put the file?
Originally, and still in many frameworks and web software, the favicon was placed in the web root. Browsers automatically look there.
Nowadays, you can put the favicon wherever you like in the server resource structure, and use a page header to refer to it. The setup I’ve seen here and there is to use webroot for a basic favicon, and links to refer to special favicons (usually large favicons) for, for example, Apple touch.
Placing is webroot is not too explicit, if you think about it. It could be regarded as bad programming. On the other hand, having to add a link to every single page on your site is not good programming either.
If web root placement is not the option you prefer, you need to provide a URL, or HTML link.
Where and how do I link?
If you don’t deliver from server root, and your site delivers webpages, you need favicon links on every page. It’s annoying, but you do. If you have a base template, put the link there.
<link rel="shortcut icon" type="image/png" sizes="space-separated list of icon dimensions" href="{% static 'images/favicon.png' %}"/>
or,
<link rel="shortcut icon" type="image/x-icon" sizes="space-separated list of icon dimensions" href="{% static 'images/favicon.ico' %}"/>
This is a ‘rel’ link, like other links that define resources for a page, such as CSS.
‘shortcut’ is for ancient browsers. Nowadays, ‘icon’ will do as well.
‘sizes’ is an optional attribute
Maybe your browser/operating system/server can guess at types, but you should state a MIME type in case it can not (e.g. IE < 11),
'ico' = 'image/x-icon' (> IE 9) 'png' = 'image/png' 'svg' = 'image/svg'Several ‘icon’ links can be placed in one page. Browsers have various ways of choosing between them
Apple have a special link for displaying favicons on homepages
What do other sites do?
Slightly Django‐bias, but representative,
Django documentation 32x32 icon at webroot
https://pypi.org// 32x30 ICO linked to /static/images
https://en.wikipedia.org 48x48 ICO linked to /static, but also media‐dependant and apple‐touch queries for large icons
Flickr 64x64 ICO at webroot (uses SVG icons elsewhere)
Twitter 32x32 ICO linked on a seperate server, 192x192 linked alternative
Ebay 16x16 ICO at webroot, and the same on a link (uses SVG elsewhere)
BBC 32x32 ICO at webroot
Note that ICOs contain several images. The BBC ICO contains two images, a squashed 16x16 image, and a spaced 32x32 image. The Wikipedia ICO contains 16, 32, 48. Flicker use a spot logo, which is striking but scales badly, probably why the ICO contains four images at 16, 32, 48 and 64.
I think you get the drift,
Major sites do not use SVG for favicons, even if the site does
ICO format is still popular
If an image scales ok, there is no need for multiple versions (despite the endless discussion on web posts).
Favicons are still, even by major sites, simply placed at webroot.
Major sites use the ability to target links using media queries to guarantee which favicon is delivered (browsers are asked to follow a choice, not make their own choices).
Animated icons
You want to impress clients and drive down site view figures? Look up how to create an animated GIF.
References
Wikipedia,