HyperText Log:
The act of creating a favicon is exporting the same image over and over and expecting different results.
After spending over a month making some pixel art, I felt it was time to get back to working on my website. During this process, I noticed something that caught my eye within DevTools — the network tab to be exact.
| Name | Type | Size |
|---|---|---|
| favicon.ico | x-icon | 7.5 KB |
| base.page.css | stylesheet | 3.5 KB |
| modernizr.js | script | 2.9 KB |
| … | … | … |
While the site is still in progress, the favicon currently is the largest file on it. Now that will change once I add some fonts, images, etc., yet it was large enough for me to make a mental note… mostly because the same image I used for the favicon is about 85% smaller in file size.
Enter the weekend, rather than focusing on web typography next, I figured I could optimize the favicon in the evening — no big deal.
- Narrator voice:
- He did not.
In this day and age browsers tend to support multiple file formats for a favicon but in the dark days of web development if you wanted your website to stand out in a list of bookmarks, you had to have a favicon and it had to be in the mysterious .ico file format — good luck creating that with your pirated copy of Adobe Photoshop 7.
Generally to create a favicon back in the day you would use a random application you found via ask jeeves or just some random website. Nowadays… well some things don’t change. I’ve normally resort to using https://realfavicongenerator.net to generate the whole mess[1] of favicons needed, what concerned me was the fact I only had one file — a favicon.ico.
Down the Rabbit Hole.
So I go to the RFG(real favicon generator) website, generate my icons from an optimized .png and the favicon.ico is still the same size. This can’t be right, I don’t have a PhD in computer science nor have I read any specification on favicons up to this point, but I felt that something was off. Clearly at some point I generated a favicon.ico by some other website, because normally when I use the RFG I normally generate all the files needed, not just a single favicon.ico — but both the favicon.ico from RFG and some other random site are the same file size which I thought was a little high.
Launch FileOptimizer drag the icons on to it, Click on optimize and all the files have been optimized with the exception of the .svg and .ico files. For the .svg file, svgo handles that issue just fine which leaves me back to the original problem.
After spending some time trying to research how to optimize a .ico file — usually the articles recommended the following: 1) Make sure it exists. 2) K.I.S.S. 3) Enable GZIP. 4) Export .png & .svg icons as well. — At this point since I’m still in the process of development, the recommendations really didn’t help, however I did find a command line tool called png2ico. I ran png2ico and generated a 16 x 16favicon.ico that was 1.37kb! — Boom! Done! … I wish.
16 x 16 would work if this was still the 90's.
All modern desktop browsers will request a favicon [2], regardless if you reference a favicon in your html. It’s possible that this was the reason why I only had the favicon.ico generated at this point and I must have planned to go back to the favicons later. Now that we have Retina and other high-density displays, a retina favicon[3] would be 32 x 32 — I could just generate a new favicon at 32 x 32 and trust the browser will downscale it always… but I’ve worked on the web for a long time, so what is trust? — I mean the whole reason I’m writing this is because I clearly didn’t trust the tool I’ve used for multiple years in the past. I’ve gone this far, I want to at least try to be proper about it, so I generate a favicon.ico with both the 16 x 16 & 32 x 32.
The favicon with both sizes is still smaller than 7.5KB, so Yay? — No. Remember when I stated earlier than I hadn’t read any specification on favicons[4], well turns out there’s an interesting example where they show the use of a .ico file with the size of 48 x 48. It seems Microsoft recommends[5] a 48 x 48 pixel icon when for the site icon when used in Windows 7 taskbar and the New Tab page in Internet Explorer 9 — this changed for Windows 8 for IE10 which resulted in additional meta tags[6] and then a browserconfig.xml file [7] later for IE11 … [sigh]. So I run png2ico with the recommended icon dimensions of 16 x 16, 32 x 32 & 48 x 48 and the result is 7.5KB. — [Screams Internally] I shouldn’t be a surprise that RFG already handled generating a favicon.ico that already has the recommdended favicon.ico sizes and I could of saved myself a lot of time had I re-read the article[8] that the creator of RFG wrote for CSS-Tricks on the topic.
IE‽ It's 2019, Does a favicon.ico really matter?
Yes – All modern desktop browsers (except SeaMonkey[9]) will request a favicon.ico by default.For example, having DevTools open in Chrome will show a network request for a favicon.ico even if you don’t have it referenced in the html, however if you happen to reference other formats & sizes for a favicon such as a 32 x 32.png you may notice that a request for a favicon.ico may not appear and instead Chrome might request that png instead. The rules which browsers tend to handle which favicon file to load varies[10] and in some cases they are simply not logical.
So you might be thinking that modern browsers will only request a favicon.ico if no other favicons are present so what about just including a 16 x 16favicon.ico file for IE and let modern browsers request the .png files instead? Good news is that IE11 actually supports .png favicons, the bad news is actually Safari. Safari[11] will ALWAYS use an .ico file regardless of the size, so including a 16 x 16favicon.ico would actually be a bad idea.
Moral of the story? Just use https://realfavicongenerator.net and use an optimized image and play with the compression settings. Then optimize the output files in something like FileOptimizer — which turns out does support .ico files, in my case the file was already optimized, oof. If the svg file gets skipped, svgo has your back. If you really want to go all out and you want to support Safari Reading List sidebar in HiDPI/Retina screens[12] you’re going to have use a different site[13] that generates a favicon at 64 x 64 but you’re probably better off just doing it yourself with a command line tool that can let you put as many different sizes as you want because there will probably be some sort of limitation depending on what website you end up using… and don’t forget to enable gzip[14] once it’s live, set a small cache rule[15] at first, because clearing favicon cache is not something you want to experience[16].
Many thanks to Emily Egan for reviewing and providing feedback on this post. I appreciate her patiently waiting over a year for me to send her this draft.