Nowadays, it is necessary to keep in mind that favicons are not only used as a bookmark icon in the browser on the desktop, but are also used as, for example, various desktop shortcuts or so-called touchicons. These are used on mobile devices, where we have, for example, a desktop shortcut to our website. And believe me, there are many types of touchicons and the like.
The easiest and surest way is to create a single icon in .png format the recommended size 512x512px and have all other necessary dimensions generated using the online https://realfavicongenerator.net/ . By uploading an icon and filling in a simple wizard, the tool will generate all the necessary dimensions of icons, which we will insert into our folder with assets (preferably in our own folder, eg “fav”) and insert the generated code into HTML, which may look something like this:
If we want to simplify the whole thing into one sentence, the code defines the paths and dimensions to the icons, and each device already chooses the icon that suits it best.
Don’t forget the site.webmanifest
The smart ones have noticed that in addition to the image files, we’ve also generated a site.webmanifest file. It provides information about our application and is a key part of progressive web applications, which we will definitely talk about in another article. Now it is essential for us to set the paths to the icons correctly and, ideally, to have at least the name of the application filled in, and this will be used, for example, when the user adds our website as a shortcut to his mobile phone – this application name. They also definitely recommend filling in at least the following:
In addition to the site.webmanifest file, there is also a browserconfig.xml file, which is used primarily for Microsoft applications. Here, too, it is important not to forget to set the paths to the individual files correctly and to check the TileColor color settings.
Leave a Reply