Image Favicon generator
Generate the favicon and app icon sizes that still matter in 2026, with a maskable variant and the HTML to install them.
Drag a file here, or
Square works best, at least 512×512. Everything is generated on your device.
Ready. Runs locally on your device.
Your files stay on your device. The tool works directly in your browser, using your device to process your files. Nothing is sent to our servers, and we never receive, store, or see your files or figures.
Share result
Cite
Cite this page
Reembun. (2026, July 28). Favicon generator. https://reembun.com/favicon-generator
How to use it
Choose a source image
A square PNG or SVG of 512 pixels or more gives the cleanest result, because everything else is scaled down from it.
Set the maskable icon
Inset the maskable icon to its safe zone keeps Android from cropping into your artwork when it applies its own shape.
Download the set
Every size a browser, an install prompt and an Apple home screen ask for is generated in this tab and packaged as a ZIP, with the .ico included.
Wire it up
Copy the markup and the web manifest entries into your site, then upload the files to the path they refer to.
The sizes that still matter
| File | Size | Used by |
|---|---|---|
favicon.svg | vector | Modern browsers, preferred |
favicon-32x32.png | 32 | Browser tab |
favicon-16x16.png | 16 | Browser tab, small |
apple-touch-icon.png | 180 | iOS home screen |
icon-192.png | 192 | Android, PWA manifest |
icon-512.png | 512 | PWA splash screen |
icon-maskable-512.png | 512 | Android adaptive icon |
Older guides list fifteen or twenty files covering Windows tiles, legacy iOS sizes and multiple .ico variants. Those cover browsers with negligible remaining share, and shipping them is cargo cult rather than thoroughness.
Installing them
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />Browsers pick the first format they support, so the SVG line goes first. The PNG is the fallback, and the manifest supplies the PWA icons.
Maskable icons
Android launchers crop icons to a shape the user or the manufacturer chose: a circle on stock Android, a squircle on some Samsung devices, a rounded square elsewhere. Your icon is cropped to fit.
A maskable icon accounts for this by keeping all essential content inside a safe zone: the central circle covering 80% of the width. The outer 10% on each edge may be cropped and must contain nothing important, but must still be filled, because a transparent edge shows as a hard boundary.
Declare it in the manifest with "purpose": "maskable". An icon marked "any" gets shrunk inside a white circle instead, which looks unmistakably unfinished.
The SVG favicon
Worth adding alongside the PNGs for three reasons:
- It is resolution independent, so it stays crisp at every density
- It is usually smaller than the 32×32 PNG
- It can adapt to the browser’s colour scheme
That last one is done with a media query inside the SVG file itself:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #0b1020; }
@media (prefers-color-scheme: dark) { path { fill: #e8ecf4; } }
</style>
<path d="..."/>
</svg>A dark mark that disappears against dark browser chrome is a common and easily avoided problem.
Designing for 16 pixels
At tab size an icon is about the size of a full stop. Detail does not survive.
- One shape, or one letter
- High contrast against both light and dark chrome
- No gradients, no thin strokes, no text beyond a single character
- Test at actual size, not zoomed in
A logo that works on a business card usually needs a simplified variant for a favicon. Trying to shrink the full mark produces a grey smudge.
Caching
Browsers cache favicons aggressively and for a long time, sometimes ignoring normal cache headers. After changing one, a hard refresh often is not enough. You may need to clear site data or visit the icon URL directly to see the update.
Common questions
Do I still need a .ico file?
Almost certainly not. Every browser in current use supports PNG favicons, and modern ones prefer SVG. The .ico format persists for Internet Explorer, which reached end of support in 2022. Six PNGs plus an SVG covers everything that matters.
What is a maskable icon?
Android crops app icons to whatever shape the launcher uses: circle, squircle, rounded square. A maskable icon has its content inset to a safe zone covering the middle 80%, so nothing important is cropped. Without one, Android adds a white background and shrinks your icon inside it.
Why does the Apple touch icon get a background?
Because iOS does not handle transparency well on home-screen icons, so transparent areas render black. Filling the background is the reliable fix, which is why this tool applies an opaque background to that size specifically.
Should I add an SVG favicon?
Yes. It scales to any density, is usually smaller than the 32×32 PNG, and can adapt to the browser's light and dark chrome using a media query inside the file. Browsers that do not support it fall back to the PNG automatically.
Last reviewed
