Freckles in April: DIY Blog Design Part 10: Favicon

Thursday, June 28, 2012

DIY Blog Design Part 10: Favicon

You: What on earth is a favicon?

Me: Check it out-

Favicons are those bitty images up there. It's one of those fun little details that makes a custom blog design especially awesome.

As you can see, favicons are quite small (only 16x16 pixels) so you need to keep them pretty basic. Intricate details get lost in such a small area.

Here's Summer's favicon-

So little!

In theory, installation is easy.

You should only have to upload it through your layout section.

However, in my experience, that doesn't work consistently across browsers. I don't know why (Blogger bug? It's a fairly recent addition so maybe they haven't worked out all the kinks yet). A few places I've read say to just give it time but once I uploaded and then forgot about it for over a week and it never showed. So I also do this-

Go to your Dashboard > Template > Edit HTML. Click "Proceed" when you get the warning pop-up window.

Find the following code in the HTML of your blog template-


Directly below that code, paste in this code:

<link href='ImageURL' rel='shortcut icon' type='image/'/>

You're going to have to host your favicon somewhere (see here for how to host within Blogger) and then paste the image URL in where I've highlighted in blue.

Favicons can also be .png files, which means your favicon can be a fun (simple) shape! If you use a .png file, paste in this code instead:

<link href='ImageURL' rel='shortcut icon' type='image/png'/>

Save and you're done!


  1. Fantastic post.Never knew this, regards for letting me know. I your writing style really enjoying this website .
    hollywood venues

  2. Hmmm.... How long does it take for it to work?... I tried step-by-step and it didn't work..


Thanks for your comment!

Any trolls will be dragged into the trees and beaten soundly.

Related Posts Plugin for WordPress, Blogger...