This is by far the most common type of favicon, and will be supported nearly everywhere that supports favicons at all. You actually don’t always need the tag, as most browsers will automatically check for the file, but it’s good to include. You can add your favicon by adding a link to the favicon.ico file, usually placed at the root (top directory) of your web server, alongside your index.html and other files. You can create this icon from any PNG using online favicon generators. Usually favicon.ico will be a set of 16×16, 32×32, and 48×48 icons, all bundled together. The minimum size is 16×16, but ICO files can contain multiple different resolutions. The original favicons are favicon.ico files. Usually they’ll handle it for you, and you’ll just have to provide the files. If you’re not managing your own web server (i.e., if you have managed hosting with a service like SquareSpace), you’ll have to check with your provider for the settings regarding the favicon files. This will generate a bunch of files that you’ll want to link in and tags in the section of your website’s HTML. For the sake of sanity though, you’ll probably want to use a favicon generator to do it automatically. Once you have a picture you’d like to use as the icon, you can create favicons manually in any photo editor. But, if you must include every single one, you can reference this cheat sheet for more information.

You don’t really need to include 20 different favicon files for each “official” icon resolution, only a couple high-res ones in addition to the default. If you don’t have the exact size or format, most browsers will use the highest resolution image they can support, and scale favicons up or down. Most of the time, your browser will automatically fetch favicons in the likely locations without you even telling it to, but you can manually add them to your website as well. Most browsers will support multiple different types of favicons. They’re usually just simple ICO files, but in recent years they’ve become like an icon for your website, with numerous competing sizes and types. Favicons are the tiny icons that you see on browser tabs.

How to make a favicon for your website