Favicon from Image — Generate the Full Set | OhMyIcon

How to generate a favicon from an image

Drop a square PNG, JPG, SVG, or WebP into the upload area. 260×260 or larger gives the cleanest downscale.
(Optional) pick a background color and padding if your source has transparency or sits flush to the edges.
Hit Generate. Every required size is rendered in your browser using the Canvas API.
Click Download ZIP. The archive contains favicon.ico, every PNG variant, the Apple Touch icon, the Android Chrome icons, the Windows tile, a starter manifest.json, the browserconfig.xml, and a README with the meta tags.
Copy the HTML snippet shown below the ZIP button and paste it into your site's <head>.

What every file is for

favicon.ico — multi-resolution (16/32/48) icon used by older browsers and as a safe fallback.
favicon-16/32/96.png — modern browser tabs, bookmark bars, and search results.
apple-touch-icon.png (180×180) — added to the iOS home screen with rounded corners and shine.
android-chrome-192/512.png — Android home screen and PWA splash screen.
mstile-150x150.png — Windows 8/10 Start tile.
manifest.json — Web App Manifest. Tells Android/Chrome how to install the site as a PWA.
browserconfig.xml — Microsoft tile color + image bindings.

Tips for a sharp favicon

Favicons are usually viewed at 16×16 px. Anything that looks great at full size can still turn into a 16×16 smudge. Use a high-contrast mark, avoid thin strokes, and keep the silhouette readable. If your logo is wide, consider creating an icon-only variation (a single letter, a glyph, or a simplified mark) instead of resizing the full logo.

FAQ

Do my files leave my browser? No. The image is read with URL.createObjectURL, drawn on a Canvas, and ZIPped — all client-side.

Why is the .ico under 10 KB? Because each embedded PNG is small. ICO is a wrapper, not a compressed image format.

Can I use a SVG source? Yes. The browser rasterises the SVG at each target size, which usually gives the cleanest result.

Can I customise the manifest before downloading? The included manifest.json is a starter. Edit the name and theme_color fields to match your brand before deploying.