What is a favicon? A defin­i­tion and examples

A favicon is much more than a simple design. These small images serve as an ori­ent­a­tion 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 es­pe­cially helpful when users have multiple tabs open. Favicons are often a sim­pli­fied 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 sim­pli­fied version of your logo.

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

Favicons are important for busi­nesses and websites for the following reasons:

• Pro­fes­sion­al­ism: a pro­fes­sion­al 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.
• Iden­ti­fic­a­tion: with favicons, users can find websites much faster when they have lots of tabs open in their browser. They also make websites instantly re­cog­nis­able in search engines or apps.
• Strengthens a company’s brand: a good logo ensures that your website is re­cog­nis­able and plays a role in decision-making. When es­tab­lish­ing an online presence, favicons are just as important as logo designs for startups and es­tab­lished busi­nesses alike.

Favicons can in­dir­ectly affect search engine op­tim­isa­tion. 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 re­cog­nis­able at first glance. This helps to avoid confusion and ensures con­sist­ency 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 ac­cur­ately 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 mean­ing­ful 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 con­trast­ing 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 res­ol­u­tions. This format is supported by most browsers. You can also use .png, .gif or .svg. These three formats aren’t, however, com­pat­ible with all browsers. Due to its low res­ol­u­tion, 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.