16
32
64
128
Shape
Font
Weight
Gradient
Presets:
Download
What the head tags look like
Why this exists
Most favicon generators upload your image to a server, return a 14-file zip you have to figure out, and bake their own branding into the manifest. Icon is a single page that draws an SVG locally, rasterises it on a canvas, and hands you the four files you actually need. Your letter goes nowhere except into the image.
Frequently asked questions
- What is Icon for?
- When you ship a side project and the browser tab still shows the generic globe, Icon gives you a real favicon in about ten seconds. Type a letter, pick a color, download, paste the HTML link tags into your site head, done.
- Square, rounded, or circle?
- Browser tabs accept any shape. iOS home-screen icons get a soft mask applied no matter what, so a plain square is safest there. Android adaptive icons clip into a circle. If you want the same icon to look correct on a tab and on a phone, pick rounded.
- Why a letter and not an upload?
- Most side projects start with a single distinct letter from the product name. A letter-mark looks intentional at 16 pixels in a way that a scaled-down photo never does. If you need a full logo, this is the wrong tool.
- How big should the PNG be?
- 256 covers most modern browsers and mid-quality social cards. 512 is the standard PWA install icon. 1024 is overkill for favicons but useful for app store assets. 32 is the legacy fallback that some older browsers still read first.
- Where do I paste the HTML tags?
- Inside the head of every page on your site. The tags reference the icon files as relative URLs, so upload your downloaded PNG and SVG to the same folder you paste the head tags into. The data URI option skips the upload entirely.
- Does it track me or use cookies?
- No. No analytics, no third-party scripts, no telemetry. Your letter and your colors stay in your browser. The share URL packs them into the page address itself, never sent to a server.