Understanding Favicons: How to Add a Favicon to WordPress, Thesis, or Your Website

YouTube Preview Image

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.

understanding-favicons

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:

favicon-aob

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

favicon-thesisIf you are using Thesis Theme to mange your website the process of adding a favicon couldn’t be easier.

  1. 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.
  2. Next login to WordPress and visit your Thesis Options Panel and paste the code you see above into the “Header Scripts” box.
  3. Once you are done click the save button and visit your home page to see your new Favicon.

Sign Up Now for Free Updates and Exclusive Content:

Learn how to write killer content, get more traffic, make money, and more by entering your email below:

Written by Nick Reese

Nick Reese is a multi-passionate entrepreneur who believes anyone can transform their business and life they they've got guts and hustle. He's also the co-founder of Broadband Now which aims to simplify the broadband shopping process.

Comments

  • Paul MacPherson says:

    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

  • Victoria Hansen says:

    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

    • Nick Reese says:

      The favicon should be in the root of your domain. Something like “public_html/” or “youdomainname.com/”

    • Paul says:

      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

      • Nick Reese says:

        Paul, thanks for this contribution! Helpful tip, indeed.

        • SonDan says:

          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

      • Terri says:

        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.

  • Toni says:

    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 says:

    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.

  • Ms. S says:

    This was so helpful! I added my favicon pretty quickly after reading this. Thanks!

  • marcus says:

    Nick – any advice on how to convert your favicon to use as a logo for a facebook page? I found a site to convert the .ico to a jpeg file, but the image is way to small to use. Any ideas?

  • @Nick, thanks for this very useful tip – been struggling to sort out a favicon for my client on her Thesis theme. Much obliged :)

    @Marcus: what I do is create my own Favicon from logos from the image I use for FB – there’s a great Favicon generator (free) at http://www.tools.dynamicdrive.com/favicon/ – this may help you!

    cheers
    Tracey

  • Jean Gibson says:

    Thanks for that tidbit.Usually Photoshop can do all my design work on my site but basically favicon can enhance your site’s brand and attract to your visitors.

  • this is one of those little jobs that has been bugging me for ages

    My favicon is appearign in the tab on Chrome, but not alongside my site URL, it still shows the grey globe there? Why is that?

    thanks,

    Phil

  • favicons are usually pretty low on the totem pole when you’re first setting up a new site, but they definitely add some polish to a site and make for a better user experience.

  • mazdodot says:

    Hi, Nick…i used wp 2.9.2 version , thesis theme, w3 total cahce with CDN self-hosting mode…my favicon can’t display…how to fix that?…my blog at sub-directory eg: http://dotcomcell.com/kumpulan-artikel/ ….thanks before.

  • Bulum says:

    thank you Nick, this is small details but very important thing for prestige of website

  • cindy says:

    Ok thnaks for all the tips I have done it all ways but my code after saving has small diamonds in it with ‘?” marks in the middle?

    like this:

    any suggestions?

  • cindy says:

    oops forgot, it wont show the code,… its like this rel=â��shortcut iconâ�� href=â��/favicon.icoâ�� type=â��image/x-iconâ��

  • jocelyn says:

    Thank you so much. Works great for me :)

  • cathy says:

    well i tried this and it never worked for me . what you did not describe is where exactly/ what file in the root directory to put it in…maybe you could help because i don’t know when i changed my theme for some reason it is caring someone else’ favicon on the web address…

    • Eric Binnion says:

      Hey Cathy,

      It is hard to recommend where to put the favicon, because your root directory varies depending on your server configuration. For your server, this could be your /public_html/ folder, or it could be a folder with the name of your website, such as /artofblog.com/.

      Alternatively, you can usually use something like <link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>

      Update that piece of code with the path to your favicon, then put it in the head of your theme.

      I hope that helps.

  • saiprasad says:

    Hi Nick,
    I am using thesis framework for my website and this post has shown me how to generate favicon and upload it to my site.
    Thank You.