home

Free favicon and app icon generator: Sixteen pixels. No pressure.

One logo in, every icon a site needs out. See it in tabs, search results and home screens before it ships. It’s all drawn in your browser, and your file never leaves it.

Current mark: The sample mark

Loading…

Your file never leaves your browser. Every icon is drawn and packed on this device. Nothing is uploaded.

SVG, PNG, JPG or WebP, up to 10 MB (2 MB for SVG).

Background
12%
22%

Phones round their own corners, so the Apple and maskable icons stay square.

Small sizes

For the 16 and 32 pixel icons in tabs and bookmarks.

Dark mode

Needs an SVG. Browsers can only switch an SVG favicon when the tab bar goes dark.

App details

For site.webmanifest and the home screen previews.

Under a home screen icon. Twelve characters or fewer fit.

Your icon at 16 pixels.

Every pixel of it, blown up, on the two tab bars it has to live on.

On a light tab bar, with the real size beside it
On a dark tab bar, with the real size beside it

Drawing…

How it works

  1. Choose your logo.

    An SVG works best, since it stays sharp and can switch for dark mode. A PNG, JPG or WebP at 512 pixels or more works too.

  2. Tune it for small.

    Pick a background, padding and corners. If the 16 pixel version turns to mush, zoom in on the symbol or give small sizes their own mark.

  3. Take the kit.

    One zip with every file, a snippet for your <head>, or a version laid out for the Next.js App Router.

Questions

Small icons, explained.

  • No. Your browser reads the file, draws every icon on this device and packs the zip here too. Nothing is sent to us or anyone else, and nothing is kept: close the tab and it’s gone. You can check: open your browser’s network tools, choose a file and watch. No request carries it.

  • Four links cover nearly everything: favicon.ico for tabs and older browsers, icon.svg for modern browsers, apple-touch-icon.png for iPhones and iPads, and site.webmanifest, which points Android and installed web apps to the 192, 512 and maskable PNGs. That’s the whole kit here. You don’t need a dozen sizes for every device.

  • Sixteen pixels is 256 dots. Words, thin lines and fine detail blur together at that size. Most strong favicons are one bold shape: the symbol from the logo, or a single letter. Use “Zoom in on part of it” to frame just the symbol, or upload a simpler mark for small sizes. The kit uses it for the 16 and 32 pixel icons and keeps the full mark for the big ones.

  • An icon Android can cut to its own shape: a circle on one phone, a rounded square or a squircle on another. It fills the whole square with a background, and the mark stays inside the middle 80 percent circle, the safe zone, so nothing important is trimmed. The kit adds the padding for you; use the mask shapes in the preview to check.

  • Only an SVG favicon can change with the tab bar. The kit writes a prefers-color-scheme: dark rule into icon.svg, with the background and mark color you choose. Browsers that support SVG favicons apply it when the system or browser theme is dark. favicon.ico can’t switch, so it keeps your light version.

  • It’s cleaned before anything draws it. Scripts, event handlers, embedded web pages, animations and links to other files are removed, and what’s left is shown only as an image, where SVG can’t run code anyway. The icon.svg you download is your drawing, framed with the background and padding you chose.

  • Browsers hold on to favicons longer than almost anything else. Check in a private window, or open /favicon.ico directly and reload it. If it still won’t change, rename the files (icon-v2.svg, say) and update the links.

A favicon is the smallest page of your story.

If the mark won’t hold up at 16 pixels, the mark may be the problem. We design identities that work from a browser tab to the side of a building, then build the site around them.

Our identity workCheck your colorsMore odds and ends