How to create a favicon

favicon.gifA favicon (short for “favorite icon”) is that small icon displayed on the browser URL bar, on the bookmark lists and, for certain browsers, on the navigation tabs. While a favicon will not drastically change your traffic it will certainly improve the look of your blog, adding a unique icon and making sure that readers are able to individuate your site inside bookmark lists easily. Below you will find a step by step guide to create a favicon.

1) General Guidelines

A favicon is nothing more than a 16 pixels by 16 pixels icon, and the file has a .ico extension. As you can imagine it is pretty difficult to put complex graphics in such a small frame. When designing your favicon, therefore, you should concentrate on simple images or letters. Make sure that the color of the favicon reflects the color of your website, so that readers will be able to associate the icon with the site.

2) Using Photoshop (skip this point if you are not using Photoshop)

Adobe Photoshop is probably the best alternative for a well-designed favicon. The standard Photoshop can not handle .ico, so the first thing to do is to download a Windows Icon Photoshop Plugin (you can download it here).

Once you have the Plugin installed you should create a 64 x 64 pixels canvas and start playing with it. After you are done designing the favicon you will need to resize the image. Go to the Image Size menu and click Resample Image. This process will make sure that the image will not blur as you scale it down. Finally just save the 16 x 16 image as “favicon.ico”.

3) Using MS Paint and web tools

Favicons are very simple image icons, meaning that even Microsoft Paint should be enough to create a good looking one. The easiest way is to create a 32 x 32 pixels JPEG image with Paint and then use the online service “Favicon from Pics“ to convert the JPEG image into a favicon.ico file.

4) Uploading the favicon.ico file

Once you are done with the favicon.ico file you should upload it to your site. Just make sure you place it in the root directory, which is the directory where the index file is located.

5) Changing your header

The final step is to change your header, which is the code that goes between the <head> and </head> tags. All you need to do is to add the following line:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

Notice that this code will only work if the favicon.ico is located in the root directory.

6) Testing

Everything should be in place now, just open your browser and point to your site to check whether the favicon is appearing or not. Bookmark the site and open a couple of tabs to see how the icon is looking, if you do not like it just go back to the drawing board.

Daniel Scocco on December 27, 2006 Subscribe to our RSS Feed

Got the Daily Blog Tips Newsletter?

  • Tips and tricks to improve your site
  • The latest trends and opportunities
  • Useful online tools
  • It's free!

Related Articles

Bookmark

28 Responses to “How to create a favicon”

  1. VJ on December 27th, 2006 3:55 pm

    Great! I’ve done it for one of my sites that I have control over hosting for - but, how to do at wordpress? blogspot? Possible?

  2. Madhur Kapoor on December 28th, 2006 2:41 am

    Great article mate…

  3. Daniel on December 28th, 2006 3:22 am

    I used Blogger almost 1 year ago, and by the time you were not able to use favicons because you could not upload files directly to the root. I am not sure if they updated this feature or not.

    Regarding Wordpress free platform, are you able to access the header.php file if you go under “Presentation” and then “Theme Editor”?

  4. Ramanathan on January 7th, 2007 6:46 am

    Thanks buddy. I used it.

  5. Adam Grow on September 1st, 2007 9:31 pm

    thanks for your info.
    cool….

  6. Rex Owens on October 20th, 2007 8:36 am

    I can get my favicon to work in Firefox but can’t get it to work in Internet Explorer. Can anyone help me with this problem?

  7. Kevin on January 12th, 2008 1:45 am

    Hi,
    I followed your steps, But it just work for the root URL
    http://www.plentyofsoft.com

    For other pages, I use permanant links, it doesn’t work with IE7
    But it works with Firefox 2.0
    For example:
    http://www.plentyofsoft.com/mp.....converter/

    Does anybody know why?

    –
    Kevin
    Plenty of Software: Free downloads center
    http://www.plentyofsoft.com

    Review and download a lot of newest shareware, trialware, free software! All are free or free to try!

  8. bill on March 6th, 2008 8:08 am

    I have the same probleme with KEVin
    just work for the root URL
    http://www.freesoftwarebase.com

    For other pages, I use permanant links, it doesn’t work with IE7
    But it works with Firefox 2.0
    For example:
    http://www.freesoftwarebase.co.....converter/

  9. Klajdi Hena on June 21st, 2008 1:15 pm

    @ Vj: You can do it very easily on Blogger. I use blogger, and i use a favicon. Visit my site to see it.

    @Rex Owens: Internet Explorer does not support favicons. that’s why.

  10. Danny on September 5th, 2008 2:29 am

    I use SM Favicon Generator. This one works great and its fast.

  11. Analyst on October 8th, 2008 12:00 pm

    How to create root file. Regards http://www.indian-share-tips.com

  12. Bang Kritikus on January 27th, 2009 1:34 am

    Wow great article. Thanks .

  13. Kaye on April 10th, 2009 4:02 am

    THANK YOU! I have a plugin that sends me all my 404s. It’s a useful tool but I have gotten SERIOUSLY irked by all the Favicon 404s. After a lot of research, I finally figured out that I needed to add one, and went looking for help. Out of all the results from Google, I spotted your site. Having subscribed for a while, I felt confident I could trust your advice and IT WORKED. Well, the pix isn’t showing up but that’s probably on my end. But there’s an empty square and NO MORE 404s for the missing Favicons - YAYYYY! Now I’ll work on getting a better pix that will actually show up, just because it’s cute, but my main problem is happily solved. Thanks for this article and your interesting emails :) :) :)

  14. JobsNgr on April 25th, 2009 9:49 am

    Thanks for the post.I will like to creat a Favicon For My Forums.

  15. Indian Stock Tips on April 27th, 2009 11:52 am

    I tried the favicon and successfully installed the same at Indian-Share-Tips.com; but found that the same was visible in firefox and was getting saved on book marking. However icon is visible in Opera ut is not visible on book marking. Lastly favicon is not at all visible in Internet explorer and googl chrome. Please help. regards

  16. Fasil on May 5th, 2009 9:11 am

    The easiest and simplest way to create Favicon …

    http://smashtech.blogspot.com/.....-blog.html

  17. Daily Good Tips on May 26th, 2009 5:23 am

    Favicon is our identity. It can work normally in my browser Opera

  18. Zafar Majid on June 7th, 2009 9:38 am

    I’ve got a great little logo that I use on my website, it would make a good favicon… I’ll certainly give it a try.

    Thanks for explaining how to do it.

Got something to say?





Sponsors

Why I recommend Doreo Hosting Flex Theme for WordPress Content rich web directory Ghost Writing Services Online Invoicing For Freelancers advertise here

Recent Articles