Favicon generator
One logo in, every icon a browser and a phone will ask for out.
A favicon is eight files now
It stopped being one .ico a long time ago. A browser tab wants 32 pixels, an iPhone home screen wants 180, Android wants 192 for the icon and 512 for the splash screen, and a web app manifest has to list them by name.
Most sites ship one small icon from years ago and look broken the first time somebody saves them to a phone — a blurry square, or worse, a grey globe. This makes the whole set from a single picture and gives you the two snippets that tie them together.
Design for sixteen pixels
That is how wide a favicon is looked at. Whatever detail is in your logo will not survive it: a wordmark becomes a smudge, a thin outline disappears, and a gradient becomes a single muddy colour.
Almost every good favicon is one letter, one shape or one strong mark. If your logo is a name, use its initial. Look at the 16px preview here before you decide, not the 512px one — the small one is the one people see.
Transparency and the black square
iOS ignores transparency on the home screen and fills it with black. A transparent PNG that looks right everywhere else becomes a dark tile on an iPhone, usually discovered months later by a customer.
Pick a background colour here instead. Transparent is offered because it is right for browser tabs, but it should be a decision rather than the thing that happened by default.
Where the files go
All of them go in the root of your site, beside index.html, and the paths in the snippets assume exactly that. Put them in a subfolder and the browser will not find them, because it looks for several of these at fixed addresses whatever your HTML says.
Your picture never leaves this browser. That matters more than it sounds for a logo that has not been announced yet — the alternative tools upload it to a server you have no relationship with.