How to Create a Favicon for Your Website
From a logo to a complete favicon set, including the sizes, the .ico file, and the HTML to link them.
Start with a simple, bold version of your logo. At 16 pixels, fine text disappears, so use a mark, an initial, or a simplified icon — not your full wordmark.
Generate the set with the UMARIX Favicon Generator: PNG files at 16, 32, 48, 180 and 192 pixels, plus a real .ico file. Download them all as a ZIP.
Place favicon.ico in your website root and the PNG files alongside it, then link them in your page head with link rel="icon" for the .ico and PNG files, and link rel="apple-touch-icon" for the 180-pixel PNG.
Test in a real browser tab and on a phone home screen. Browsers cache favicons aggressively, so if you change the icon and do not see it, try a hard refresh or a private window before assuming the file is wrong.
Keep the background simple. A transparent background works well on light and dark browser themes; a solid brand colour works when the mark itself is light.