God is in the Details

The world of favicons and home screen icons
Brand Identity - Responsive Branding
Brand Identity – Responsive Branding

In the age of digital branding, there are more opportunities and outputs to communicate and reinforce your brand to your target market.

The purpose of branding is to create a unique identity that differentiates your company and product from all those competing for the same customer base. It is there to promote quality that captures loyalty, and in turn generates business.

As more and more of our daily activities revolve around the internet, taking advantage of the opportunities to apply your brand mark is key in ensuring that every interaction with your customers is signalled with your unique visual identity. From your Twitter profile image to your email sign-off, keeping your branding consistent and visible is crucial to reinforce your user’s perception of your brand.

Favicons and home screen icons are some of the more overlooked ways of maximising your reach to users. Today’s post is a love letter to these tiny champions of branding.

What’s a favicon?

If you’re out and about on the internet, you’ve probably seen a favicon or two in your time. In fact, there’s one on this very website.

‘What’s a favicon?’ I hear you ask. A favicon is the name for that tiny icon next to the your website name that appears in the browser tab.

The favicon hit the internet in 1999 – the same year we did, in fact. Favicons came into play when Microsoft released Internet Explorer 5. Back then, bookmarks and pages that the user saved were always referred to as “favourites”. The icon that displayed next to the page and made it identifiable in the list was the “favourites icon”, which over time has become “FavIcon” – just don’t ask us to tell you how it’s pronounced, because we can’t agree on what’s right.

Back in the days before Google Analytics and the invention of fire and the wheel, favicons were used to assess traffic levels to a website. They could count the number of users who favourited or bookmarked the page, thereby indicating how many people had seen and liked them.

These days, we have far more sophisticated tools available for assessing website traffic, and yet favicons can still be found in all modern browsers. Even at just 16×16 pixels, they help to identify your website and mark it out from all the others in open browser tabs – and of course they still inhabit their traditional role of being the icons that label your bookmarks, so that you can easily pick out the ones you’re searching for from your list.

Home screen icons work in pretty much the same way as favicons, but instead of being limited to a mere 16px square, they consist of a range of sizes to cater for the varied screen resolutions available on our mobile devices. So when you bookmark your favourite web page to your home screen, you get a beautiful icon that sits perfectly amongst all your other apps.

Why are favicons worth it?

If it’s not essential to have a favicon on a website, why have one at all? A favicon is a little bit of branding that goes a long way. It provides another opportunity to make visible your brand and provides instant recognition to your users and customers that they are in the right place.

It also acts as a little touch of polish to your site, making you look more professional, which will increase people’s trust in you. But instead of a quirky add-on, it should also be treated with as much care and consideration as all of your online brand identity.

People process images more than 60,000 times more quickly than we absorb information from words. Every organisation wants to stand out from the crowd – and in a sea of browser tabs,  that’s what a favicon will do for you.

If you don’t have a favicon, your browser will display a blank page next to the title of your website. You don’t need us to tell you that that can make you look generic and forgettable, because you won’t be visually different to your competitors. But a favicon also lends an air of credibility, too, and shows people that you know how to market yourself online.

Home screen icons for the iOS and Android

Similar to the use of the Favicon in visually referencing a bookmark, creating a home screen icons for your website enables you to provide a visual bookmark for the home screen of your mobile device that looks just like an app.

As I mentioned earlier, home screen icons are larger than favicons – well, they have to be, they need to be touchable by clumsy thumbs. For Apple devices with retina screens, home screen icons are 120×120 pixels, though a few of those pixels will be shaved off by Apple’s famous rounded corners.

Icons in iOS are also subject to automatic styling so that they fit in with the rest of Apple’s aesthetic: as well as the smooth corners, icons are automatically given a drop shadow, and some acquire a reflective shine. If that interferes with your branding, don’t worry: there are ways of stripping away the iOS styling away so that your icon only shows what you put there.

Things are a little different for an Android phone. Because it’s open-source, that means any number of screen sizes could be reading your icon file, so, it’s generally best to use a 192×192 pixel icon size. That’s the highest resolution they currently use, so it’ll make sure that you look good whoever’s looking at you.

So whats the worst that can happen if I don’t have a Favicon or home screen icon?

Don’t worry, your site won’t explode if you don’t have a Favicon or a home screen icon.

As I said, these icons are not essential per se, but referring to default icons such as a blank page in the browser tab or a fuzzy pixelated favicon stretched to fit your mobile’s home screen defaults is not the best brand message to communicate to your customers or users.

Siôn Meical
Designer
Date Posted
14th February 2016
Service Tags

Related Blogs

Responsive Branding

Making your brand fit for purpose
14th October 2016

Lifestyle Branding

Tapping into your consumers hopes and dreams
14th March 2016

What’s in a name?

More than you might think…
4th February 2016