When you visit a website, the tiny little image in the browser tab or bookmarks panel is called a favicon. It’s one of those nice little touches that good web designers add to a website, and an easy thing to overlook for the not-so-good web designers.
Back in the olden days of web design – meaning over 5 years ago – adding a favicon meant you needed to save a super simple 16 x 16 or 32 x 32 pixel image in the mysterious .ico format. This wasn’t always the easiest thing to do as Photoshop wasn’t able to export this format out of the box. But with the help of a Photoshop plugin, or a nifty website that generated the .ico file for you, you were able to generate the image required to display a favicon on your website. This .ico file then had to be to the header of your website, and voila!
Fast forward a few years and things have gotten easier, and a lot more complicated. Instead of browser tabs there are tons of other uses that also need favicons. The standard browser tab favicon is still in use, but now there are Apple Touch icons of varying sizes (meant for iPads, iPhones and Safari’s Favourites tab) and Microsoft specific favicons.
You could generate the huge number of icons needed by hand, but why bother?! Favic-O-Matic is my new best friend when putting the finishing touches on a website. There’s a simple favicon generator which creates the trusty 16 x 16 and 32 x 32 .ico files, but that’s pretty 2002.
The real beauty of Favic-O-Matic is the “Every damn size, sir!” feature. You upload your logo, enter in your website’s URL and title, select a background colour and a .zip archive starts downloading almost instantly that contains 19 different versions of your favicon and the full HTML code to insert the favicon into your website.
It’s seriously amazing and if you need a favicon generated, for any purpose, you need to give it a try.
No HTML coding, no tedious Photoshop resizing of images, just 5 seconds of work and you’re done. It’s almost magic.
Sure there are WordPress plugins to do most of this work for you, but there’s nothing faster and more efficient than a few lines of code and images perfectly optimized the each spot they are being used.
If you want to create your own favicon files manually this awesome cheat sheet contains an obsessive list of all the different favicon sizes and their uses.
