So its now 2010 and I am still seeing tons of websites without favicons. Favicons are definitely on the lower end of the importance scale but they really add polish to a website design. So if your website is still sitting out there showing the standard “white page” icon in Firefox, then this overview is for you.
Now most of this information isn’t necessarily new but lets just say if you want me to take your website seriously you should have a favicon. Lets face it I’m ADD and browse with too many tabs open and your Favicon helps me identify your website.
Now lets get started.
What are Favicons?
Favicons simply put is a “favorites” icon. Favicons are the small icons that you see next to the URL in your browser. Look for the one up top. It should look like this:
Favicons are also displayed in the “tab” area of many browsers such as Firefox and Internet Explorer.
How are Favicons Used?
Favicons help users identify what website they are visting. Favicons are used by nearly all modern browsers and are often used by other services such as RSS Readers and Bookmark Applications.
Why does my site need a Favicon?
This really is a personal question, but considering how easy they are to implement, I would highly suggest you add one. Plus, it helps make your website feel more polished.
How do I make a Favicon?
To make an favicon start by opening your favorite image editing software such as Photoshop or GIMP and create a new 16×16 file. Once you have a new file open, work your magic and create the Favicon of your dreams.
Once you are done save the file as a .png .
Conversion Time:
Before we can add the favicon to your website we need to convert it into a “.ico” format. To do this visit you will want to use the converter found at Faviconr.
Detailed Instructions:
Simply upload your .png file to faviconr.com
Faviconr will then convert your file into a .ico file. (you might have to hit Generate Favicon twice).
Once your favicon is generated simply click “Download Favicon.” Remember where you saved it.
How do I add a Favicon?
Once you have your .ico file saved. It is time to upload it to your website. Make sure you put it in the root directory. This means if you visit http://www.yourwebsite.com/favicon.ico you will get your favicon.
Once you have your Favicon uploaded simply add this line of code within your tags.
<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon” />
If you are using WordPress this tag will be found within your “header.php” file.
Add a Favicon to Thesis
If you are using Thesis Theme to mange your website the process of adding a favicon couldn’t be easier.
- Start by uploading your icon to your website “root.” Again, this means if you visit http://www.yourwebsite.com/favicon.ico you will get your favicon.
- Next login to WordPress and visit your Thesis Options Panel and paste the code you see above into the “Header Scripts” box.
- Once you are done click the save button and visit your home page to see your new Favicon.
Get Free Updates From Art Of Blog
Sign up to receive insider tips only available to our email subscribers.
You can also subscribe to our RSS feed or follow us on Twitter to get the latest updates. Check out our YouTube channel for the latest video tutorials!
Nick Reese is a full time internet marketer living in Austin Texas. When Nick isn't managing web properties he enjoys biking, shooting video, and drinking tea. You should follow Nick on twitter here and check out his side project Becoming Bold.
Two Sure-Fire Ways to Increase Website Traffic 
Thesis Recent Tweets with @Anywhere Integration 
Add A Tweet This Post Box To Your Thesis Post Footer 
WordPress Security 101: Securing your Site 
Art of Blog 4.0 – A Thesis Customization 
Enable Your Fans – Top Community Building and Social Sharing Tools for Your Blog 
Thesis WordPress Theme Review 
Headway Theme for WordPress: Customize Your Website Visually 
15 Incredibly Useful WordPress Plugins to Make Your Life Easier 
Top 25 Tutorials for Thesis Newbies 
{ 13 comments… read them below or add one }
I just discovered our website yesterday and this post could not be more timely for me. I am currently in the process of re-investing my web persona (launched a new blog), I had a self hosted blog years ago (I shut it down in 2007), and just did the face book thing.
I forgot all about the favicon, but after reading your article it reminded me of how important it was in the branding process of my old website. The icon is always (think of it as a miniature logo, of your personal brand) there infront of perspective visitor, helping remind them to come back and have another peek at your stuff.
I am going to build myself a favicon today… and add to the polish of my new blog.
Cheers,
Paul
Hi Nick,
Thanks for another great tip! I don’t know if we have the best image for our favicon yet, but at least we have one – and now know how to get it there.
You guys are awesome. Keep on crushing it. :-)
Best,
CT ENB Admin
Hi Nick,
I’ve followed your instructions but cannot get my favicon to display. I’m using wordpress and thesis. I also have several websites within one hosting packages, all contained within the htdocs folder, and maybe this is my problem. Getting an exact filepath. Do you have any suggestions?
Victoria
The favicon should be in the root of your domain. Something like “public_html/” or “youdomainname.com/”
I am using thesis and word press as well.
the fav.ico file must be in the same directory as your wp-config.php file, which should be the document root of your domain. My directory is called /html/fav.ico .
Put this in your header scripts thesis option box and all should be good:
Cheers,
Paul
Paul, thanks for this contribution! Helpful tip, indeed.
Paul, Nick,
I too am using Thesis and WordPress and have placed the icon in the root directory where wp-config.php is — but my favicon is still not showing. I also was sure to add the header code as well.
Any other suggestions as to where I need to move the graphic to.
Thanks for your time
SonDan – For me it took some time to update. Check it in 24 hours.
Thank you Paul for that tip about being in the same directory as the wp-config.php file. Also, note to others having the same issue. Make sure you update the code in your header script so that it’s pointing to the appropriate directory.
I am using A Dream to Host v 2.3 with Wordpress and would love to add a favicon – or is it a gravitar? I thought about using a gravitar widget but then I read somewhere that using anything above wordpress 2.5 obviates the need for this. I am really confused. Please help and knowI am not a programmer so even skipping one tiny step will have me lost in space. Thanks.
btw- I do love your A Dream to Host theme
Toni,
Glad you enjoy the theme. I actually just wrote a tutorial on this a few months ago. http://www.artofblog.com/understanding-favicons/
Bingo! Thanks. I have to admit, I got someone to help me interpret the instructions, but now that I’ve done it, the process makes perfect sense.
So…. now I’m hungry for a gravitar in my comments for my blog. The Gravitar widget only puts one in the sidebar and only shows a generic icon anyway. Then I installed Filosofo Gravatars. I think I have to add a line of code to the comments.php??? But then how do I change the actual gravitar image.
Thanks again.
This was so helpful! I added my favicon pretty quickly after reading this. Thanks!