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.
Article by
Nick has written 1 awesome articles for Art of Blog.
{ 6 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.