Web Design and Development
How To Make A Favorites Icon (Favicon.ico)
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.
Tags: favicon14 Responses to “How To Make A Favorites Icon (Favicon.ico)”
Trackbacks
Trackback URL for this entry:
http://www.velvetblues.com/web-development-blog/how-to-make-a-favorites-icon-favicon-ico/trackback/
Leave a Reply
- Categories
- CMS Plugins (12)
- Code Samples (25)
- Domain Names (13)
- Industry News (57)
- Internet Marketing (49)
- Miscellaneous (85)
- Professional Web Development (12)
- Search Engine Optimization (66)
- Tutorials (53)
- Web Browsers (17)
- Web Hosting (25)
- Website Improvement Tips (64)
- Website Performance (18)
- WordPress Themes (1)
- Subscribe by Email or RSS
- Want to be notified of new entries? Just enter your email address below. Our feed is delivered by FeedBurner.
- Recommended Hosting Company
- We've worked with dozens of hosts. Yet, we prefer HostGator.
Click here
- Top Commentators
- Dennis Edell @ Direct Sales M... (3)
- Giljed Jowes (2)
- aftab alam (2)
- showtime professional rotisse... (2)
- Icechen1 (1)
Want us to work on your project?
Contact us today for a quote. Click here to submit details regarding your project.
If you are making a general inquiry, send an email to info@velvetblues.com
Twitter | RSS Feed
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.
Jen’s last blog post..Network Marketing Income- Generating Your Prospects 4 Different Ways
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?
Ajith Edassery | DollarShower’s last blog post..Alexa Rank Update Problem and Workaround
@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.
Nice tut for those who want to create a favicon. I had created few months back. I may have to think of changing it.
Nihar’s last blog post..Friday Night Links Party – 10 January 2009
Nice tutorial. Already added mine. It was time.
Kurt Avish’s last blog post..Island Crisis Crazy & Stupidity Survey and Award
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!
stratosg’s last blog post..Quick URL parsing using Perl
@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.
)
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.
TrainWreckIdeas’s last blog post..BIRTHDAYS ARE DEPRESSING
@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.
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
Kim Woodbridge’s last blog post..WordPress Backup Plugin for Themes, Plugins and Uploads
@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.
Having a favicon really makes you stand out amongst other websites. Most people just can’t be bothered to have one tho..
Ben Pei’s last blog post..Why I Think It’s Important To Have A “Must Read” Section
@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.
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