You might already know that our brains process images faster than text, but MIT researchers recently discovered the processing speed is faster than even they suspected. It turns out the human brain can process images seen for a mere 13 milliseconds! As a website designer, understanding the power of that processing speed equals better websites and branding for your clients.
Short for “favorite icons,” favicons are the small images/icons found next to a URL address in the browser favorites (aka bookmarks) list. Until recently, favicons were relegated to the “nice to have but not a priority” category, but today these tiny branding powerhouses stake their claim on bookmarks, tabs, URLs, and more.
Savvy website designers understand the favicon is an important aspect of an effective online presence.
3 reasons to include favicons on websites
- The website will stand out (i.e. on bookmark lists and tabs).
- Favicons provide more effective branding by allowing users to quickly identify the business and website. Think about when you’ve scrolled through a seemingly endless list of bookmarks or tried to find a specific website when there are 20 tabs open — it is much easier to identify a site by the favicon image than by reading through everything (suddenly the 13-millisecond image processing speed got a lot sexier, didn’t it?!)
- The website looks more professional and credible.
Designing your favicon
Hmm…what image to choose for the favicon? A good place to start is the business logo, which probably already has some brand recognition going for it. You might choose a memorable element of the logo — like Facebook® designers did when they used the “f” in the Facebook logo for the social giant’s favicon, or like our creative team did by selecting the fun GoDaddy Head in our logo to represent our brand in the faviconosphere.
Once you’ve picked your image, the real fun begins. It’s pretty easy to create a favicon. Basically, it’s just a square image measuring 16-by-16 pixels (the standard for Web browsers, although you can design favicons in a variety of other sizes for use on multiple platforms), saved as an .ico file — a container file that holds two bitmaps and the image mask used to create the saved icon. (Here’s a handy site for converting files from PNG to ICO.) You also can save Favicon files in .png (recommended second to .ico), gif, .jpg, and other formats.
You can use your favorite design tool to whip up a favicon from vector scratch or play around with some of the plugins on the market. I’m all about full creative control, so I like using this Adobe® Photoshop® plugin for favicons. If you’re using a WordPress site, you can check out these favicon-generating plugins. If you need a little more help, visit the online favicon generator, favicon.cc. It’s free, and it lets you create images with a basic user interface, import your own images, and even add animation.
However you choose to create it, adding a favicon to a client’s website is no longer an optional task; in today’s competitive online space, favicons are trusty tools in the arsenals of designers who are committed to arming their clients with all the tools they need to stand out on the Web.