How To Make A Favicon For Your Website

The “halo effect”, as I mentioned in an article about why I’d never use cheap website builders, suggests the way we look, dress, speak and the sort of homes we live in influence other people’s impressions of us.

halo effect

This is why, when you’re designing a website for yourself or a client, you should take care on all the little details – including the favicon!

OK. So most people pronounce favicon FAVE-IKON. Well, I didn’t know. Have a look at my Create a Favicon for a Website video for a laugh about my accent!

What is a favicon?

A favicon (or favorite icon), also known as a shortcut icon, is an image file containing a small icon associated with a particular website. Below are a few you may recognise:

favicons

And look at that one at the end there! Ugly isn’t it? You don’t want to be the owner of that website. So read on …

Create your favicon in Photoshop or in any other image editor

Although there are free favicons you can download in the web, it’s always best to have an original favicon for your site. It’s good to design the logo of a site with the favicon in mind because you need to isolate an element from the logo that is square.

I have an extra symbol on my logo which I use for the favicon:

rob-cubbon-logo-symbol

All I have to do is create that as a 16 x 16 pixel or 32 x 32 pixel square document in Photoshop:

favicon photoshop file

Now, save the image that will become the favicon as a GIF or a PNG-8 or a PNG-24. The important thing is that it has a transparent background. Once saved as a “favicon.png” amend the file name to “favicon.ico” – even though it isn’t technically an ICO file.

However, if you want to create a real ICO file direct from Photoshop you need to download this ICO file format plugin for Photoshop or you can use an online favicon generator. But I find it works fine appending the file extension from GIF or PNG to ICO – however I believe this may not work with some really old versions of Internet Explorer.

Once you have created the “favicon.ico” you need to upload it to the root of the server – where your index.html or index.php, or, if you’re using WordPress, this is where all the “wp-” files and folders are.

site root

Even if, in the next step, you specify your favicon.ico to be in another directory I would still advise you to also put it in the site root. This is because social sites, like Google+, when your posts are shared, will just look for a favicon.ico on the root and will put up an ugly default one if they can’t find yours.

HTML to get the browser to recognize your Favicon

In order to get your favicon to appear in the browser, you have to put the following in the <head> section of every page of your website.

<link rel="shortcut icon" type="image/x-icon" href="http://example.com/favicon.ico" />

If you are using WordPress you can put the above in the header.php file between the <head> and the </head> tags. Some themes, like Genesis, for example, already have a favicon. It’s located in the wp-content/themes/child theme name/ folder. You should overwrite this file with your new favicon.ico as well as putting it on the root of the server.

My favicon’s not updating! What do I do?

