How to make a favicon for your website (all sizes, in one click)

A favicon used to be a 16×16 pixel icon. Now it's eight or more separate files at different sizes, in multiple formats, with a manifest tying them together. The canonical set for a modern web app includes 16×16 and 32×32 PNGs for browser tabs, a 180×180 apple-touch-icon for iOS home screens, 192×192 and 512×512 for Android home screens via the Web App Manifest, and a 48×48-stuffed .ico bundle for legacy IE-era bookmarks. Generating each manually is tedious and error-prone — the easy mistake is creating them at the wrong sizes or with subtle resampling artifacts.

The right sizes, and why

16×16 — browser tab favicon (smallest, must remain legible at this size).
32×32 — browser tab favicon on high-DPI displays. Same source, scaled up.
48×48 — Windows site shortcut icon. Included in the .ico bundle.
180×180 — iOS home screen icon (apple-touch-icon). Used when iPhone users "Add to Home Screen" your site.
192×192 — Android home screen icon. Used by Chrome's Web App Manifest.
512×512 — Android splash screen icon, plus the source for various derived sizes.

All sizes need to come from the same source image. Generating them at the wrong aspect ratio, or scaling a small source up to 512×512 with browser-default interpolation, produces visible artifacts. The right workflow is to start with a high-resolution master (vector SVG ideally, or a 512×512+ PNG) and downsample with a good resampler.

Step-by-step with our tool

Open justfiletools.com/tools/favicon-generator.
Drop a source image. SVG is the best input (renders cleanly at every size). PNG works if it's at least 512×512. JPG works but is suboptimal because favicons need transparency support.
Pick a background: transparent (most common — works on light and dark browser themes) or solid color (matches your brand).
Click Generate. The tool renders six sizes (16, 32, 48, 180, 192, 512), packs 16/32/48 into an .ico file, and bundles all of them plus a site.webmanifest into a downloadable ZIP.
Extract the ZIP into your site's public/ directory.
Add the HTML snippet (included in the ZIP as html-snippet.txt) to your site's <head>.

The HTML snippet

A complete modern-favicon setup needs these tags in the <head>:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="shortcut icon" href="/favicon.ico">

The .ico reference is for legacy browsers that auto-fetch /favicon.ico without checking the link tags. The PNG references with explicit sizes handle modern browsers, which pick the best size for the display. The apple-touch-icon handles iOS "Add to Home Screen". The web manifest handles Android and PWA contexts. With all five tags, every device and OS gets the right icon.

The .ico format explained

.ico is a Windows format from the early 1990s. It's a container that holds multiple images at different sizes inside a single file. The browser auto-fetches /favicon.ico and uses the size it needs. Modern browsers prefer the PNG references in link tags, but the .ico is still a fallback for old browsers and for contexts that bypass the link tags (RSS readers, browser history thumbnails, OS-level shortcuts).

Our tool's .ico contains the 16/32/48 PNGs in the IconDir structure. The implementation is a small TypeScript encoder we wrote (about 50 lines) rather than pulling in a heavy ICO library. Verified bytewise against the format spec.

Source image choice

SVG. The ideal source. Renders crisply at every size with no upsampling. Use this if you have a vector logo. The tool rasterizes the SVG via canvas at each target size.

PNG at 512×512 or larger. The right call when you have a raster image. Downsampling preserves quality. Avoid PNGs smaller than 256×256 as sources — the 512×512 output will be visibly soft.

JPG. Works but problematic — JPGs don't have transparency, so your favicon will have a solid background (white, usually). For most favicon designs, transparency matters; convert to PNG first.

Image content. Simple, high-contrast designs work best at small sizes. A photo of a sunset, downsampled to 16×16, becomes muddy. A simple geometric logo (the GitHub octocat, the Twitter bird, the Apple) remains recognizable. Test by asking: is this still recognizable at 16 pixels?

Common pitfalls

Forgetting to clear browser cache. Favicons are aggressively cached by every browser. After updating your favicon, the old one may persist in the browser tab for days. Force a hard refresh (Ctrl+Shift+R / Cmd+Shift+R), or change the favicon filename (add a hash, e.g. favicon-v2.ico) and update the link tags.

Wrong file paths. The link tags reference paths relative to the document root. If your site is hosted at a subpath, adjust accordingly. The /favicon.ico auto-fetch always uses root-relative paths, so you must have a real favicon.ico at the site root for that fallback.

Forgetting the web manifest. Android-mobile users who "Add to Home Screen" rely on the manifest for the icon. Without it, Android uses a generic globe icon. The tool's ZIP includes a minimal manifest that links the 192 and 512 PNGs.

Privacy considerations

The favicon generation is all client-side — the source image never crosses the network. The tool uses canvas to rasterize and JSZip to bundle. Verify in DevTools. For brand assets you're protective of (unreleased logos, internal mock-ups), this matters — the alternative web favicon generators upload your source to their server.

Related tools and guides

Favicon Generator — the tool this guide covers.
SVG Optimizer — optimize the source SVG first.
Compress Image — shrink the generated PNGs.