Posted in:

15 Comments

Favorites icons — those little images which often show up next to a web address in the url bar of your browser — are nice ways to brand a website. After all, these images seem to show up everywhere these days. You’ll see them in:

browser bookmarks lists
browser tabs
social bookmarking websites
RSS feed readers
search engine results pages (depending on your browser settings)
your computer’s desktop as a shortcut icon

and more… (See the image below for examples of favicon use in the url bar, tabbed browsing, and bookmarks.)

But in addition to their visibility in the above locations, favorites icons are also useful because they’ll help you stop lots of error messages from piling up in your log files. When your website is requested by a browser, or is bookmarked, a request for a favicon.ico file is automatically sent. If this file does not exist, 404 Not Found Errors are generated.

Making A Favorites Icon

Making your icon is easy. We’ll show you how to do it in three steps.

Step 1: Select an image that you want to use.

In our case, we decided to use our website’s initials, which is a common way to go. You can also opt for a logo, or some other image which represents your website.

Step 2: Resize, crop, and save your image.

For maximum compatibility, favorites icons need to be a size of 16 x 16 pixels. So you will need to adjust the size of the image that you want to use. If you do not have the necessary graphics editing tools to crop your image and save in an ico format, there are plenty of free favicon generators that you can use. We suggest this favicon generation tool at Dynamic Drive.

What about other image formats? You can use other image formats for your favorites icons, such as jpegs and pngs or gifs (which are useful if you want your favicon to be an animated image), however, for maximum compatibility we suggest the use of the industry standard, the .ico.

Step 3: Add the Favicon To Your Website.

Adding the favorites icon requires the addition of two lines of code within the <head> and </head> tags of your HTML page. You can opt to use one line of code, but for maximum compatibility with all browsers, we suggest using both. One line adds the favorites icon and the other line designates the shortcut icon.

<link rel="icon" href="http://www.example.com/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="http://www.example.com/favicon.ico" type="image/x-icon" />

And if you are a WordPress user, adding favorites icons is even easier! There is a nice plugin, MaxBlogPress Favicon, which adds the above code to your template for you, and all you have to do is designate the image that you want to use.

And that’s it! Adding a favorites icon is easy, so there’s no excuse for not creating one for your website.

Have questions or know of other useful favicon tools? Let us know so that we can post them here.

Share or Subscribe

Why don't you subscribe to our feed so you can get the latest from this blog. You can also subscribe to this article's comments feed.

Tags: favicon

15 Responses to “How To Make A Favorites Icon (Favicon.ico)”

On January 11, 2009 at 8:55 pm,Jen wrote:
This is really cool- I had just noticed last week that one of the blogs I subscribe to had one and I had no idea what it was or how to get it. (Yours doesn’t show up on my address bar)
I will be on the lookout for my icon in the next few days. Thanks for the explanation of what it is and how to do it.
On January 12, 2009 at 3:24 am,Ajith Edassery | DollarShower wrote:
Talking about fav icons, I need to change mine soon when the rebranding happens, with new theme, logo and tag line…
Btw, this works only on Chrome and FireFox right? Does it work on IE?
On January 12, 2009 at 4:29 am,Velvet Blues wrote:
@Jen, well you should be seeing my icon shortly. I recently tweaked it, and with IE – at least – had to jump through hoops to make it clear its cache/history to finally see the revised one. But I have verified that it does show up in both IE 6 and IE 7 as well as Firefox, etc…
@Ajith, nope this works on IE as well. On IE 6, you will just see it in the address bar. On IE 7, it will be in the address bar as well as on the tabs and in the bookmarks/favorites folder, like Firefox.
On January 12, 2009 at 5:51 am,Nihar wrote:
Nice tut for those who want to create a favicon. I had created few months back. I may have to think of changing it.
On January 12, 2009 at 9:05 am,Kurt Avish wrote:
Nice tutorial. Already added mine. It was time.
On January 12, 2009 at 12:30 pm,stratosg wrote:
this is a nice step by step. i had an online favicon generator but they shut it down… so this has a very useful link for me. thanks!
On January 12, 2009 at 12:39 pm,Velvet Blues wrote:
@Nihar, yes. As I go around the web, it pains me to see the lack of favicons… even on professional and popular websites. So, I created this tutorial.
@Kurt, you have a pretty stylish favicon… Animated and everything!
@stratos. haha. They shut you down?! That’s no good. Were you generating too much traffic? Sometimes shared hosts will shut websites down that use too many of their resources… (They like to say that resources are unlimited…. but we know the truth. )
On January 13, 2009 at 5:41 pm,TrainWreckIdeas wrote:
This is really really neat! I always find that websites with these little icons have a professional feel to it. Now I just need to think of a simple but interesting logo.
On January 13, 2009 at 5:47 pm,Velvet Blues wrote:
@TrainWreckIdeas: Well, whatever it is, it needs to fit in a nice 16 pixel square. So… that doesn’t leave you with too many options.
On January 14, 2009 at 11:27 am,Kim Woodbridge wrote:
Have you ever run into the cache problem? Sometimes I have to clear the browser cache repeatedly for it to show up.
It’s hard to get a good favicon with such limited space to work with.
Another great article
On January 16, 2009 at 8:56 am,Velvet Blues wrote:
@Kim yes, I have run into the cache problem. With Internet Explorer, for example, it is especially difficult to clear the cache. But I find that clearing the cache and history (along with a page reload) work almost immediately for the new favicon to appear.
On January 17, 2009 at 8:52 pm,Ben Pei wrote:
Having a favicon really makes you stand out amongst other websites. Most people just can’t be bothered to have one tho..
On January 19, 2009 at 7:50 am,Velvet Blues wrote:
@Ben: Well, for WordPress users, the plugin makes it incredibly easy to add the favicon. And for other websites, it really does help a website stand out, so it is worth it.
On May 24, 2009 at 3:13 pm,Antony wrote:
Thanks for the advice – although Im very new to this and am building a website through Microsoft Live – Small Business templates.
I didnt actually undestand what you were explaining!
Is there a way I can do this through the way I am constucting my website?
Thank you in advance,
Antony
On December 9, 2011 at 2:52 pm,Tanner wrote:
Thanks! Works like a charm!