The Fine Art of Favicons

Most people don't think twice when they see this little icon, but personally I find it one of the most interesting and challenging parts to create when designing a good website.

What is a Favicon?

A favicon is a small square icon associated with a website or a web page. In a browser, it is typically displayed before a web page’s address in the address bar and also before the name of the web page in the list of bookmarks, if you add it your Favorites. So 'Favorites Icon' is where the name Favicon comes from. Browsers that have tabbed document interface show a page’s favicon next to the page’s title on the tab as well.

Why do I need one?

Favicons are just another extension of your brand on your website. When done right you can make it so you always have some eye catching representation of your company on the screen to help viewers build some visual recognition with you brand. Even when someone has left your site your webpage the Favicon will still be displayed in the browser’s URL bar, next to the page’s title in a tabbed document interface, and next to the site’s name in lists of bookmarks.

Creating a good Favicon

Favicons are easy to make, but it's hard to make a good one.  With all the advances in computer screens, tablet and smart phone screens, you're still stuck with a limited size canvas to work with. And when I say limited, I mean it! Favicons are only a 16x16 pixel square, so even if you have the best display in the world you're still working with the same amount of pixels. A key thing to keep in mind when creating a Favicon is to make sure it is  both visually appealing and fits the design or logo of a your webpage.

Make your Favicon stand out!

Keep it Simple and Practical:

There's nothing wrong with a clean, simple and sophisticated Favicon. If your logo is strong, well-recognized and can stand out in a small format it can be the most effective way

Bold,Colourful, Eye Catching:

A bight colored Favicon will always jump off the screen.

Animated:

Creating an animated Favicon isn't any different than creating a animated gif, you just need to plan out the movement and timeline slide by slide. They are just built on a much smaller scale than most. You can keep the movement subtle to reenforce the concept of the logo…

or make it more of an impact with lots of movement and colour.

Here are a few Favicons off the websites of well recognized brands. See how many you recognize.

Make your own.

If you're interested in trying to make your own Favicon, here's a couple ways to get yourself started.

There is a free plugin for photoshop that allows you to export as a Favicon files type (ICO): http://www.telegraphics.com.au/sw/

My personal favorite is to start from scratch and use this free online ICO generator: http://www.favicon.cc/

I hope you found this useful and are a little more interested and appreciative of that little icon with big potential.