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.
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:
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:
All I have to do is create that as a 16 x 16 pixel or 32 x 32 pixel square document in Photoshop:
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.
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. https://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
backgrounddeclaration puts the icon’s image in margin: 0 0 7px;adds a bit of space between each line of the unordered listpadding: 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!
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!
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.
Don’t tell me some people say “jif”, David?
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.
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. 🙂
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??
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!
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.
Thank you both David and Rob for your wonderful advice….I’ll definitely use my ‘W’….didn’t think of it.
Thanks so much!!
really a nice article.. informative for new webmasters..
Thank you, Deepanker, I’m glad you found it informative.
Really Awesome,
Love this Post.. Thanks
Thank you so much, Nishant.
Great and useful information I want favicon for my blog
Glad you found it useful, Abdullah.
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
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. 🙂
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.
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, https://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.
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.
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. 😉
Just tried clicking on site links on my home page, and every page has the favicon! That saves a lot of work. Thanks again!
That’s good to hear, Ken, thanks. 🙂
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!
You’re welcome, Jerica. So glad I was the one to get you to do it!
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…
Thanks Brendon, I’m glad I’m not the only one!
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)
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.
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
on this one the favicon is okay and shows up
http://angelamccall.com/wp-content/uploads/2013/06/chrome-1.png
but on this one the favicon appears distorted
http://angelamccall.com/wp-content/uploads/2013/06/chrome-2.png
when I view my page it shows up in Chrome
http://angelamccall.com/wp-content/uploads/2013/06/chrome-3.png
but it won’t show on Safari or Firefox. it keeps showing that stubborn G icon still.
Hello Angela, it works for me on Safari and Firefox. And I can’t see what you mean by distorted. The reason it’s not working is probably cache.
Go to the address of the favicon http://angelamccall.com/wp-content/themes/executive/images/favicon.ico and refresh and then it’ll work.