How to create and add your own Favicon - the easy way

I just want to share some tips and things I learned while doing some updating on my  blog site.   I'm done doing some changes on my template and now I'm into creating my own Favicon.

What is Favicon?
Maybe, for some of us, it sounds like a brand of a fabric conditioner (lol...) but it isn't. According to Wikipedia, a Favicon (short for favorite icon), also known as short icon, web site icon, URL icon and bookmark icon, is a file containing 1 or more small icons, most commonly a 16x16 pixels, associated with a particular web site or web page. In simpler explanation, it is that cute little icon that appear next to our web address. 
favicon, default, Blogger, tipsIf you're using Blogger,  you  will notice the icon B on the upper left side of your blog site, that's the favicon for Blogger. You can also see this every time you open a new tab or in bookmarks. 

Why do I need to change the default Icon?
If you're happy with your present icon, then it's ok to stick with it, but if you want to be have a touch of your own for your blog, then you can create one. If you have a unique icon , it is more noticeable with your site visitors (yes, it's a small icon but I happen to notice it on one blog that I recently read) , that's the reason why I changed my default icon. 

How to create your own Favicon
Creating your own favicon can be simple and easy. First, you have to have an image that will serve as your own icon. You can use your own personal photos or if you know to how to draw an image, you may use editing software like Paint. It can be just a simple letter initial (like in blogger) or if you want a more elaborate design and don't know know how to use the software, you can ask a friend to do it for you or buy online. The image can be saved as jpeg, png (I prefer this one) or gif format.

Now you have your image,  you need to convert it to an .ico file format to make it work. You have to upload your file to favicon generators website like
free favicon hosting, tips

It's so easy to use:

  • choose your image file
  • select sharpen level (levels 1-3 or no sharpen at all)
  • then click upload now

favicon generator, icon, direct link, tips
  • After the image had been successfully generated to .ico format, you can download  and save your favicon.ico file your reference of simply copy and paste the HMTL the link to your web page.
How to add your Favicon to your site
layout, edit

I first tried changing my favicon the shorter way, configuring it in the layout, but it didn't work out. The changes was only reflected in the layout and you won't see it even if you view the blog. 

design, edit html
  1. Log in to your Blogger account.
  2. Click Design, under Template click edit HTML.
  3. Click proceed, then place the generated link you copied from the favicon generators
  4. Save template and close.

public html, homepage

     5. View blog.
new favicon

      6. Now, you have a new favicon.

By following these simple steps, creating and incorporating your own favicon  to your Blogger is a breeze. If you like this post, please care to share it.



  1. postingan yang bagus tentang how to create and add your own favicon

  2. blog hopping :)

    thanks for sharing this informative post. i don't have a clue on how to create or assign a favicon and after reading your post, now i do :)

    keep posting and you have a very clean and cute template btw.

    ria c
    It's My Party
    Home Is Where The Heart Is
    Red Lips and Pinky Toes
    The Travel Bug

  3. Thanks for sharing this great tutorial! I've linked to it in my post about blog re-redesigning (don't want to promote myself, but lots of bloggers seem to want to see the post they've been linked to, so here's the link: xo Anja


I love to hear what's on your mind, please don't forget to leave a message