Favicon Generator — Design an Icon & Copy the Code
Design a favicon in your browser: pick a letter, background and foreground colors, and a shape, then download a high-res PNG or copy ready-to-paste SVG and HTML link code. Everything runs locally.
Everything runs in your browser. The icon is pure SVG markup, so the same design stays sharp at every size.
What a favicon is
A favicon is the small icon a browser shows in a tab, bookmark bar and address bar for your site. It is tiny (usually 16–48 pixels) but it is part of your brand: a recognizable icon is what separates your tab from the other twenty the visitor left open. It is the first piece of your branding many people ever see, and it costs almost nothing to get right.
How to use this tool
Type the letter, initial or short word you want in the middle (up to three characters), pick a background and foreground color — either in the pickers or from the preset palette — then choose a shape. Use the corner-radius slider to round a square shape, or pick Circle for a disc. The preview updates instantly, and the row underneath shows how the same icon looks at 16, 32, 48 and 180 pixels, which is exactly how a browser will render it.
When you are happy, either download a 512×512 PNG and downscale it in any image editor, or copy the SVG code or the ready-to-paste HTML <link> tag and drop it into the <head> of your page. The favicon never touches a server.
Which favicon sizes you actually need
The honest answer is fewer than most generators sell you. A single SVG covers every modern browser, from the 16-pixel tab strip to a 48-pixel bookmark thumbnail, because the browser rasterises the vector itself at whatever size it needs. That is why the SVG is the primary export here and why the preview row shows 16, 32 and 48 pixels: those are the three sizes a desktop browser picks between when it draws your icon.
The one size that still matters as a raster is 180×180, and only because of iOS. When someone adds your site to their home screen, Safari does not read an SVG — it looks for a PNG apple-touch-icon. Export the 512-pixel PNG this tool gives you, scale it to 180×180, and point the tag at it. A 32×32 PNG is a reasonable third file for older desktop browsers that predate SVG icon support, but in practice that is belt-and-braces rather than a requirement. Three files — one SVG, one 180 PNG, one 32 PNG — is a complete, future-proof set.
Where the files go and how to check it worked
Put the files in the root of your site, next to index.html, and reference them with site-absolute paths such as /favicon.svg rather than relative ones. Absolute paths keep the icon working on nested pages like /blog/post/, where a relative path would resolve to the wrong directory and silently 404. Many hosts and static-site generators will also pick up a file literally named favicon.ico in the root automatically, which is why keeping that filename is a cheap safety net.
After deploying, open your site and hard-refresh (Ctrl+Shift+R on Windows, Cmd+Shift+R on a Mac). Browsers cache favicons aggressively and will happily keep showing the old icon, or the generic globe, for hours after the file has changed. If the tab still looks wrong, load the icon URL directly in a new tab: if you see the image there, the file is fine and the problem is cache. A 404 on that URL means the path is wrong, not the design.
Common favicon mistakes
The most frequent one is detail. A logo that reads perfectly at 200 pixels usually turns to mush at 16, because every stroke narrower than about one pixel disappears when the browser downsamples. That is exactly why this tool starts from a letter or a two-to-three character monogram rather than asking you to upload artwork: a single bold glyph is still legible when the whole icon is the size of a grain of rice, and it is instantly recognisable once a visitor has seen it twice.
The second is contrast. Light grey on white, or two shades of the same hue, may look tasteful in a large preview and become an unreadable smudge in a tab bar that is already full of colour. Pick a saturated background and a foreground that is either clearly light or clearly dark. The third is transparency: a fully transparent background looks fine on a light browser theme and vanishes against a dark one, so it is usually safer to fill the whole square with your background colour. The fourth is forgetting the touch icon entirely, which leaves iOS users with a grey screenshot thumbnail instead of your brand.
Why generate the icon in the browser instead of uploading it
Uploading a logo to a favicon service means handing your brand asset to a stranger's server, waiting for a queue, and often getting back a zip of files whose exact pixel dimensions you have to trust. Everything here is the opposite: the icon is generated as text, in the tab you already have open, and you can read every byte of the result in the code box before you copy it. There is no account, no upload, no queue and no watermark.
Is my favicon uploaded to a server?
No. The icon is drawn with SVG markup that your browser turns into pixels locally, on your own device. The text, colors and shape you pick never leave the page: there is no server side and no request is sent, so nothing you type is stored anywhere. The page only loads the same small analytics snippet every page on this site uses, and that snippet never sees your text.
What is the difference between square, rounded and circle favicons?
They only change the background shape behind your letter. A square has sharp corners, a rounded-square clips the corners to a radius you control, and a circle clips the whole shape to a disc. Modern browsers show favicons in different ways depending on context — a circle is the safest universal look because many tab bars mask icon corners away anyway, while a square is what most sites use for the classic look.
How is a favicon made from just one letter?
The tool builds an SVG file that is a filled shape (background) with a text element centred on top. The text size is picked automatically so one letter fills the shape nicely, and longer text shrinks to fit. Because the whole icon is just markup, the same design scales to every size without blurring, and it can be exported as PNG if you need a fixed-size raster.
Should I use SVG or PNG for my favicon?
Use SVG when you can: it is a few hundred bytes, scales perfectly to every pixel size, and modern browsers all support it in a <link rel="icon" type="image/svg+xml"> tag. PNG is the fallback for older browsers and for platforms like iOS that want a fixed 180×180 apple-touch-icon. Serving an SVG plus a PNG apple-touch-icon covers practically every case.
What is an apple-touch-icon and why is it 180×180?
An apple-touch-icon is the icon iOS and Android use when someone saves your site to their home screen or shares a link. iOS reads a <link rel="apple-touch-icon" href="..."> tag and expects a real PNG file at 180×180 pixels. The high-res PNG you download here is large enough to drop into an image editor and export at 180×180, or you can point the tag at your own hosted copy of the exported PNG.