A modern website has to have a favicon - it represents graphically the web site and will be used in search engine results, when bookmarking a page, when adding a web page as an direct short cut on a mobile, etc. This article explains how to get a favicon setup for your web site.
Introduction
Humans are awesome in recognizing symbols and icons - much easier than words or slogans. For this reason the web provides the possibility to add so called favicons to every web site. For detailed history and more details about favicon check corresponding article in Wikipedia: Favicon .
Modern “favicon”
As mentioned in the lead of this article icons are widely used in todays web site environment. Not only as bookmarks but also as application icons on mobile devices and also other areas. For this purpose it is not enough to provide a simple single image.
A typical head section of your html document will look like:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
As you can see here are already three different graphics needed.
Solution
Instead of creating all the required formats yourself you could use a free online tool to get all required files.
There are a bunch of free online generators available; I used the free generator on https://realfavicongenerator.net/
After uploading your base image in svg format the tool will ask some questions (you can stick to the defaults) and afterwards an archive will be generated with all files. What you have to do is just put those files on your website and reference them according to given html code. Voilà - you are done!