Web Design: What is a Favicon?

18th September 2013


Every web design project is made up of many smaller design projects. In this blog we’ll be looking at one of the smallest of them all – literally – and explain the role that the favicon has in your website design and branding strategy.

What is a Favicon?

A favicon, short for favourite icon, can also be called a shortcut icon. It’s the small icon, typically 16 x 16 pixels, that appears in your web browser’s address bar next to the URL. It helps you to identify a website visually, which is particularly helpful if you use bookmarks or want to quickly look through your browsing history to find a particular website.

As browsers have become more sophisticated favicons have adopted other uses and sizes. These include, for example, a 57-pixel iOS format, a 72-pixel iPad home screen icon and icons shown on new tabs on various browsers.

Why have a Favicon?

Ensuring that your web design includes a favicon has various benefits. It means that regular users – particularly those that are likely to want to bookmark your page – will be able to find you quickly and easily.

It’s also a great way to ensure that your website looks professional. The BBC website, for example, features a simple BBC logo favicon which reassures users that they are on the right site and continues the company’s iconic branding.

A favicon also demonstrates to site visitors that you have a well developed branding strategy and have worked hard on attention-to-detail. This kind of focus is reassuring to potential customers. Given how simple a favicon is to develop, this is an easy part of your web design to improve.

Favicons Branding Identity

Whilst there are numerous ways to approach designing a favicon, the 16 x 16 pixel limitation means that you need to keep it relatively simple. However, this is a lovely touch and a good way to express your branding identity in another format.

It’s normally best to focus on scaling down your logo so that it’s distinctive at 16 pixels. If your logo is largely typographic (text based) then you may need to develop a helpful image or shape that can serve as a favicon. Alternatively, you can just follow the BBC’s lead and scale down your text-based logo into the lower resolution.

How to Choose a Favicon?

The best way to get this part of your web design right is to speak to your web designer. If they’ve worked on your branding strategy then they’ll probably have some ideas about what might work best. Together you’ll be able to agree a favicon image that you’re happy with, scale it for the various functions that we mentioned earlier and get it live on your website.

If you have any questions about web design or branding then we’d love to hear from you. We’re a leading London web design company with a proven reputation for helping our clients grow their businesses through exceptional and professional website design.