Choosing a good source image
Favicons are often shown as small as 16 px, so a good source image is:
- Square. Non-square images are centered and the leftover space is left transparent.
- 256 px or larger. Small images look blurry when enlarged. An SVG is always sharp.
- Simple. Thin lines and small text turn to mush at 16 px, so use a version of your logo with just its key shape.
Adding it to your site
Upload favicon.ico to the top folder (root) of your site, and add this line inside the <head> of every page.
<link rel="icon" href="/favicon.ico" sizes="any">Browsers often look for favicon.ico in the root even without this line, but writing it out is more reliable. More in how to make and add a favicon.
If the new favicon doesn't show
Browsers cache favicons for a long time, so you may still see the old icon after uploading a new one. Do a hard refresh, or add a version to the address, such as href="/favicon.ico?v=2", to load the new file.