What is AND how to make a favicon ?

What is and how to make a favicon

What is a favicon

‍

Favicon is a great way to stand out among the growing competition in search results and in the browser bar. It's about promoting your brand and building brand awareness with the user browsing the web every day for information, service or products.

‍

What is a favicon ?

This is the icon that appears in the browser bar and next to the domain name in search results on both phones and mobile devices. It allows users to associate a company they already know very well. It allows building brand awareness.

‍

Does the website need a favicon ?

Yes definitely every website should be equipped with this little icon. It defines identity and, among the many tabs open, allows the user to stand out or be reminded.

‍

What should the favicon look like ?

When preparing the icon, we should remember that it is not a logo and it does not have to be an exact reproduction of the mark. The icon is supposed to look good in a small size on the browser bar, so it is a good idea to simplify the mark so that it is readable in such sizes.

‍

The basic feature of a favicon is simplicity and readability while maintaining the meaning of the brand and logo. It should be a simplified form of the logo presented in such a way that the user can easily associate the icon with the logo. Color is of great importance here, and it is worth using the favicon's main brand background as it will improve brand recognition.

‍

What is favcion ? An icon in the browser bar.

‍

What are the sizes of favicon ?

Square formats are used as standard, viz: 16x16 or 32x32 px. The graphic format ultimately uploaded to the server should be .ico extension. Favicon can also be transparent i.e.: without background which blends better with the browser bar background.

‍

Generators

In addition to graphic programs in which we can prepare our icon, we can use programs such as favicon generators like : favicon.io or favicon.cc

‍

How to prepare favicon ?

You just need to prepare the icon of your site in a graphics program in the desired size and export it to a png or jpg file. Then convert the file to .ico format. A popular program for converting ico is convertico.com. The second way is to rename, for example, in Total Commander to .ico

‍

How to add a favicon to a page ?

There are several ways to add an icon to a page.

‍

Method 1:

The image file in the form of name.ico should be placed in the root directory of the domain in the public_html folder. Then, in the code of the page in the <head> section, place a reference to the file in the form of :

‍

< link rel="shortcut icon" type="image/png" href="sciezka-do-pliku-favicon.png" >

‍

How to add favicon to wordpress ?

For wordpress, in editing the theme in the settings, we should be able to upload an image file to the appropriate field. Just check the settings or site identity, upload the icon and save the changes.

‍