Why I built this
I was launching a side project in April 2026 and needed favicons. The most popular generator (realfavicongenerator.net) wanted me to upload my logo to their server — fine for public branding, but my project had a logo concept I was not ready to leak publicly. The other free options were either watermarked, behind ad-walls with 30-second countdowns, or generated only the .ico file (skipping Apple Touch icon, Android Chrome, manifest, etc.).
OhMyIcon generates the complete favicon set in your browser using the Canvas API for rasterisation and a hand-written ICO encoder (see lib/favicon/ico-encoder.ts). Your source image stays on your device. The output is byte-for-byte identical to what realfavicongenerator produces — same sizes, same meta tags, same manifest fields — minus the upload.
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 startermanifest.json, thebrowserconfig.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. You can verify with DevTools → Network tab; no upload requests are made.
Why is the .ico under 10 KB? Because each embedded PNG is small. ICO is a wrapper format, not a compressed image format itself. The 16/32/48 PNGs inside our .ico together take only a few kilobytes.
Can I use a SVG source? Yes. The browser rasterises the SVG at each target size, which usually gives the cleanest result for icon-style logos. Avoid SVGs with complex filters or external resources — those rasterise unpredictably.
Can I customise the manifest before downloading? The included manifest.json is a starter template. Edit the name, short_name, theme_color, and background_color fields to match your brand before deploying. The icons[] array is already filled in correctly.
What sizes does the ZIP include? favicon.ico (16+32+48 multi-resolution), favicon-16/32/96.png, apple-touch-icon.png (180), android-chrome-192/512.png, mstile-150x150.png, manifest.json, browserconfig.xml, and a README with HTML meta tags. Everything modern browsers expect, plus Windows 8/10 tiles.
My logo is rectangular — what should I do? Favicons must be square. Either crop the rectangle to a square, add padding to make it square, or create an icon-only variation (a single letter or simplified mark). 16×16 favicons render readable letters better than tiny full logos.