Make a favicon set, without uploading
Drop a single image and get a complete favicon bundle as a ZIP: a multi-size favicon.ico, PNGs at every common size, an apple-touch-icon, Android Chrome icons, a site.webmanifest, and the HTML snippet to paste. It all runs on your own device, so your image never leaves the page.
Drop a file, or click to browse
Drop a square image (PNG, JPEG, SVG, WebP…). Non-square images are center-cropped. Built on your device, never uploaded.
Your image is processed on your device. Nothing is uploaded.
How it works
- Drop a square image (a non-square one is center-cropped automatically).
- Morphr renders every favicon size right in your browser and packs them into a ZIP.
- Download favicons.zip and paste the included HTML snippet into your <head>.
Why generate favicons locally
Most favicon generators upload your image to their servers to resize it, which is fine for a logo you already publish, but needless exposure for a work-in-progress brand or a private project. Morphr renders every size in your browser using the same high-quality Lanczos downscaling, so your artwork stays on your device and you still get a complete, standards-compliant icon set.
The favicon landscape is more than one .ico file
A single favicon.ico used to be the whole story; it isn't anymore. Browsers still fall back to requesting /favicon.ico by default, but a modern site is expected to declare several purpose-built icons: sized PNGs for browser tabs and bookmarks, an apple-touch-icon for when someone adds the page to an iOS or iPadOS home screen, and larger Android Chrome icons referenced from a web app manifest for Android's 'add to home screen' shortcuts. Miss one and the icon isn't broken exactly; it just falls back to something generic or blurry on that specific platform, which is easy to miss during your own testing since you're unlikely to check every device.
One newer format worth knowing about, and being honest that this tool doesn't produce: some sites now also ship a scalable SVG favicon, which stays crisp at any tab size and adapts to dark mode. Support for it is still inconsistent across browsers, which is exactly why the ICO-plus-PNG set below remains the reliable baseline: every browser and OS this tool targets falls back to one of those raster sizes regardless of whether an SVG icon is also present.
What this tool actually builds
Drop one image and Morphr center-crops it to a square (only if it isn't already one, so a square source is untouched), then downsamples that square to every target size using Lanczos3 resampling — a high-quality filter that keeps edges reasonably sharp instead of the blurring or aliasing you'd get from a cheaper nearest-neighbor or bilinear resize. The output ZIP contains a complete, standards-based set:
- favicon.ico — a single multi-resolution icon file containing 16, 32 and 48px versions, so the OS or browser picks whichever is sharpest for the context.
- favicon-16.png, favicon-32.png, favicon-48.png: the same sizes as standalone PNGs, for browsers that request a sized icon directly.
- apple-touch-icon.png at 180×180 — the size iOS uses for home-screen shortcuts.
- android-chrome-192.png and android-chrome-512.png — referenced by the generated manifest for Android home-screen icons.
- site.webmanifest — a starter web app manifest pointing at the two Android icons.
- _html-snippet.txt: the exact <link> tags to paste into your <head>, already pointing at the files above.
Designing for a 16-pixel canvas
A detailed logo that reads perfectly at 512px is frequently unrecognizable at 16px — the size most browser tabs actually render. Anything with fine linework, small text, subtle gradients, or more than two or three distinct shapes tends to collapse into a gray smudge at that size. A mark that survives the shrink is usually a single bold shape or a couple of thick, high-contrast strokes, tested at the smallest size before you rely on it. Because Morphr center-crops rather than intelligently reframing, it's worth starting from a source image where your mark is already centered and fills most of the square; an off-center logo on a large canvas will get part of its padding cropped away instead of the mark itself scaling to fit.
One manual step this tool can't do for you
The generated site.webmanifest ships with blank `name`, `short_name`, `theme_color` and `background_color` fields (and generic white defaults for the colors) because there's no way for an image-resizing tool to know your product's name or brand palette. Fill those in before you publish the manifest, or an Android home-screen shortcut will show your icon under a blank or generic label instead of your site's name.