How to Create a Favicon and Why Should You Use One

What is a Favicon?

A Favicon is a small square icon associated with a website or a web page. In a browser, it is typically displayed before a web page’s address in the address bar and also before the name of the web page in the list of bookmarks, if you add it your Favorites. So “Favorites Icon” is where the name Favicon comes from. Browsers that have tabbed document interface show a page’s favicon next to the page’s title on the tab as well.

By a small square icon, I mean that a favicon is a really small icon measuring 16×16 pixels. You can also create a 32×32 pixels or 64×64 pixels icon. Creating a larger favicon is only useful if user opens up a folder that is set to display large icons. In all other cases, your Favicon will be scaled down to 16×16 pixels to be displayed in the tabs, favorites menu or the address bar.

Why Should You Use a Favicon?

At CSSJockey, making your web presence outstanding is a key point that is always on our mind. One of the ways to make your website stand out from other pages on the WWW is to use a Favicon that represents your website if it’s opened in a browser or saved in someone’s list of bookmarks. You probably know how cluttered can a person’s list of bookmarks or favorites can be. Having a graphic identity in the form of a Favicon is a great way to catch attention.

In this post, we’ll see how to create a Favicon.ICO file in 2 easy ways:

Create a Favicon.ICO using Photoshop

You can create your Favicon offline using Photoshop. This requires that you add a plugin to your Photoshop that allows it to open and save .ICO files. You can download the .ICO Format plugin for Photoshop from Telegraphics. Extract the contents of the .ZIP file and place the “ICOFormat.8BI” file into Plug-insFile Formats directory inside the Adobe Photoshop folder where it is installed.

The plugin reads and writes ICO files in 1, 4 and 8-bit Indexed and 24-bit RGB modes, and also reads and writes 32-bit “XP” icons (with 8-bit alpha channel).

Now we can start with a new 16 x 16 pixels canvas but since its  a very small area it can be a little hard to work with. Instead, we can start with a 64 x 64 canvas (because if you plan to re-size an image later, it’s always good to use even multiples of the original dimensions.)

If you already have a logo, try scaling it down to this canvas size. It’s well and good if it holds.. and you can use it. But if it doesn’t look good and crisp, try creating a simple design that uses colors from your website’s design.

When you’re ready with your Favicon design, Select Image>Image Size menu and enter 16 x 16. NOTE: CS versions of Photoshop will have an option called “resample image” – If you’re using a CS version of Photoshop – Check the Resample Image option and choose “Bicubic Sharper” from the drop-down menu. This technique is for optimizing reduction transformation.

Save your image from the File > Save menu, enter a suitable name and select ICO (Windows Icon) .ico from the Format drop down menu.

Create a Favicon.ico from images in other formats using Online Favicon Generators

If you have your website’s logo or an image that you’d want to use as your Favicon in formats other than .ICO such as PNG, GIF, JPEG, etc. you can still Create a Favicon from those using Free Favicon Generators available online.  Here are a few nifty Favicon generators that I have seen around the internet:

1. Dynamic Drive FavIcon Generator

This FavIcon generator supports GIF, JPG, PNG, and BMP formats and you can even use a gif or png with transparency if you require it. However, the maximum image size that you can upload is 150 KB.

2. HTMLKit FavIcon Generator

With this FavIcon generator you simply select a picture, logo or other graphic (of any size/resolution) for the “Source Image”.

3. Favicon.cc

This is my personal favorite! When you open this website, you’re presented with a grid where you can paint each pixel of the grid using any colors from the palette provided alongside and also preview the result of your creativity LIVE just below the workarea. Besides sketching a FavIcon, you can also import an image in various formats and convert them into a favicon.ico file.  You have an additional option to keep the dimensions of the image you choose, or to shrink the uploaded image to a square icon. There are also user generated favicons in two sections – “Latest Favicons” and “Top Rated Favicons” that you can view or download.

How to use your Favicon

After you’ve created your favicon, it’s time to add it to your website. You can do so by following these steps:

1. Upload the favicon.ico file to the root directory of your website. Visit http://your-website.com/favicon.ico to make sure it is present.

