Making a favicon from a letter
A favicon is the little icon in a browser tab, a bookmark list and a phone's home screen. It is often the most-seen piece of a site's branding, and a site without one looks unfinished and shows a generic globe.
This generator makes a clean letter-mark favicon: choose a letter, colours, a shape and a font, and download PNGs at the sizes browsers and phones ask for, drawn in your browser.
How to use it
- Type the letter, usually the first letter of your site or brand.
- Choose the background and letter colours, the shape and the font.
- Check the preview at every size, especially the tiny 16-pixel one.
- Download each size and add the link tags to your page's head.
Example: the sizes you get
Letter M, purple background, rounded shape
favicon-16.png, favicon-32.png, favicon-48.png, favicon-180.png
16 and 32 pixels are for browser tabs, 48 for Windows and search results, and 180 for the Apple touch icon on iPhone and iPad home screens.
Adding it to your site
Put the files in your site's root and reference them in the head of every page: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">, the same for 16 and 48, and <link rel="apple-touch-icon" href="/favicon-180.png">. Browsers pick the size that fits. Google shows favicons in search results too and asks for a square icon of at least 48 × 48 pixels.
Design for 16 pixels
At tab size, an icon is 16 × 16 pixels, so detail disappears. A single bold letter on a solid background is one of the most legible choices, which is why so many well-known brands use exactly that. Use strong contrast between letter and background, and check how the icon looks in both light and dark browser themes.
What about favicon.ico?
Some old tools and browsers request /favicon.ico automatically. Modern browsers use the PNG files from your link tags. If you want to stop 404 errors in your server logs, convert the 32-pixel PNG to .ico with an image tool and place it in the root as well.
Questions
Why does my old favicon still show?
Browsers cache favicons aggressively. Open the icon URL directly, hard-refresh, or rename the file to force an update.
Can I use an emoji or a logo?
This tool draws a letter. For a logo, export it as a square PNG at the same sizes, or use an SVG favicon in modern browsers.
Is anything uploaded?
No. The icons are drawn on a canvas in your browser and downloaded straight from it.