How to make a favicon
A modern site needs more than one favicon.ico; here is how to generate the whole set of icons from a single logo.
Why one favicon.ico isn't enough anymore
Browsers, Apple's home-screen icon, Android's icon system and web app manifests each expect their own icon file, in different sizes and sometimes different formats: a classic .ico for browser tabs, PNGs at specific sizes for Apple touch icons and Android, and a site.webmanifest file describing them. Missing one means a blank or default icon in that context, even if the browser tab icon looks fine.
Making the source image
Whatever generates the icon set needs a single clean source image to start from, typically a square logo or mark at a reasonably high resolution (512px or larger works well), since every other size is produced by scaling down from it. A simple, high-contrast mark scales down more legibly than a detailed logo, which can turn into a blur at 16x16 pixels.
Doing it by hand
It is possible to resize a logo to each required size manually in any image editor and name the files correctly, but getting every size, format and the manifest file right (there are a dozen or so distinct files for full coverage) is tedious and easy to get subtly wrong, which shows up as a missing icon on just one platform.
A generator that produces the whole set at once
Stayput's favicon generator tool takes one PNG, JPG or SVG logo and produces favicon.ico, the Apple touch icon, Android and maskable icons, and a site.webmanifest file, plus the HTML snippet to paste into a page's head, all generated in the browser without uploading the logo.
Questions
What size should my source logo be?
At least 512x512 pixels is a safe starting point, since every icon size needed is produced by scaling down from the source; starting too small means the largest generated icons will look soft.
Do I need a favicon.ico if I already have PNG icons?
Yes, some older browsers and contexts specifically look for favicon.ico by name, so it is still worth including alongside the newer PNG-based icons.
What is a maskable icon?
An Android-specific icon format with extra padding so the system can crop it into different shapes (circle, rounded square) without cutting off important parts of the logo.
Can I generate a favicon from an SVG logo?
Yes, an SVG source can be rasterized to each required PNG size, often with cleaner results than starting from an already-rasterized image.