Favicon Generator

Generate favicons from any image in all standard sizes: 16x16, 32x32, 48x48, and 180x180. Preview in a browser tab mockup. Free, instant, no signup needed.

Drag & drop an image or

Supports PNG, JPG, WebP, SVG — square images work best

Why there are four sizes instead of one

A single favicon file never works cleanly across every platform. Each context has its own expectations:

  • 16 × 16 — the classic browser tab at 100% zoom on a non‑Retina display. This is where your design is smallest and most abused; it gets downsampled from the source image and any fine detail disappears.
  • 32 × 32 — Retina tabs, Windows taskbar, Safari reading list. If you're only going to pick two sizes, 32 is the more important one now that most laptops are Retina.
  • 48 × 48 — Windows site tiles and some desktop shortcuts. Optional on most sites but takes seconds to include.
  • 180 × 180 — the Apple Touch Icon. When iPhone users save your site to their home screen, iOS uses this as the app icon. Skipping it means iOS generates a blurry screenshot of your page instead.

Design rules for a 16‑pixel icon

A favicon is the smallest image in your entire design system. Treat it like a road sign, not a logo. Strong, bold shapes. One or two colours. No tagline, no thin lines, no gradients that rely on subtle blending. Many great favicons are just a single letter — the first initial of the brand set in a strong typeface and cropped tight. If you look at Twitter, Medium, or GitHub favicons, they all follow this: one recognisable mark, instantly readable at 16 px.

Adding favicons to your site

Drop the PNGs in your site's root directory and add the snippet the tool produces to your <head>. Browsers will automatically pick the right file for the context. If you use a static site generator (Next.js, Astro, Hugo, Jekyll), each has a "public" or "static" folder that's served at the site root — that's where the files go.

Browsers cache favicons aggressively. If you update yours and don't see it change, do a hard refresh, then close and reopen the tab. If it still shows the old one, bump the filename (favicon-v2.png) and update the link tags.

SVG favicons — the modern option

All evergreen browsers (Chrome 80+, Firefox 41+, Safari 14+) now support SVG favicons. If your mark is vector and you add <link rel="icon" type="image/svg+xml" href="favicon.svg">, the browser will rasterise it at whatever size it needs, and it'll look sharp on any DPI. Keep the PNGs as fallbacks — older browsers and some feed readers still expect them.

Privacy

The image you drop is read into a canvas, resized for each target size using the browser's built‑in image scaling, and the canvas is exported as PNG. Nothing is uploaded. Close the tab and your source image is gone.