Favicons are very small, so small that, most of us don’t even realize they are present. Small they might be but not unimportant, as I recently learned. The favicons do subtly identify a website, without us even knowing (we are accustomed to recognize Facebook tab using their icon). I really didn’t give much thought to favicons before this, they were always there and I was ok. When I started this blog, the first thing I noticed was the fact that the space for my favicon in tab was blank. So, I began to think about what my favicon should be? May be a small image of myself? Or, should I ask one of my designer colleagues to design it for me. I was surrounded by quite dilemma on this topic for quite some time after release of this blog.

Lost and found!

Well, not quite "lost" per say, but I found my favicon, all thanks to stackoverflow and Gravatar. While I was asking questions and giving answers on stackoverflow, I noticed that stackoverflow uses my "identicon" generated by Gravatar. Wow! This instantly clicked me, my identicon should me my favicon. It is a personal blog, and what is better favicon than something that identifies me?

Putting identicon up for favicon seemed to be much better idea than my initial idea of putting up small image of myself. At a 16X16 pixel my image would have lost a lot or details, so much so that it wouldn’t have been recognizable that it actually was an image of me. But this identicon can scale quite well to small sizes.

Here you go:

Decisions

So, here we go, again time for decisions. Initially I thought of linking to gravatar directly, but then decided against it. Why make a network call to external service just for a favicon? So, I downloaded the image and copied to blog’s folder, and linked to it. Then again another question arises, why make a network call at all for a small favicon? It’s time for a quick Google search for base64 favicons. And yes it is possible (hurray!), so I hastily searched for an online tool to convert my identicon to base64. Well, it didn’t go as I initially dreamed of, the base64 data was larger than what I thought would be acceptable!

After juggling with different options for some more time, another ‘light bulb glowed on top of my head’. Why not try optimizing the png image? Yes!! Optimize the image it is. After optimizing the png file, the base64 was of acceptable size, 542 characters to be precise. So, here’s how my final favicon LINK tag looks like:

<link href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAANlBMVEWmQRj////PmYPCfGDlyL25akru29PFg2m/d1mrTSfr1cy8cFHoz8XJjHTw4NrVppP+/v3bsqHDFSemAAABCUlEQVR4Xl2T2w6DMAxD7bbcGWz//7PDouelk7IIHQfFFpFtF/GbWv7q+/D52pYdBdiW1GY4giiClz2Cya5wBHbJ9KZ1l5o9w22Vrlj3CKam6bNta1Xnt1DomV6bnQ1ScKGQIrGzQQqOwtIryQYpuDAYYR+gkwf+Sx+hkwf+i393CJ088P9w6SF08hD+maaTh/DPNJ08hP+QcDp5CElIOJ08dNpXaszhPPrsYS+pMQcbyXmlNOZgz/WVHEtKYw5z5S16NxhzCMpb+hbSmEOmg9kC/3SmxRYacwDzfZs8MMc1wE0e+Oca4CYP/HMvcJMH/o2C75888M+9CE4e+OdeBCcP/KMQnDzAKP7aMA2BcXeqCAAAAABJRU5ErkJggg==" rel="icon" type="image/png">

I must say that I’m pretty happy with the final result.

But it didn’t go that smooth

Finally After getting my favicon link tag ready inside the head of my html, I shoot up the browser to look the favicon, and lo! There my favicon placeholder is still blank! What’s going on? Did I do everything correct? Note that my default browser is Google Chrome, so, I opened up Firefox and saw that favicon is working well in Firefox!

Time to debug

First thing I did was to see whether favicons of other sites are working in chrome or not, they are. So, seems more like problem with my code. I tried linking to image url instead of embedded base64 data, still doesn’t work. Oh god, now I’m in bigger trouble. Another approach I removed everything inside the head tag. As soon as all css was gone I noticed some random characters appearing out of nowhere. Suddenly something that I read in web before getting started with Jekyll struck my mind, ‘BOM’! Yes, somewhere I remembered reading that Jekyll doesn’t work properly with BOM (Byte Order Marking). So, I put back everything into the head tag, and opened up the developer console. This time I got the exact problem, BOM was part of the HTML document, which caused chrome to move all the elements inside head into the body tag (not sure why it is implemented this way?).

As I’m using Visual Studio to manage source code of this blog. It was now time for some more Googling, “Remove BOM visual studio” and my dear Google came up with this stackoverflow question UTF-8 without BOM. Going through the choosen answer, I found my solution. I removed the BOM from my documents and all was well, chrome is now showing my favicon

So what are the steps to remove BOM in visual studio?

Here it is:

• Open the file you want to remove BOM from.
• Click on “FILE” menu, and select “Advanced Save Options…”
• “Advanced Save Options” dialog appears.
• From “Encoding” dropdown find and select “Unicode (UTF-8 without signature) - Codepage 650001”
• Click OK, and you are done!

Note that you’ll need to batch BOM change with some other change. Git doesn’t seem to recognize just change to BOM as a file change.