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.
What does favicon mean?
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 recognize 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 “favorite” and “icon”, or the other way round “icon for favorites”. This is because they’re not only displayed in the tabs of browsers, they are also shown in the favorites list. Additionally, favicons are also used as symbols for apps and displayed in search menus and browser histories.
Get the perfect favicon for your website for free with the IONOS Favicon Generator. In just a few clicks, you’ll have an impressive favicon that works across different browsers.
Why are favicons important for websites?
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 recognizable in search engines or apps.
- Strengthens a company’s brand: A good logo ensures that your website is recognizable 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.
Do favicons affect SEO?
Favicons can indirectly affect search engine optimization. While these small graphics don’t affect ranking directly, a good favicon can still have positive effects on your SEO for the following reasons:
What should I be aware of when creating a favicon?
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 recognizable 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 colors: The colors you choose should match your corporate visual identity. However, you still have some wiggle room. You should try to use contrasting colors 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 gray, which can result in subtle changes.
What size favicon should I use?
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:
|Browser or device
|Chrome web store
|128 x 128 pixels
|96 x 96 pixels
|Internet Explorer 9
|24 x 24 pixels
|iPad home screen
|72 x 72 pixels
|iPhone (older models) and iPad Touch
|57 x 57 pixels
|iPhone 4 home screen
|114 x 114 pixels
|Opera speed dial
|195 x 195 pixels
Learn how to add a favicon with HTML in our Digital Guide.
Which formats are supported?
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.
What are some examples of popular favicons?
To show how diverse these little icons can be, we’ll take a look at three well-known examples.
Google uses the letter G (for Google) and the same colors that can be seen in its standard logo. The rainbow-colored design of the favicon makes the search engine instantly recognizable.
LinkedIn goes in a different direction and shows that you don’t always need to use the first initial or beginning of your company’s name. The white “in” on the blue background distinguishes LinkedIn from other brand images.
YouTube shows that letters aren’t the only symbols that can be used in a favicon. The play button, which is also part of the company’s logo, is instantly recognizable and stands out on any browser.