Once you’ve changed your favicon it often stubbornly refuses to show and the browser uses the old cached version instead, even after refreshes. If this happens simply paste your favicon’s address in the browser (eg. http://robcubbon.com/favicon.ico) and then hit refresh. After this the favicon should show up correctly.

A big thank you to Chris Hess in the comments for making this point. He also suggests opening the site in a Chrome Incognito window to clear the cache and see the new favicon.

Use you favicon as a bullet point

Another design trick (which doesn’t always work) is to repeat your website’s icon (favicon) in your website. For example, you could use your favicon as bullet points in the sidebar – as I have on my site.

To do this I re-saved my favicon.ico as a bullet.gif and put it in my theme’s images folder (wp-content/themes/streamline/images/bullet.gif) and put this in my theme’s style.css:

.sidebar.widget-area ul li
{ list-style-type: none;
background: url(images/bullet.gif) no-repeat 0 2px;
margin: 0 0 7px;
padding: 0 0 0 20px; }

Here’s an explanation of the above CSS declarations:

  • list-style-type: none; gets rid of the browser’s default bullet point
  • the background declaration puts the icon’s image in
  • margin: 0 0 7px; adds a bit of space between each line of the unordered list
  • padding: 0 0 0 20px; adds an essential bit of space to the left of the list lines so the don’t bump into your new bullet image

What you can do

Is your site looking unloved without its own original icon? Edit your logo to create a distinctive favicon. Any questions, just let me know.

Finally, this post came as a request from a visitor. If anyone has any more ideas on subjects I can write about, I’m all ears, as they say. Toodeloo!

Did you enjoy the article? If so, please share!

Download my 2 free e-books and 2 free MP3s on running an online business & getting clients

Plus a list of my 12 favorite resources for online business

two free books and two free mp3s and a list of favorite online tools

Comments

  1. says

    This is why I can’t decide with my site’s favicon, Rob. I like the logo since it goes with the name of the site and everything but it won’t look good when I convert it to a favicon…my logo isn’t square…may be I need to change my logo, right?

    Very good post, Rob!

    • says

      Fasil, I have to confess to leaving my brother’s site (linked) Favicon free for the same reason. Can’t you use your “W”?

      Thanks for the nudge again Rob. I pronounced favicon the same as you. I sure others do too. With GIF (Graphics Interchange Format) though, I’m definitely sticking with the hard G.

        • says

          According to this guy it’s “Jif ” because (he claims!) that’s what the creators called it. http://www.olsenhome.com/gif/

          I’d love it to be an internet hoax because so many cite as truth. Still I’m going with the sensible Oxford dictionary pronunciation with the hard “G”

          Anyway, all those bloggers who say it’s “Jif ” as in the peanut butter probably have no concept of life outside of North America. Jif to us Brits is a cream cleaner that has now adopted the international name of Cif (with a soft “C”…….or is it?).

          Of course, it could be Jif that plastic yellow thing with juice that used to come out once a year on pancake day in the 1970’s. According to my internet research this tradition died out due to the invention of the lemon in the 1980’s ;-).

          Good article Rob.

          • says

            I’m sticking with “gif” – even some of the GIF enthusiasts from the video on that page pronounced it that way.

            Anyway, thanks, as always, for your leftfield interjection, David. :)

        • says

          Jif, isn’t that a cleaning product :) remembering back to the mid 90’s when did Computer Graphics and we certainly all called then ‘G’if’s .. Jif just sounds wrong??

          • says

            Yes, Sean, as David says, somebody very clever decided that it should be called “Cif”. A bit like Marathon becoming Snickers. Yes, Jif sounds wrong but then some people say it that way!

    • says

      Fasil, I was about to say to use the “W”, as David has pointed out. But you also have a little symbol (it maybe too small or thin to be seen at 16×16 pixels). Anyway, as long as the image – whatever it is – fits into a Photoshop document 16×16 pixels then you’re good.

      • says

        Thank you both David and Rob for your wonderful advice….I’ll definitely use my ‘W’….didn’t think of it.

        Thanks so much!!

  2. says

    Cif, jif, Gif, Jif or gif debate aside, the post is great, :-) it is one of those small jobs that I didn’t know how to and never got round to finding out how to, now I do, this page is bookmarked so I can do one for my site in the next few weeks.
    Thanks for the very helpful post Rob

    Cheers
    Andi

    • says

      Wait til we get on to the PNG or ping debate, Andi. Thank you so much for your comment. I believe that all these small jobs done correctly added together really make a professional looking website. :)

  3. says

    Funny enough, I just set my favicon on my site today. It had the basic genesis one. I was mostly frustrated with how Google Chrome caches it and I couldn’t get it to change… I opened an incognito window and that showed me the updated icon. Just a tip for those who may have trouble.

    • says

      Hey Chris, welcome to the site. Good point about favicons being cached and hard to update. The incognito window’s a great idea. I had been putting the favicon address in a browser window, for example, http://robcubbon.com/favicon.ico and then hitting refresh. That does the trick as well.

      Such a good point, Chris, I’m going to add it to the post.

  4. says

    Thank you so much for this article. I have been tearing my hair out for some time trying to get my favicon to show up in the browser tab for my site. As it turns out, I had been saving the favicon file as a bitmap (.BMP) rather than an icon (.ICO), and didn’t have the HTML code to make it show up on my homepage. Your instructions helped me do it on the first try! Putting the code in on all my website pages will take a while, but at least now I know how to do it! Again, thank you, thank you, thank you.

    • says

      Hey, Ken, no problem. I hate to say it, but I’m not entirely sure that you have to put them on every page. I just guess that most people who read this would use WordPress or some CMS in which case it would be easy. If someone lands on your home page and gets the favicon then it would appear on all the subsequent pages. However, if they land on another page then they wouldn’t get it. Anyway, you should convert to WordPress one day, Ken. ;)

  5. says

    Thank you for sharing this! I have been trying to make a favicon for a while now, I looked at so many different videos and websites trying to figure it out but then I read this and I managed to do it! It took a while but I have finally learnt so thank you! This post has been very useful!

  6. says

    Great video Rob, and would it make you feel any better if I told you I have been pronouncing favicon exactly the same way you did in your video, all these years… and I have no intentions of changing that at this late stage in the game… so here’s to a great Favi-Con tutorial! ;-)

    PS: I love swimming upstream…

  7. says

    Rob. Interesting post. I feel that while the information is useful, it may be a bit outdated. I found this amazing PSD template that will convert your high res favicon automatically into the smaller formats once you save for web. This is to go along with HTML5 standards, will use a larger favicon for browsers that support it (Chrome, etc), has a free download for an .ico extention for Photoshop, and most importantly will convert your favicon into an app icon if a person saves your website on their iPad launchpad. Link here: http://drublic.de/blog/html5-boilerplate-favicons-psd-template/

    So if you are comfortable in Photoshop, design at a larger size, and then re-design again for your instructions so that older browsers can get a good, sharp favicon as well. (Hint: designing in Illustrator in pixel preview and then saving as PNG24 with anti-aliasing on will make it look its’ best)

    • says

      Thanks, Jonathan, yes I must admit I wasn’t aware that there is a need to create the favicon in larger sizes today for different devices when I wrote this article. I’ve just had a look at that PSD and it’s clever the way it uses the Smart Object to create all the different sizes you need. It would be good if the same article included all the HTML you need for the head as well.

  8. says

    Wow Rob…

    This is not very easy to do. I mean I have followed your instruction. Watch the video more than once. I can get my favicon to work. It worked on Chrome. I could see it. But it won’t show on Firefox and Safari. What should I do?

    Angela