What is a favicon? A definition and examples

A favicon is much more than a simple design. These small images serve as an orientation marker and have a positive effect on SEO.

A little image with a big effect. A favicon is a small icon shown in a browser tab and gives users an overview of what websites they have open. It’s especially helpful when users have multiple tabs open. Favicons are often a simplified logo or design that allow users to quickly recognise a website.

To create the right favicon image for your company, you first need to think about the visual branding of your company. Since the icon is small, large and detailed logos are difficult to depict properly. In such cases, you can use a simplified version of your logo.

The meaning of favicon is easy to see when we take a closer look at the term: it’s a combination of the words ‘favourite’ and ‘icon’, or the other way round ‘icon for favourites’. This is because they’re not only displayed in the tabs of browsers, they are also shown in the favourites list. Additionally, favicons are also used as symbols for apps and displayed in search menus and browser histories.

Favicons are important for businesses and websites for the following reasons:

• Professionalism: a professional website should have a favicon. It improves users’ trust in a brand and shows that a company cares about small details. Even though most people may not be able to explain what exactly a favicon is, they will instantly notice if a website isn’t using one.
• Identification: with favicons, users can find websites much faster when they have lots of tabs open in their browser. They also make websites instantly recognisable in search engines or apps.
• Strengthens a company’s brand: a good logo ensures that your website is recognisable and plays a role in decision-making. When establishing an online presence, favicons are just as important as logo designs for startups and established businesses alike.

Favicons can indirectly affect search engine optimisation. While these small graphics don’t affect ranking directly, a good favicon can still have positive effects on your SEO for the following reasons:

There’s no hard and fast rule about what makes a good favicon. Many companies use their logos as their favicon, but that only works if the logo is still visually appealing when it’s smaller and in a different format. Below are some basic guidelines to follow when creating a suitable favicon image:

• Corporate identity: a well-designed favicon is part of a company’s corporate identity. Even if it’s not possible to use your standard logo, the design you choose should still be similar and recognisable at first glance. This helps to avoid confusion and ensures consistency between your favicon and other visual branding assets your company has.
• Less is more: favicons are very small. Elaborate designs and details result in a cluttered display and won't accurately reflect the original logo design. One option to avoid this is to use the initials of your company. Since you can very rarely use your company’s full name in a favicon, initials or a simple yet meaningful design is the best option.
• Choose the right colours: the colours you choose should match your corporate visual identity. However, you still have some wiggle room. You should try to use contrasting colours as they draw more attention. You should be aware, however, that different browsers will display the favicons in different ways. The miniature icons may be displayed in white or grey, which can result in subtle changes.

If you want to add a favicon to your website, you need to pay attention to the size of the favicon. Standard sizes are 16 x 16, 32 x 32 or 48 x 48 pixels, but some browsers are different. Here are some examples of different sizes that are used:

In general, favicons can be saved using different formats. However, the most common format is .ico, a container for images which allows you to use different bit depths and resolutions. This format is supported by most browsers. You can also use .png, .gif or .svg. These three formats aren’t, however, compatible with all browsers. Due to its low resolution, the .jpg format isn’t always a good idea though.

In our Digital Guide you can find numerous articles to help you navigate the online world. Alongside a useful website styleguide, you can also find a guide on how to add favicons on WordPress.