Favicon generator — every standard size, no upload
A favicon is the small icon shown in the browser tab, bookmarks bar and on a phone home screen. This generator turns 1–2 letters into a clean lettermark icon in all the sizes a modern site needs — handy for side projects, prototypes, internal tools and PWAs that need a placeholder or simple brand mark fast.
How it works
Type your initials, pick a background colour, text colour and shape
(rounded, circle or square), then click Generate. For each of the eight
target sizes the tool creates an off-screen <canvas>, fills the chosen shape,
and draws the (up-to-2-character) label centred with a bold system font sized at
half the canvas. Each canvas is exported with canvas.toDataURL("image/png")
into an individual download link, and a 64 px live preview is rendered alongside.
Which sizes to download and where to use them
Modern sites and apps need a specific set of favicon sizes to cover every context where an icon appears. Here is what each size in this generator is for:
| Size | File name | Where it appears |
|---|---|---|
| 16×16 | favicon-16x16.png | Legacy browser tab, bookmarks |
| 32×32 | favicon-32x32.png | Standard browser tab (most browsers) |
| 48×48 | favicon-48x48.png | Windows taskbar pinned sites |
| 64×64 | favicon-64x64.png | High-DPI tab, some desktop shells |
| 128×128 | favicon-128x128.png | Chrome Web Store, some launchers |
| 180×180 | favicon-180x180.png | Apple Touch Icon (iOS/iPadOS home screen) |
| 192×192 | favicon-192x192.png | Android PWA manifest icon |
| 512×512 | favicon-512x512.png | PWA splash screen, app store previews |
For a minimal modern setup, download 32×32, 180×180, and 192×192. The 32 px handles the browser tab; the 180 px handles iOS; the 192 px handles Android PWA installs. Add 512 px if you are publishing a PWA and want splash-screen quality on Android.
How to add the favicon to your site
After downloading, put the files in your site’s root directory and add these tags to the <head> of each page:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">For a PWA, also reference the 192 and 512 sizes in your manifest.json:
"icons": [
{ "src": "/favicon-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/favicon-512x512.png", "sizes": "512x512", "type": "image/png" }
]Do you need an .ico file?
Modern browsers all accept PNG favicons linked with a <link> tag, so a traditional favicon.ico is no longer required for browser-tab display. The main reason to still include one is for older browsers and for the default path that some clients request without following <link> tags — search engine crawlers, email clients rendering links, and some RSS readers. If any of those matter for your project, rename your 32 px PNG to favicon.ico and place it at the root; most browsers and crawlers will accept it.
Colour and shape tips
- Circle shape works best for logos that feel like avatars or app icons — the circular crop is familiar from app store grids.
- Rounded square is the most versatile shape and reads well at 16 px, where a perfect circle can look slightly too small.
- Contrast ratio. At 16 px the letter takes up most of the canvas. Pick background and text colours with high contrast — a light letter on a dark background or the reverse. Mid-tone combinations that look fine at large sizes often become illegible at 16 px.
- Single letter vs two. Two letters work well at 32 px and above but can be cramped at 16 px. If the 16 px preview looks busy, try a single initial instead.
All drawing happens inside your browser — nothing is uploaded to any server.