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 | Size |
|---|---|
| Chrome web store | 128 x 128 pixels |
| Google TV | 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.
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.
Related articles
Favicons in WordPress: how to add and change
Browser tabs contain two elements - the title of your website and a small image known as a favicon. A good favicon makes it easier for users to navigate their browsers and strengthens your brand identity. So how do you add a favicon to your WordPress site? There are three ways of doing it - using the WordPress Customizer, by using a plug-in, or doing it manually. Keep reading for step-by-step…
kozirskyShutterstock How to make a good logo: Tips and suitable software
A logo serves as a figurehead for a company or a brand: it symbolizes the corporate identity and leads the target group to create a positive association between image and brand. As a result, every brand and every company should have a suitable logo. When creating your own logo, previous experience in image editing is not necessary – although it is very helpful when turning your concept into your…
Branding: how effective are the best-known logos
We are constantly surrounded by company logos: but just how closely do we actually look at these graphics? A study titled ‘Branded in Memory’ has gone ahead and tested this: how well can people draw a well-known logo from memory? Over 150 men and women, young and old, attempted this and in part managed to achieve very good results. The main take away was that basic structure and strong colors are…
kozirskyShutterstock Which favicon size should you use?
In order for browsers to display a favicon, it needs to be the right size. In this article, we’ll give you an overview of common favicon dimensions and look at how favicon size differs across various devices and browsers. We’ll also go over suitable file formats for favicons. Read on to find out more about favicon formatting and size standards.