2. If your website is a static website with different HTML pages, insert the below code in the HEAD section of your pages:

If your website is based on WordPress and you’re using a theme, you’ll need to modify the above code as follows:

and place it in HEAD section in the header.php file of the theme.

Some people suggest that the following is actually more correct:

You can use both if you want! Clear your browser’s cache, restart the browser and visit your web page. Ideally, you should be able to see your Favicon. However, it must be noted that sometimes the Favicon doesn’t show up immediately. You should try putting a ‘?’ at the end of the URL, which will trick a browser into thinking the page is new and not cached. In some cases the favicon might not show up in Internet Explorer 7. You’d want to add

in the HEAD section to display your Favicon correctly in IE7.

Some Good Looking Favicons and Favicon Galleries

For your viewing pleasure :-)

  1. List of 50 Remarkable Inspirational Favicons – Smashing Magazine
  2. 88 Outstanding Favicons
  3. Favicon Gallery at FineIcons
  4. Favicons at Delta Tango Bravo
  5. Fresh Favicon – Inspirational Favicon Gallery

I hope you enjoyed this walk through and if you have something nice to share, please feel free to use the comments form below.

19 thoughts on “How to Create a Favicon and Why Should You Use One”

  1. Ashfame says:

    Where is the favicon of CSSJockey? :P

  2. Abhinav Sood says:

    Did you try clearing your browser’s cache and then viewing the post? If you still couldn’t see the Favicon.. a good way would be to use the trick I mentioned in the post.. Append a ? to the URL of the post and try to open it.. This will trick the browser into thinking that the page is not cached and it’ll load all the resources including the favicon.. Let me know if that works for you..

    Regards..

  3. Ashfame says:

    Yeah! I can see it now. And now I am sure that it was a browser cache issue as I have seen the favicon earlier ;)

  4. Fretsnkeys says:

    Hey!
    I have used favicon on my site however did not know about all these web-sites other than “http://tools.dynamicdrive.com/favicon/” for this service.
    Thanks for sharing!

  5. Cody says:

    Cool article, yeah I love when sites use favicons. It makes it easier to find a site in your bookmarkets/favorites with a favicon. I like to use Dynamic Drive FavIcon Generator.

  6. Thanks,Excellent arrangements. Already using it

  7. Paddy says:

    Nice Roundup.
    If you need 32Bit favicons (with 8 Bit Alpha Channel) GIMP is the best choice for me because it’s free and you don’t need any plugins.
    Paddy

  8. Evee says:

    Excellent, thank you for this favicon tip.

  9. Yea a favicon is a must it also helps people when the look through their bookmarks, I am triggered to them when I am searching, not one reads the full links you search for like “css tricks” or whatever.

    Good post mate, enjoyed it. The Photoshop extension is the way I do it to, do you not think they should just build this into PS? seems odd to me that they haven’t

  10. Cheryl Suggs says:

    I admire your blog , it has of lot of information. You just got one perennial visitor of this site!

    1. CSSJockey says:

      Thank you for the positive vibes. I am glad you like what I do.

  11. Ryan says:

    It’s usually a challenge getting our clients convinced they need an impressive favicon, but it always turns out to be a huge chunk of the design meetings. Even though they might not think it’s important initially they always get more involved once they see examples popping up in the browser.

    1. CSSJockey says:

      Its always good to create one even if the client doesn’t mention that in the requirements, after all its our work and we want to make it perfect ;)

  12. David says:

    Thanks a lot !! ^^

  13. I like to use Dynamic Drive FavIcon Generator..!!

  14. I like to use Dynamic Drive FavIcon Generator.

  15. Noa Noa says:

    Good article and great resource section. I always put favicon icons on my sites and blogs as it finishes everything off and makes you website look so much more professional.

  16. Krisnakant Sarle says:

    Using Dynamic Drive I got the best favicon output.. Thanks a ton!!

  17. Sonya says:

    you can use http://favicon1.com to generate favicons online.

Leave a Comment

Your email address will not be published.*

*