What is a Favicon?
The favicon is usually displayed next to the web site address. Much like the way shortcut icons are used on the computer desktop to distinguish computer programs and files, favicons can be used to personalize or brand your web sites.You should see a little picture when looking at this site depending on the type of browser you have. If the browser is an updated version of Firefox, or Internet Explorer you should see it up there any time.
The Favicon also shows up on the tabbed browsing features that are now included with Internet Explorer 7 as well as in Firefox. They will display in your bookmarks menus as well and on your favorites tool bar in your browser too.
I had never even heard of Favicon until earlier today actually when I was screwing around on my Feedburner console. Feedburner has the option to create a Java based script that you can use to promote your site on other sites. In the set up of that they said “boo hoo no favicon found at JMH”. That peaked my interest and I decided to figure out what exactly a favicon was, and how to make one.
How to Make a Favicon
Making a favicon is really easy. It took me no more than 5 minutes to create, and implement it on my site once I found out what it was exactly. IF you search on Google about favicons you will likely find the site with that domain first on the list. I went there first and found it rather confusing. I’m not against anyone trying to make a buck, but the site seemed to do it purposely to convince you that you should spend $75+ to get one of these favicons made. So…I just decided to go back to Google and look elsewhere. The 2nd link was much more helpful and that is where I got everything I needed.
The first thing you need to do however, is to decide what you want your icon to look like. What is a good icon for you, or your site? In my case I am using the same favicon on all my sites since I seem to have an avatar already that people have become familiar with. Based on the various communities I utilize online the bloggers I come in contact with have become used to seeing this image everywhere so I used it as my favicon.
Now that you have determined what exactly you want your favicon to be, it is time to implement the icon on your site.
- 1. Upload the image and get the file here
2. Download the zip file by clicking “Download Favicon”.
3. Unzip the file and upload the favicon.ico file to your root directory.
4. Find your <head> and </head> tags in your header.php file and place the code <link rel="shortcut icon" href="http://www.yourwebsitehere.com/favicon.ico" > somewhere in between them. I placed mine directly before the </head> tag.
5. View your site.
6. Check the favicon validator to make sure you did it correctly.
That’s it. You should now be able to see an image in your address bar when you visit your site as well as on the tabs. This is purely a cosmetic change, but I think it displays some sort of professionalism and is just a cool feature.
Spread the Word
Filed under: Blogging Tips and SEO, Computers and Internet by JMH
Enjoy this post? Subscribe to the RSS Feed
This is for your readers – I seriously think should be a must do for any blogger of any level. If you haven’t done it, then you’re not branding yourself correctly. I would also suggest using the same icon you have for MyBlogLog to further expand on the branding of your site.
Great Post Jimi!
thanks for the article.. I’m yet to do this.. I better get on it!
Sounds like a good post. I need to come back to it on the Interwebs.
Gary has a great point about branding. I like my black hood, but it probably would not make a good favicon. Help!
I just implemented my favicon.. what do you think?
thanks JMH!
To EW:
I just checked it out…looks gooood!
Haha….That looks great Weekender.
Don’t forget that you can actually use animated favicons!
Your favicon image is funny.. but too small to see as a favicon! Maybe you can zoom in on his head – it would make it more clear and yet still keep your “thing” going
Love this blog! I recently found this online generator to make my favicons—
Quick Favicon There are a lot of them out thee. I also recommend downloading The Gimp Gimp It’s open source and can do just about anything Photo Shop can do. I also recommend Irfan View Irfan And if you can manage to find the free version of “Faststone” (not free anymore) which I have. These will do any novice well!