Making Your Site Stand Out With Favicons
Posted 2010/03/02
If you don’t know what favicons are, look up at your tabs. You’ll notice that some of them, or at least this one, will have an icon. These are called ‘favicons’ (short for “Favourite” icon) . You might notice some tabs that don’t have a favicon. To me, sites with favicons seem more professional, complete and polished. Also, they make it easier for me to negotiate my tabs. Have a look at my tabs at the moment:
Notice how one of them has no favicon and a particularly unhelpful title. Now I’ll have to click on that tab (or press CTRL+3, or whatever)
to find out what it is – how annoying, I shouldn’t have to do this.
Because I can tell that you’re smart – I know that you want to use favicons on your site. It’s pretty easy – just create the icon and add some codeThe easiest way to get some favicon action is to use an online ico generator, here are some:
Then just add a some lines of code to your template:
<link rel="icon" href="http://yoursite.tld/favicon.ico" type="image/x-icon">
It’s worth noting that some browsers automatically search for “favicon.ico” on the document root of your website so it might be a good idea to name it “(httpdocs)/favicon.ico”. If you don’t want to do that, you can save it anywhere and just use a PNG file, just change the MIME type:
<link rel="icon" href="http://yoursite.tld/favicon.ico" type="image/png">
I personally prefer to edit my favicons locally, so I can make them transparent and high resolution for extra shine. Keep your eyes out for a post on that.
