How to Create a Favicon from Any Image (All Sizes, No Upload)
By Rui Barreira · Last updated: 13 June 2026
You can generate favicon PNG files in all 8 standard sizes from any image using brevio Favicon Generator — the Canvas API resizes your image locally in your browser. No server upload, no account, no watermarks.
A favicon is a small icon that browsers display in tabs, bookmarks, and address bars. The mistake most developers make is providing only a single 16×16 or 32×32 PNG. Modern requirements span eight different sizes covering browser tabs, Apple home screen shortcuts, and Progressive Web App manifest icons. Generating them from a single source image ensures consistency across every context.
What Each Favicon Size Is Used For
| Size | Context | Priority |
|---|---|---|
| 16×16 | Browser tab, bookmark bar | Required |
| 32×32 | Browser tab (high-DPI / Windows taskbar) | Required |
| 48×48 | Windows shortcut, some browsers at 2× scaling | Recommended |
| 64×64 | Windows Start tile (legacy), some OS environments | Recommended |
| 128×128 | Chrome Web Store, some browser bookmarks | Recommended |
| 180×180 | Apple Touch Icon — iPhone/iPad home screen shortcut | Required for iOS |
| 192×192 | Android PWA manifest (maskable and standard) | Required for PWA |
| 512×512 | PWA splash screen, Chrome Web Store listing | Required for PWA |
How to Create Favicons Without Uploading Your Image
- Prepare a square source image. Use SVG or PNG at 512×512px minimum. The design should be simple enough to remain recognisable at 16×16 pixels — avoid fine text or complex gradients.
- Open brevio Favicon Generator. No account required. The tool runs entirely in your browser.
- Drop your image onto the upload area or click to select it from your file system.
- Preview all 8 sizes in the grid. The Canvas API renders each size using the full quality of the source.
- Download individual sizes by clicking each tile, or click Download All Sizes to get all 8 PNGs at once.
- Add the HTML snippet to your site's
<head>to wire up all sizes correctly (see below).
How to Verify No Upload Occurred
- Open DevTools. Press F12 on Windows/Linux or ⌘⌥I on Mac.
- Go to the Network tab. Filter to Fetch/XHR and check "Disable cache".
- Drop your image onto the tool.
- Observe. On brevio you will see zero network requests triggered by your file — only the initial static asset loads. The resizing uses the Canvas API (
canvas.drawImage+canvas.toDataURL) entirely in browser memory.
HTML Snippet to Wire All Favicon Sizes
<!-- Standard browser favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Apple Touch Icon (iPhone/iPad home screen) -->
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">
<!-- PWA Web App Manifest -->
<link rel="manifest" href="/site.webmanifest">In site.webmanifest, reference the 192×192 and 512×512 PNGs:
{
"icons": [
{ "src": "/favicon-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/favicon-512x512.png", "sizes": "512x512", "type": "image/png" }
]
}Best Source Image Practices
- Use SVG if possible. SVG scales losslessly to any size. When the Canvas API renders it at 512px, quality is perfect. At 16px, the result is as crisp as any rasterised source.
- Keep the design simple. At 16×16, a logo with detailed text or fine lines becomes an unrecognisable blur. Use a single symbol or initial letter. Test your icon at 16px before finalising.
- Use high contrast. Favicons appear on browser tabs against both light and dark backgrounds. Ensure your icon is visible on both. Add a contrasting background fill rather than relying on transparency.
- Square crop first. The generator assumes a square input. If your logo is wider than tall (or vice versa), crop it to a square canvas in an image editor before uploading.
Do You Still Need an .ico File?
ICO files (which can bundle multiple sizes in one file) were historically required for favicon.ico in the site root. Modern browsers — Chrome, Firefox, Safari, Edge — all support PNG favicons via the <link> tag. However, some older tools, RSS readers, and crawlers still look for favicon.ico in the root. If you want belt-and-suspenders coverage, keep a 32×32 PNG and rename it to favicon.ico in your site root. Most browsers will accept the PNG-in-ICO-name without an actual ICO container.
Favicon Generator Tool Comparison
| Tool | Upload? | Account? | Sizes Generated | ICO Output | Cost |
|---|---|---|---|---|---|
| brevio Favicon Generator | No — in-browser | No | 8 standard sizes | No (PNG only) | Free |
| favicon.io | Yes — server upload | No | Multiple formats | Yes | Free |
| realfavicongenerator.net | Yes — server upload | No | All platforms + HTML | Yes | Free (donate) |
| Squoosh (manual) | No — in-browser | No | Manual per size | No | Free |
realfavicongenerator.net produces the most complete output (ICO, Apple Touch, Android, Windows meta tags) and is the right choice if you need everything in one go and do not mind server upload. For privacy-sensitive logos or quick iteration, brevio Favicon Generator processes the image locally and requires no upload.
Frequently Asked Questions
Why does my favicon not update in the browser after I change it?
Browsers aggressively cache favicons. Force-refresh with ⌘⇧R (Mac) or Ctrl+Shift+R (Windows) to reload without cache. In Chrome DevTools, you can right-click the favicon in the tab and choose "Reload". If still stale, try opening the favicon URL directly (yourdomain.com/favicon-32x32.png) and hard-refreshing that page. You can also add a cache-busting query string to the <link> tag: href="/favicon-32x32.png?v=2".
What is the difference between a favicon and an Apple Touch Icon?
A standard favicon (16/32px) is what browsers show in tabs and bookmarks. An Apple Touch Icon (180×180) is what iOS uses when a user adds your site to their home screen as a web app shortcut. Without the Apple Touch Icon, iOS uses a screenshot of your page at low resolution, which looks poor. The 180×180 PNG with <link rel="apple-touch-icon"> in your <head> solves this.
Can I use an animated GIF as a favicon?
Some browsers (Firefox) support animated favicons. Chrome does not animate favicons in tabs (only in the loading state). For production use, stick to a static PNG for maximum compatibility. If you want an animated favicon as a notification indicator, JavaScript can swap the favicon URL dynamically, which Chrome respects.
What is a maskable icon for PWAs?
Maskable icons allow Android to apply platform-specific shapes (circle, rounded square, squircle) to your PWA icon. They require extra padding in the source so the safe area (the central 80% of the image) remains visible after masking. Add "purpose": "maskable" to the relevant manifest icon entry. brevio Favicon Generator does not add padding — for maskable icons, create a version with 10–15% padding around your design in an image editor first, then generate from that.
Frequently Asked Questions
- What is the correct size for a favicon?
- You need multiple sizes. The minimum is 16×16 and 32×32 for browser tabs. For Apple devices, 180×180 (Apple Touch Icon). For PWA manifests, 192×192 and 512×512 are required. brevio Favicon Generator produces all 8 standard sizes (16, 32, 48, 64, 128, 180, 192, 512) from a single source image.
- Does the favicon generator upload my image?
- No. The Canvas API resizes your image entirely in your browser. Your source image is loaded into browser memory, resized to each target resolution on a canvas element, and downloaded as PNG files. No server receives your image at any point. Verify with DevTools → Network tab: no outbound requests fire during conversion.
- What is the best source image for a favicon?
- Use a square SVG or a PNG of at least 512×512px with a simple, high-contrast design. Favicons display at 16×16 pixels in browser tabs, so complex details become unrecognisable. Test your icon at 16px before finalising.
- Do I need an .ico file or are PNG favicons enough?
- Modern browsers support PNG favicons via <link rel="icon" type="image/png" href="/favicon-32x32.png">. ICO files are still useful for legacy compatibility (old IE and some crawler tools expect favicon.ico). For new projects, PNG-only is fine in most cases.