Images & Media / Design & Icons

Favicon Generator

A favicon generator turns a letter, initials or an image into the small square icon that browsers show in a tab, in bookmarks and beside a search result. This one draws every size on a canvas inside your browser and packs them into a single favicon.ico container alongside a set of PNG files. The whole job happens on your device — no upload, no account, no server.

How to use

1
Choose text or an image
Pick Text to build the icon from a letter or up to two initials, or pick Image to use a logo. In image mode, drop a file onto the panel or click it to open your file picker; the file is read straight from disk into the page.
2
Set the colour, font and shape
In text mode, type the character, then set the background and text colours. The badge beside the text colour reports the WCAG contrast ratio and the level it reaches, and the Auto button picks whichever of white or near-black reads better on your background. Choose one of the five fonts, then a shape: square, rounded, circle, or no background for a transparent glyph.
3
Check the previews
The strip at the top is a scale mock-up of the icon beside a page title in a real browser tab, and the row underneath shows all four sizes at their true pixel dimensions on a transparency checkerboard. Look closely at the 16 pixel version in particular: that is the size most visitors see most often, and the one where thin strokes and busy detail disappear first.
4
Download the icons
Download favicon.ico for the multi-size container, and the PNG pack as a ZIP holding the four PNG files. Both sizes are shown before you click, so there is no surprise about what you are shipping.
5
Add the HTML to your head
Copy the generated snippet into the head of your pages and upload the files. The snippet points at your site root by default; if you keep the icons in a subfolder, change the path on each line to match.

Key facts

What a favicon isA favicon is the small square icon a browser shows in a tab, in a bookmark and beside a search result. The classic pair is 16×16 and 32×32 pixels: 16 for standard displays, 32 for high-density ones.Source:Browser defaults
ICO containerICO is a Microsoft icon container, not a single image: one file holds several sizes and the reader picks the one it needs. Each image may be an uncompressed bitmap or a complete PNG, a form supported since Windows Vista in 2007, and the format caps out at 256×256 because width and height are one byte each.Source:Microsoft ICO format
Declaring an iconA page declares its icon with a link element using rel="icon". Browsers also request /favicon.ico at the site root even when no link element is present, which is why that filename and location matter.Source:HTML Standard (WHATWG)
What Google Search asks forGoogle requires a site icon to be square, with a 1:1 aspect ratio, at least 8×8 pixels, and recommends one larger than 48×48 pixels. It reads a single favicon per hostname, taken from the home page.Source:Google Search Central

Frequently asked questions

Which image formats can I use?

PNG, JPEG, WebP, GIF and SVG, up to 8 MB. A PNG or an SVG with a transparent background gives the cleanest result, because transparent areas stay transparent in every size that gets generated, while a JPEG will always carry its own background. GIF files are read from their first frame only — an animated favicon is not something the ICO format can hold, so the animation would be lost in the download no matter what. SVG has one requirement worth knowing about: the file must carry explicit width and height attributes, because without them the image has no intrinsic size to scale from and the browser reports zero pixels. If that happens the tool says so instead of quietly producing a blank icon. The file is decoded locally, so none of this involves a network request.

Are my files uploaded to a server?

No. There is no upload step, and no server component that could receive a file. When you pick an image the browser reads it directly from disk through the File API, draws it onto a canvas inside this page, and hands the finished icons back to you as downloads assembled in memory. You can confirm it yourself: open your browser developer tools, switch to the Network panel, then generate and download a set of icons while watching the request list. The only entries that appear are the requests for this page's own assets and the download of your result. That matters more here than it might elsewhere, because a favicon is usually made from a logo, and a logo is often unreleased brand artwork.

Which sizes should I use, and why 16 and 32?

16×16 and 32×32 are the two a browser asks for most often. Sixteen pixels is the classic tab and bookmark icon on a standard display, and thirty-two covers the same places on a high-density screen, where a single CSS pixel is painted with two or more device pixels. The 64 and 128 pixel files cost almost nothing extra and are picked up by denser surfaces such as Windows shortcuts, larger bookmark managers and browser extension lists. One caveat catches people out: the size is a property of the file, not something you can declare your way out of. Writing width equals 16 in your HTML does not shrink a 128 pixel icon — the browser scales whatever it is handed, so shipping real files at real sizes is what keeps the small versions crisp.

How do I put the icons on my website?

Download the .ico file and put it in the root of your site, so that it is reachable at the path yourdomain.com/favicon.ico. Browsers request that exact path on their own, even on pages that declare nothing at all, which is why the filename and its location matter more than the link tag does. Upload the PNG files too, by default alongside the .ico in the root, then paste the HTML snippet from this page into the head of your pages. The snippet declares each PNG with its type and its sizes attribute, which lets the browser skip files that do not fit the slot it needs to fill rather than downloading all four. If your site is a hand-written page, the tags go straight into the document head; if it uses a template or a shared layout, put them in that one file so every page inherits them.

What is actually inside the .ico file this tool produces?

An ICO file is a container, not a single image. It opens with a short directory that lists every image it holds, and each directory entry records the pixel dimensions, the bit depth and the byte offset where that image begins. The reader — a browser, the Windows shell, a bookmark manager — reads the directory, picks the size closest to what it needs to draw, and jumps straight to that image. The entries written here are stored as PNG data rather than as uncompressed bitmaps, a form the format has accepted since Windows Vista and one that keeps the file small while preserving the full alpha channel. All four sizes together normally land well under 10 KB, which is a rounding error next to the cost of one extra image on the page.

Related tools

PDF Merger & Splitter

Merge several PDFs into one document, or split a PDF into separate files by page range or fixed chunks. Every page is copied in your browser and never uploaded.

Base64 in JSON

Encode and decode Base64 in the browser, including URL-safe Base64 and the payload section of a JWT. Runs locally; Base64 is encoding, not encryption.

Word Counter

Count words, characters and paragraphs as you type, and check the result against social platform and meta description limits. Runs entirely in your browser.