Blogger: Creating a favicon

What IS a favicon?

Ever notice that when you visit or bookmark my page, you see my avatar instead?

That is what they call a favicon.

Basically, when anyone bookmarks or visits my page, instead of seeing this Blogger favicon…

…..they see this!

CREATE IT

You basically need to create a 16 x 16 pixeled image of what you want to show up as your favicon.

Here’s mine in actual pixels:

I know it’s small. It’s why you have to pick a picture that is easily recognizable even if it’s small, and/or create a clear icon that represents you (really, your blog or website).

UPLOAD IT

But before you link to it, you have to upload it somewhere. When I say upload, I mean you have to put it on the web on a set URL/Web Address where anyone who goes into your website, can access that image each and every time someone visits your page.

For example: http://www.blogger.com/yourblog/favicon.png

(I suggest saving it in .gif or .png for the sharpest resolutions. JPEG (.jpg) is not the clearest of all the image formats)

LINK TO IT

After you have your little favicon created and uploaded to the web to be accessed by browsers, you have to link to it.

In Blogger (the platform I use to do all of this, you can head into Layout > Edit HTML and click on Expand Widgets

Just before the end of your tag (do a CTRL + F to search for in the code)

Insert this piece of code, substituting in the URL for where you want the browsers to find your favicon.

< link href=”http://fabbroke.wpengine.com/FBicon.png” rel=”‘icon’/”>

(Move the < next to the link when you do the code)

And now you’re done. Your website should update to show your favicon instead of Blogger and everything should be peachy keen.

You don’t have to only do this in Blogger, it can be done on ANY website or blog that uses HTML.

(Don’t forget to save your template).