A favicon is a small symbol with 16 x 16 or 32 x 32 pixels that is used to brand a website. This symbol makes it easier for visitors to find and recognize a page if, for example, several tabs are open in the browser. Because of their small size, favicons work best as simple images or as one to three character text. Favicons are not to be confused with logos, even if they sometimes look the same. Due to its small size and resolution, the favicon may only be a smaller image or part of a company’s original logo.
Why are favicons important?
The word favicon is made up of the English terms “favorite” and “icon”. Favicons are used to uniquely identify a website, which is why they are often shown as bookmarks, tabs, in search menus, as an app icon, browser history or in sales results. These signs are particularly useful on smartphone and tablet displays, as well as on other mobile devices.
Creating a favicon is a small but important step in setting up a company website. It gives legitimacy to the website and strengthens online branding as well as the trust of potential consumers. Favicons are a visual marker for the website. These characters allow web users to easily and quickly identify the page. They combine all the different browser components into a well-marked browsing experience.
A favicon helps with search engine optimization
Favicons are not directly responsible for search engine optimization, but they are indirectly responsible and an important tool for improving search engine rankings. Here are some examples of how a favicon can help with SEO:
User-friendly websites lead to increased usage
A user-friendly website indirectly improves search engine rankings. Having a favicon displayed on browser tabs, bookmarks, history archives, etc. can save users time by making it easy for them to identify and search a website. This increases the likelihood of user interaction with a website. This improves the time spent and the interaction with a website. This means that more eyes will be on a website for longer, which will improve SEO.
A favicon serves as a bookmark
A favicon on a web page offers an advantage over websites that don’t use them. Google’s Chrome browser pulls out certain search ranking signals for websites that are bookmarked on the web. Providers who don’t have a favicon on their website are missing out on the chance to be bookmarked in the Chrome browser. This can be noticed directly in the search ranking. Well-placed favicon bookmarks make a page stand out, making it easier for visitors to remember a page and come back to it. This increases the traffic of a website and the SEO.
Branding and Visibility
A favicon is a visual representation of the website and a company, organization or individual. Using this symbol, a user can recognize a brand and identify with a brand. When SEO is all about branding and marketing. The more visible a website is, the more users are likely to click on that website and remember who the branding belongs to.
Make a good favicon
There are a few things to consider when creating and designing a favicon for a website. Although the sign is small and simple, it can (and should) make a big impact. It is equally important to create the best possible favicon as users identify with the brand. Here are some criteria to consider when creating a favicon:
simplicity
While the favicon is the visual face of a brand, the design should be kept as simple as possible. The best favorites are the simplest. Due to the small size of the favicon and the simplicity of the shapes used, colors are crucial in attracting and getting noticed by potential consumers. Too many details just make the favicon look cluttered and chaotic.
Brand identity
The favicon is the visual symbol for a brand and should visually tell users what a company represents. This sign immediately tells you what a brand is about and what it does. While it is very difficult to do with such a small and simple design, developers should try to be creative. Small, creative icons have great power.
abbreviation
Finding the perfect picture may not be practical for what a company is doing. A common solution to this is to use the first letter of the company name or acronyms. Developers can also use an abbreviation for the company name. Play with different variations and choose the one that works best for you.
Color matching
The choice of colors is also very important. Contrasting colors make it easier for the eye to recognize shapes and the focus of the favicon. Due to the small number of favorites, developers need to present a company clearly to the user. In doing so, the use of colors can be crucial. It should be noted that all browsers display the colors slightly differently. For example, some have a gray, black, or white background overlaid with a favicon.
What size should a favicon be?
In general, these characters are 16 x 16 or 32 x 32 pixels in size. So they can be used in all browsers. However, there are exceptions:
- 24 x 24 px – for Internet Explorer 9
- 32 x 32 px – New Internet Explorer tab, Windows 7+ system tray button and Read Later Safari sidebar
- 57 x 57 px – standard iOS home screen (iPod Touch, first generation iPhone up to 3G)
- 72 x 72 px – iPad home screen icon
- 96 x 96 px – used on the Google TV platform
- 114 x 114 px – iPhone 4 home screen (double the standard size for the retina display
- 128 x 128 px – Chrome Web Store
- 195 x 195 px – Opera speed dial
Image formats used for favicons
Windows ICO
This format is the most commonly supported file. The advantage of the ICO is that it can contain multiple resolutions and bit depths, which works very well and is especially useful for Windows. ICO also offers a 32-pixel icon that is useful for Internet Explorer’s Windows 7 system tray. It is also the only format that the element does not use.
Portable Network Graphics (PNG)
The PNG format is useful for a number of reasons. No special tools are required to design, which makes the format very user-friendly. It gives us the smallest possible file size and supports alpha transparency. However, a major disadvantage of this style is that Internet Explorer doesn’t support a PNG file, it only supports ICO files.
Scalable Vector Graphics (SVG)
This format is supported by Opera and some other browsers.
Graphics Interchange Format (GIF)
There are no advantages to this format outside of its use in old browsers. While animated GIFs are meant to draw more attention to users, they are more likely to irritate visitors. The general consensus is that they are in no way beneficial.
Joint Photographic Experts Group (JPG)
Can be used anywhere. However, the resolution quality is lower than with PNG.
Animated Portable Network Graphics (APNG)
According to foodezine, this is an animated version of PNG. Supported by Opera and Firefox.
Using a favicon generator
There are numerous free and paid favicon generators available on the web. With a favicon generator, users can create favicons for personal or commercial use. The generator should be constantly updated to keep up with the latest HTML5, CSS, and JavaScript techniques.
Creating a favicon for HTML is straightforward with these tools and only takes a few minutes. In most cases it is sufficient to specify the image format and the pixel size; some generators allow further settings. The images are then automatically generated for the familiar desktop browsers, tablets and mobile devices.
Once the favicon.ico file has been created, it can be uploaded to the root directory of the website.
