How to Create Favicons

BY TOOLS.FUN · MARCH 28, 2026 · 4 min read

A favicon is the small icon displayed in browser tabs, bookmarks, and mobile home screens. Getting it right across all devices requires multiple sizes and formats. This guide walks through exactly what you need and how to generate it all quickly.

favicon.now — Generate All Sizes Instantly

favicon.now takes a single high-resolution image (512x512 recommended) and generates every size you need: 16x16, 32x32, 48x48, 180x180 (Apple Touch), 192x192, and 512x512 (PWA). It outputs an ICO file for legacy browser support and individual PNGs for modern use. The tool also generates the HTML link tags you need to paste into your document head.

Upload your image, download the package, and copy the generated code. The entire process takes under a minute.

Required Sizes and Where They Appear

16x16: Browser tabs in most desktop browsers. This is the classic favicon size.

32x32: High-DPI browser tabs, Windows taskbar shortcuts, and some browser bookmark displays.

180x180 (apple-touch-icon): iOS home screen when a user adds your site as a bookmark. This is the most important mobile size.

192x192 and 512x512: Android Chrome home screen icons and PWA splash screens. Defined in your web app manifest.

Design tip: Your favicon must be recognizable at 16x16 pixels. Do not use your full logo — use an abbreviated mark, a single letter, or a simple symbol. Test at small sizes by zooming out in your image editor before finalizing.

SVG Favicons — The Modern Approach

Modern browsers support SVG favicons, which scale perfectly to any size and support dark mode via CSS media queries. Add one with:

<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">

Inside the SVG, you can include a @media (prefers-color-scheme: dark) block to change colours when the user switches to dark mode. This makes your favicon adaptive without needing separate light and dark versions.

Always include a PNG or ICO fallback for browsers that do not support SVG favicons (mainly older Safari versions and some embedded web views).

Setting Up manifest.json

Progressive Web Apps require a manifest file that references your icons. A minimal configuration looks like this:

{"name":"Your App","icons":[{"src":"/icon-192.png","sizes":"192x192","type":"image/png"},{"src":"/icon-512.png","sizes":"512x512","type":"image/png"}]}

Link the manifest in your HTML head: <link rel="manifest" href="/static/site.webmanifest">. The 512x512 icon is used for PWA splash screens on Android, so make sure it looks good on a solid background colour (set via background_color in the manifest).

Testing tip: After deploying your favicon, clear your browser cache and check multiple browsers. Chrome DevTools' Application panel shows exactly which manifest icons are loaded and flags any missing sizes. Use the JSON Formatter to validate your manifest.json file before deploying.

Common Mistakes to Avoid

Do not rename a JPEG or PNG to .ico — the ICO format is a container that holds multiple sizes and requires proper encoding. Use a generator like favicon.now that creates true ICO files.

Do not skip the apple-touch-icon. Without it, iOS shows an ugly screenshot of your page when users add it to their home screen.

Do not use transparent backgrounds for the apple-touch-icon. iOS fills the transparent area with black, which usually looks wrong. Use a solid background colour that matches your brand.

Keep your favicon files at the site root (/favicon.ico, /favicon.svg). Many bots and browsers check the root path by default, and non-root paths require explicit link tags on every page.

← Back