What is a favicon and how can it help your brand?

Favicons have regained attention recently thanks to Google, and they were a topic of much discussion at a recent website workshop I attended, so I thought I’d address a few key questions about favicons and their role in branding.

So what is a favicon?

Favicons are those small, square icons displayed next to website page titles in browser tabs and bookmarks. ‘Favicon’ is short for ‘favourite icon’.

Why do I need one?

All businesses, small or large, should have favicons as part of their websites. Favicons are great for helping with brand recognition and useability, and they are becoming more important for web browsing. In the last month Google has introduced favicons to search engine results pages. Initially this is only available on mobile, but it will ultimately be rolled out more broadly.

Favicons appearing on search pages is valuable in building brand recognition. Ads will also be more obvious and easy to distinguish from organic results. Users will benefit from being able to scan icons to search for the information source they want.

So, how do you take advantage of this new Google search page feature? Make sure your website has a custom favicon and that it is optimised for maximum impact.

How can a favicon help my brand?

Favicons can help people to identify and remember your website, as graphics are more memorable and recognisable than text. A favicon will form a strong part of building your brand profile in the mind of the user. This helps with future recognition if the person wants to find you again, and it connects your brand identity with your area of expertise and products or services.

Having a favicon also looks more professional which adds to your credibility. In search results you don’t want your competitors to have favicons and you don’t. It also helps you put your small business on the playing field with bigger businesses.

Design your favicon for maximum impact

A favicon represents your brand in its simplest form – it’s your website’s miniature ID. As favicons are so small, they need to be very simple and strong. Your favicon should be to be identifiable and effectively represent your brand identity.

Your social media icon and favicon would often be the same graphic, to help with building brand awareness. And like your social media icon, your favicon could be your logo or part of your logo – perhaps the graphic element if you have one, or the first letter or initials of your business name.

As colour is the most memorable part of any brand, using your primary brand colour for the favicon background can be a good idea. Or if your graphic can be reproduced large enough within a square shape, a white or transparent background can emphasise the unique and recognisable shape.

Modern logos are designed with social media icons and favicons in mind, and developed as part of the suite of logo files. If you don’t have a suitable, simple graphic component you may need to have one designed, or your brand identity refreshed to incorporate one.

How to create a favicon for your website

You may be able to use your social media icon graphic. The main visual element will need to be prominent, so the social media icon would need to be cropped as tight as possible – no wasted space!

There are various favicon generator tools available online you can use. Or you could go back to your logo designer to have one created, or your social media icon file resized. Alternatively you can engage a graphic designer like me to create one from your logo file.

Favicon optimum size and file type

Favicons are generally used at 16 x 16 pixels, or 32 x 32 pixels size. Previously they were .ico files, but most browsers now accept .png or .gif. As different devices can display different quality favicons, you may require a larger file size than 16 x 16 pixels or 32 x 32 pixels. Check what is required for your website platform to work across various browsers and devices, or ask your web developer.

Once you have your favicon you will be ready to add it to your website (or to get your web developer to!).

favicons-branding-blog-article-maybury-ink.png
 
Favicons-Maybury-Ink-brand-branding-post-image.jpg