Pinterest Stumbleupon Whatsapp
Ads by Google

make-favicon-icoYou’d be amazed at some of the simple things that people can’t do computer / internet-wise. They can install Linux on their computers or set up a webcam security system but when it comes to simple basic things, their minds go completely blank!

So I’ve decided to go “back to basics” for a while, go through my Gmail archive, look at some of the email requests that I have received, and show Make Use Of readers some of the simple basic stuff.

One of the emails I get the most from people is how to create a “favicon” for their blog or website. In case you don’t know what a favicon is, it’s the little logo next to the website address in the browser. Make Use Of has one.

create-a-faviconIf you have a blog or website then creating a favicon is a very good idea. For a start, if someone has your site bookmarked in their browser then your favicon will also show in their bookmark list. This makes your link stand out from all the links that don’t have favicons. Secondly, a favicon brands your site and gives it that extra professional look.

To give you an idea of how important a favicon is, just look at all the fuss that was made when Google changed their favicon! Some people can attach a lot of importance to what they see in their browser bookmarks and URL bar.

So here is your easy 3 step guide to making your own favicon. Hopefully without all the controversy that Google managed to stir up with theirs! You can only do this if you have your own self-hosted domain.

Ads by Google

1. Decide what you want your favicon to be

This can be the hardest part. For big blogs like Make Use Of, it can be the easiest part if there is a logo which can be easily adapted. But if you don’t have a readily available logo to use then you will have to give some thought as to what you want your favicon to be.

For my blog, I used the initials of my blog title- BTT. Before that, I had a Scottish flag and before that a Star Trek logo. Try to find something that represents you, that says something about you or your blog. Try to get something that you are not going to change either. You want something that people are going to remember. Then again, I’m not in a position to say that to you, considering how many times I changed mine! :-)

2. Create the favicon

how-to-make-faviconOK, once you have your logo, now it’s time to shrink it down to favicon size. First of all though, a little trick. If you decide to use letters for your favicon like I did, you can make it by typing the letters onto a MS Word document then when you have them the way you want them, make a screenshot of the letters using a screenshot app such as SnagIt or IrfanView IrfanView Blows Windows Viewer Out of the Water IrfanView Blows Windows Viewer Out of the Water Read More .

To create your favicon, there are LOTS of favicon creators on the internet. We have profiled quite a few in the Directory here, here, here and here. The one I have always used and which has never let me down is this one.

As the site says, just upload your image to the site and it will create a smaller 16×16 version for you. This is done in seconds and you should make sure that the smaller version has an “.ico” file format.

3. Upload the favicon to your blog / website

OK, we’re nearly there. You have your newly made favicon in your computer and now you need to get it uploaded to your domain so that when people come visiting to your site, they’ll see your logo sitting on their browser URL bar. So how do you get it there? Very easy.

First of all, the favicon’s location in your site has to be at http://yoursite.com/favicon.ico. So upload the favicon to your site using a FTP program or perhaps your hosting company offers their own uploading program? Just make sure that the favicon sits in the main root directory at http://yoursite.com/favicon.ico and at no other location, otherwise it won’t appear when it needs to.

Next, go to the template of your blog and at the beginning of the template, you’ll see a piece of code that says <HEAD>. Immediately after <HEAD>, enter the following :

Then save the whole lot.

Now one of two things will happen – your favicon will either appear instantly or it may take some time to appear. With my Scottish flag one, it appeared instantly and with my “BTT” one, it took 3 or 4 days to show up!! It’s even worse with Internet Explorer. So after you’ve done the above, and you don’t see anything, don’t start to get angry and think “I’ve wasted all that time for nothing!”. It WILL work eventually – it may just take a day or two for the favicon code to kick in properly. But when it does, it will work 24/7.

So does anyone have any strange and unique favicons that they would like to tell us about? What do you have sitting up on the URL bar when net surfers come to visit?

  1. Chris
    July 11, 2009 at 6:27 pm

    I'm wondering if this'll support multiple blogs?

  2. neeraj
    July 11, 2009 at 10:15 am

    I am also hosted on blogger. Are there any java-script to add favicon on blogger blogs?

  3. Falesch
    December 12, 2008 at 9:13 pm

    WordPress.com just began to offer favicons. They call it "blavatar" ( see http://support.wordpress.com/settings/2/ )

    • Anukul
      December 18, 2008 at 8:11 am

      I was wondering if I would ever be able to have a Favicon on my WordPress.com blog, Until I read the last comment by you.
      Thanks so much Falesch for your direction.

      Cheers!

  4. Time Tracker
    October 28, 2008 at 9:16 am

    I think there's no blogger or WP mentioned as a favicon is a universal self hosted blog option.

  5. Chris JONES
    October 28, 2008 at 1:05 am

    Yeah, ditto as I am on blogspot too. Actually I would to know why no reference was made to this platform or WordPress - seems rather gratuitous otherwise.

    • Aibek
      October 29, 2008 at 6:58 am

      It doesn't mattter, the above tips will work both on Blogger and WordPress, or any other platform for that matter.

      • Mark O'Neill
        October 29, 2008 at 8:37 am

        No it won't. Blogger and WordPress have their own favicons and they won't allow you to override them with your own. To have your own favicon, you need to have your own self-hosted paid domain.

  6. Jimmy Rogers
    October 27, 2008 at 2:00 pm

    Sadly, I use blogspot to host, so I can't change mine :(

Leave a Reply

Your email address will not be published. Required fields are marked *