"I have a thing for favicons"
Granted, favicons are definitely not the most important thing in the (e)world !but I can’t help noticing when websites lack having a favicon.
And for sports I sometimes create favicon file suggestions for such sites - typically based on some prominent image element on the site that lends itself to being “converted” to a favicon, again typically – but not always – a (part of) a logo.
So if you’re reading this it’s likely because I’ve suggested such a favicon to you.
The “proper” way of including a favicon for one's site is to include a LINK tag for the icon in the page's header with a hyper-reference to the favicon file, e.g. the code used in my favicon suggestion pages is:
<link rel="shortcut icon" href="favicons/some-name_favicon.ico" type="image/x-icon" />
(Replace ‘some-name’ with the reference relevant to the page that led you here.)
On the other hand, if you look in the code for the present page you’ll find no such LINK tag, however you will possibly - at least after a while (or having visited the page several times)
- find that a favicon is shown for the page anyway! This is because in lack of a LINK tag for a favicon being present in the page header, all major browsers default to looking for a file called favicon.ico in the site root – and indeed I put one of my own favicon files there :-)
Note though that using this method of just placing a favicon.ico file in the site root is discouraged by the Internet governing body W3C because it allegedly violates some Web architecture principle(s), but the reality is that it - usually - works!... - provided that you have the ability to put the favicon file in the site root (which might not be the case in some webhosting situations). Also it has the advantage that you don’t have to include the above-mentioned LINK tag in every page in your site.
The LINK tag shown above is just an example: You’ll find more information about which coding each of the major browsers accepts – and a lot more about how favicons work – in the Wikipedia article on favicons. I haven’t checked whether all the other browser providers have anything to say on the subject, but for comparison you may find it interesting to see what Microsoft has to say about adding favicons to web pages - obviously only with the MSIE in mind.
(Incidentally, when just revisiting that article when writing this, I noticed that MS even suggests a ‘hack’ for creating ICO files from
BMP files by simple renaming the file – to .ico – in spite of the file header format then
clearly being incorrect! I haven’t checked yet, but this possibly only works with the Internet Explorer
browser that would then just accept the file as a BMP file (and process it accordingly) if it detects a .BMP file header in an otherwise named .ICO file.)
If you’re interested in the detailed coding of the favicon file I invite you to do your own study, because there are many! options for the coding and it’s outside the scope of this brief discussion to explain all, let alone even listing them. Suffice it to say that the favicon I’ve created is, unless I’ve told you any different in some direct communication, a single image element file with simple 24-coloured bitmap in the standard 16x16 size.
(The typical favicon file contains a single image element, but the file can contain several, in different sizes and colour schemes; I have seen files containing up to 10 different images! However, the practical purpose of having that many, or even more than one, is a little obscure - at least to me:-)
Different sizes of apply-touch-icons is an entirely different kettle of fish, but that is outside the scope of this short note on favicons.)
Anyway, if you wish to know more about how to code favicons you might want to start out with the same articles I read:
Reading that you'll quickly find that you also need to study e.g.:
since an ICO file simply wraps (the core of) one of more bitmaps also used in the BMP file (format).
Eventually, if you want to understand the coding in full depth (if that is even possible?), you probably need to look at the Microsoft Developer Network (that incidentally doesn't appear to have a favicon!?:-) articles on the subjects; a starting point could be: