How to Make a Favicon

A favicon is the small icon in browser tabs, bookmarks, and mobile home screens. Modern sites ship multiple sizes—16×16, 32×32, 180×180 apple-touch-icon, and manifest icons—so crisp pixels appear on retina displays. Start from a simple square logo on a transparent or solid background, export PNG masters, generate ICO and size bundles, or use /tool/favicon-pack-generator and /tool/ico-generator on FileToolsHub when you want outputs without ImageMagick installed. Staging sites on password-protected hosts still need favicons on the public marketing domain—browsers fetch /favicon.ico independently of your basic auth gate. White-label customers may require their logo in the tab even when the product title stays yours; generate packs per tenant from the same master SVG. Progressive web apps reference icons in manifest.json with purpose any and maskable—test maskable icons on Android install prompts. Email clients do not use site favicons; focus on browser and mobile home-screen use cases when prioritizing design time. Apple touch icons need opaque backgrounds unless you accept iOS adding a white matte—design square PNG with padding. Test favicon visibility when dozens of tabs are open; ultra-thin line art disappears next to saturated app icons in the tab strip. Google result favicons pull from site markup—validate in Search Console URL inspection after deploy. Multi-brand subdomains need distinct favicon paths or users confuse tabs when five properties stay open during support shifts. CDN cache purge after favicon swap should include the ICO path and any hashed PNG variants referenced in manifest.json. Favicon generators cannot fix a blurry source logo—invest in a simple vector mark before exporting sizes. Validate manifest icon sizes match files on disk—404 on one PNG breaks PWA install on Android. After deploy, open the site in a private window to confirm the new icon is not masked by an old cached profile session. Link rel shortcut icon remains a harmless alias on legacy HTML templates when you standardize on PNG for modern browsers.

Design at readable size

Complex wordmarks disappear at 16 pixels. Use a bold glyph, single letter, or simplified mark with high contrast. Design at 512×512 or vector, then downscale—never upscale a blurry 16×16.

Figma, Illustrator, or Inkscape

Export square PNG at 512×512. Keep important shapes inside a central circle safe zone—Android adaptive icons mask corners. Export sRGB; avoid thin hairlines below two pixels at final size.

GIMP or Photoshop export

Scale with cubic interpolation, sharpen lightly if edges soften, export PNG. For ICO containing multiple sizes, use a dedicated converter rather than renaming .png to .ico.

HTML link tags

Link rel="icon" for 32×32 PNG or ICO, apple-touch-icon for iOS, and manifest.json icons array for PWA install prompts. Place files in /public or static root and reference absolute paths in HTML.

Command-line ICO (optional)

ImageMagick convert logo.png -define icon:auto-resize=256,128,64,48,32,16 favicon.ico on machines with IM installed. Verify in a browser tab after deploy, not only in the file preview pane.

FileToolsHub favicon pack

/tool/favicon-pack-generator accepts your source image and downloads common sizes zipped. /tool/ico-generator builds ICO when you need the legacy Windows tab format. Upload a high-resolution source once rather than redrawing each size by hand.

Deploy and cache busting

Browsers cache favicons aggressively. Change filename or query string when you rebrand. Confirm HTTPS serves the same icon path your HTML references.

Next.js and static hosts

Drop favicon.ico in app or public roots per framework docs. Some stacks prefer icon.png in an app directory with metadata API—follow your template so build output includes link tags.

Final checks

Search Console and browser tabs use the same icon path—broken HTTPS mixed-content warnings can block favicon loads silently. After migration, request colleagues on Windows and macOS to hard-refresh once because tab icons cache longer than HTML. Keep a monochrome SVG master for future dark-mode variants even if you ship PNG first.

FAQ

ICO vs PNG? PNG works in modern browsers; ICO bundles sizes for older Edge cases and some enterprise tools. Do I need SVG favicons? SVG is supported in some browsers with fallbacks—provide PNG anyway for compatibility.

Why does my favicon look wrong in dark mode? Test on light and dark browser chrome; separate media queries can swap icons. Does FileToolsHub host my icon forever? You download files to deploy on your own hosting.