What is a website favicon and how to add it to your website

Favicon is an integral part of any website. WEDEX will tell you how to create and install a favicon and what are the peculiarities of working with it.

What is a favicon?

A favicon or favorite icon is a small 16×16 pixel image used in browsers to identify a page or website. A favicon is usually displayed at the top of a web browser on tabs, and can also be seen in the bookmarks bar, in the browser history, and on Google search pages next to the URL.

A brief history of the favicon

The first version of the favicon appeared back in 1999. Back then, Microsoft presented web resource icons for its Internet Explorer 5 browser. Even then, the favicon had a standard size of 16×16 pixels in the ICO format. In order to use the icon on your website, you had to add the image to the root directory of the web resource, and the browser would automatically display it.

From 2005 to 2011, there were several «waves» of icon standardization that introduced new requirements for these images (more on this below). The main advantage of introducing a single standard for favicons was the correct display of icons in different browsers and devices. Before standardization, favicons could be displayed correctly in some browsers and not in others, which greatly affected the user experience.

Standardization also helped to create uniform requirements, which simplified the work for web designers and developers, as they no longer needed to create different favicons for browsers and devices.

What is a favicon for?

And although the icon is quite small, it has a serious impact and significance for the overall visual effect of your website. As surprising as it may seem, a favicon can have a significant impact on the user experience, branding, and expertise of a website.

User experience of site visitors

The favicon acts as a bright visual cue. This small image will help you distinguish your site from any other much faster, and make it easier to find among the links in your history or bookmarks bar. The main task of the favicon is to stick in the user’s memory, create a connection between the visual image and the brand, and simplify the search for a web resource on the web.

Branding and favicon

A truly holistic brand has many small details that distinguish it from other brands. A high-quality favicon is the key to a monolithic design. The icon of a web resource is the case when the phrase is appropriate: «Size is not everything». A designer has only 256 pixels to create a working website icon. A favicon will help to make the appearance of the site complete.

User confidence

A favicon is an image, which means it has no impact on cybersecurity. However, it provides something more important – a sense of security. As practice shows, users tend to favor websites with a favicon. This is because this small image makes it clear that the user is on the page of a specific brand.

User feedback

Favicon is a powerful brand indicator that allows you to stand out from other websites. As we have already found out, the display of favicons is not limited to the search page, which means that users will see them often. The task of a designer or developer or business owner is not to make some bright spot to attract attention, but a real Internet beacon that will serve as a visual indicator for the user.

How to create a favicon?

There are several ways to create a favicon:

• order a badge from a designer;
• create a favicon yourself;
• create the badge yourself, but with the help of online services;
• use ready-made images.

It’s a good practice among UI/UX designers to create a web resource icon as part of brand design development, so often ready-made icons can be hidden in project files. If they are not, you will have to contact a professional and create a unique favicon.

You can create a favicon yourself: you need steady hands, at least basic knowledge of Photoshop or other editors, and some free time. Often, the icon is created on the basis of the brand logo, so if you don’t have enough time right now and need a temporary favicon, you can simply make a small version of the main website logo.

Online services can also help, where you can quickly make a favicon from a ready-made image. For example, you already have a company logo and need to quickly crop it. In this case, you won’t need any additional editors.

Another option would be stocks and sites with free icons. The uniqueness of such a favicon will be minimal, but it will be more than fine as a temporary solution.

Favicon size requirements

Favicons have a standard size of 16×16 pixels. However, these sizes can vary from browser to browser and by purpose of use. Therefore, Google recommends using a favicon larger than 16×16 to ensure that the icon does not lose quality when scaled. Here are some examples of scaling to help you understand:

The main requirement is that the favicon be square.

What file types does favicon use?

The first standard extension for favicon files was .ico, which has been in use since 1999. Over time, it was replaced by more modern and flexible formats: .png, .jpeg, and .svg. Some browsers can even display favicons created in GIF format, i.e. animated images, but the size of the icon prevents viewing such favicons. Let’s talk more specifically about favicon formats:

• ICO is a favicon format from Microsoft. Although some consider it outdated, it is still actively used for website icons.
• PNG is one of the most popular formats for icons. This simple format usually provides high quality favicons and offers advantages such as small size and the ability to create icons with transparent or translucent elements.
• SVG – files of this format are known for their lightness. The biggest advantage of SVG is the speed of loading high-quality images without losing the speed of the site itself. Not all browsers used to be able to process SVG favicons, but the situation is changing.

Tools to create or generate a favicon

There are two ways to create a favicon yourself: desktop applications and online services. Let’s consider both options.

Graphic editors for favicon

Any vector and raster editors will do. Photoshop, GIMP, Figma – all these tools can be used to create a favicon. The main thing is that the icon should be square and fit the specified size.

Online services

They usually have a reduced functionality of graphic editors, but do not require additional installation on a PC and allow you to make a favicon directly from your phone or any other device. Here is a small selection of online icon generators.

RealFaviconGenerator

The service offers the possibility not only to create a website icon, but also to see how it will look in different places in the browser, in light and dark themes, and on different devices.

FAVIC-O-MATIC

A simple service with a bunch of settings for creating multiple favicons at once. It doesn’t provide a preview option, but collects all the selected formats into one archive at once.

FAVICON.IO

There are tools for creating favicons, as well as converting PNG to ICO, text format to ICO, and even emojis to ICO. You can also choose the background and color of the future website icon.

Recommendations for creating a favicon

Even the best favicon can be made even better! Here are some tips on how to do it:

• Simplicity – due to the small size of the favicon, the design requires what is called «laconic simplicity». Try to make your website icons clear and simple, without overloading them with unnecessary elements and «decorations».
• Identity – the favicon should reveal the identity and spirit of your brand, website, forum, landing page, and anything else. It is important that the favicon uses the same color palette as the rest of the website design.
• No text – if possible, do not use more than one letter in the favicon, because the icon size is too small to read anything. Three letters is the maximum you can try to fit in a favicon. In practice, favicons often contain either a logo or a single letter.
• Use of a logo – while using a logo is a really working strategy, in order to make the logo read well on a small image, some changes need to be made. Most likely, you will have to simplify the logo and remove some complex or too small parts of it.

How to add a favicon to a website?

If you created a website using a website builder, you can add a favicon through the builder’s admin panel. For example, on the latest versions of WordPress, you need to go to the admin panel and select the «Settings» or «Customize» item in the right menu and the «Site Icon» sub-item. There you can upload the favicon.

If your site is written by yourself, you can add a favicon by simply manipulating the file that contains the <head>…</head> settings. These can be files index.html, home.html, main.html – that is, the files of the main page. In the <head> setting, add the following line:

<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon”>

For the favicon to work, you need to upload it to the root folder of the site. The path will be as follows:

https://example.com/favicon.ico

The name of the icon should be favicon.ico.

Conclusions

Favicon is an essential attribute of any website. Its presence is taken for granted, but its absence immediately catches the eye. Thus, a high-quality favicon will help to form an idea of your website and brand, and therefore you should spend time creating and implementing it into the overall design of your web resource.

Oleksandr Romanenko

Team Lead/Senior SEO specialist

Author's page