Create your own BLOG Favicon

create your own blog favico Create your own BLOG Favicon

What is a FAVICON? Favicon is a mini icon graphic that you see on the top of your browser or next to the Navigation bar on the left side. Favicon also being use in your live bookmark or in your easy live web feed folder. For me, a blog that doesn’t have favicon look like a naked blog. Favicon also being well known as the blog identity.  To create a favicon wasn’t that really hard. It is so easy. Here i show you some quick way to create your own blog Favicon.

The first alterantive is, we need to have a graphic to be use for your Favicon. You can use photoshop to create the icon woth 32x32px size and save it in .png format. After that, we gonna convert and resize the png image into .ico file and make it smaller to fit the browser.

make your favicon Create your own BLOG Favicon

To convert the .png image file, I use It is one of my favourite online favicon maker. At the left bar, select import image and select the image file that you want to convert into ico file. There’s also several options for you to select. Just experiment with it to suit your own.

upload the favicon Create your own BLOG Favicon

After that, you can edit it (sometimes it do pixelated and you need to fix it manually). After that download the icon to your computer.

download the favicon Create your own BLOG Favicon

Then, host the favicon.ico file to your server or any image hosting. For example, im using here since it support to hosting .ico file. You also can host this file to your root folder. But for other bloggers that doesn’t have blog hosting (especially blogspot user) you can use anyway. All you have to do is upload the favicon file and then get the URLfor the favicon.

copy the favicon url Create your own BLOG Favicon

Now, lets insert the Favicon to your blog. For wordpress user (self-hosting only), open your current theme folder and select the header.php file.
Insert the following HTML tag inside the <head>...</head> section of your web page:
Now, copy the below code. Just replace the URL with your own Favicon.ico URL.
<link rel="shortcut icon" href="favicon.ico">

And paste it anywhere between the head tag. Save it and your done!

For blogspot user, go to Blogger dashboard and under the Template tab, go to “Edit HTML”. Near the top you will see a line like this:-


Copy and insert the following code below the line:-

<link href='URL of your icon file' rel='shortcut icon' type='image/'/>

Remember to type in the “URL of your icon file“.

Save the template. When you refresh your blog site, you should see your nice little Favicon next to the blog address.

favicon collections Create your own BLOG Favicon

If you are looking for more inspirations for your Favicon graphics, have listed several good looking favicon from all over the web. You can take a look on this 50 Remarkable Favicons
listed by SmashingMagazine.


  1. KNizam

    favicon ni walaupun kecik dan nampak macam tak penting tapi sebenarnya menarik kan. hehe

  2. syuxx

    bagi aku, favicon ni adalah identiti bagi sesebuah blog.
    walaupun dia tak secantik yg lain, but its make your blog RARE dude! haha

  3. rosh

    where to put the on the ?

  4. syuxx

    umm, put what?

  5. rosh

    im sorry the link ref code?
    and why is it not workin on me?

    i mean it does not appear syuxx

  6. syuxx

    umm, you mean for the blogspot one?
    can you give me your blog URL? let me see first.

    or just follow this simple tutorial from jackbook:

  7. titan

    hoho..its nice tutorial. :)

  8. Viagra

    A SUPPORTED BY THE DEVELOPER TOOLS? It was interesting. You seem very knowledgeable in ypour field.


  9. Summer Camps

    Maybe you could edit the webpage subject Create your own BLOG Favicon to more catching for your subject you create. I enjoyed the blog post withal.

  10. I relish, cause I found just what I was looking for. You’ve ended my 4 day long hunt! God Bless you man. Have a great day. Bye

Leave a Reply