Favicon Maker

Modern browsers, mobile home screens, and OS task switchers all want different favicon sizes — 16, 32, 48, 180, 192, 512, plus an SVG and an Apple touch icon. Producing the full set means resizing the source eight ways, exporting eight files, and putting eight link tags in the HTML head.

Upload an image, draw something simple, or type a letter, and the maker returns every standard size in a zip plus the HTML markup to drop into your head element. The output covers Chrome, Safari, Firefox, iOS home screen pinning, Android Chrome installable PWA icons, and Windows tile icons. SVG output preserves vector edges where the source allows it.

Not a logo design tool — for that you want a proper editor. This handles the boring conversion step that comes after the design is done.

The favicon ecosystem accumulated complexity historically rather than by design. Original Internet Explorer wanted a 16×16 ICO at /favicon.ico. Apple wanted apple-touch-icon for iOS home screens, which evolved through several recommended sizes. Microsoft wanted a tile icon for Windows pinning. Android Chrome and Progressive Web Apps want a manifest.json referencing 192 and 512 PNG icons. Each platform added its own favorite size, and modern best practice is to ship a small set that covers all of them. The maker produces that set in one operation, which removes the manual export-eight-files-from-Figma step.

Worked example for a typical 2026 site: ship favicon.svg (vector, sharp at any size, dark-mode adaptive if you build it that way), favicon-32.png (small fallback for older browsers), apple-touch-icon.png at 180×180 (iOS home screen), and android-chrome-192.png plus android-chrome-512.png referenced in webmanifest.json. Five files, six HTML link tags including the webmanifest reference, and you cover essentially every platform a 2026 user might be on. The maker outputs all of these plus the HTML head snippet to paste in.

The limitation: a favicon "design" that looks great at 512px often turns to mush at 16px. The maker scales your input down with sensible algorithms, but no algorithm can recover lost detail. A logo with thin lettering or fine detail will lose readability at 16px regardless of how good the source is. The fix is to design specifically for the small size — a single bold mark, high-contrast colors, no fine detail — and let larger versions inherit the simplicity. Many sites ship a different "favicon mark" from their main logo for exactly this reason.

Dark mode favicons work via SVG with a media query inside the file: <style>@media (prefers-color-scheme: dark){...}</style> changes fill colors based on the user's OS preference. Browser support is increasingly common but not universal — Firefox added it later than Chrome and Safari. For sites where dark/light awareness matters, ship the SVG variant alongside PNG fallbacks; older browsers see the static PNG, newer ones get the adaptive SVG.