How to Make a Favicon
A favicon is displayed in browser tabs, bookmarks, and on mobile home screens. Making one correctly means generating multiple sizes and formats from a single source image.
About How to make a favicon
Favicons come in several formats and sizes depending on where they appear. A complete favicon set covers browser tabs (16×16, 32×32), taskbar icons (48×48), and Apple home screen shortcuts (180×180). Missing any of these causes browsers to either fall back to a default icon or display a pixelated version.
The best source file for favicon creation is a square logo mark — a monogram, an icon, or a simplified symbol rather than a full horizontal logo. Horizontal logos with text lose legibility at favicon sizes.
Favicon format guide: — .ico format: packages multiple resolutions into a single file. Supported by all browsers including IE11. Legacy but still required for broad compatibility. — .png format: used by modern browsers. Transparent background supported. — .svg format: supported by Safari 14+ and modern Chromium. Infinitely scalable. — apple-touch-icon.png: 180×180 PNG used by iOS for home screen bookmarks.
After generating your favicon files: 1. Upload favicon.ico, favicon-32x32.png, favicon-16x16.png, and apple-touch-icon.png to your site root. 2. Add the following to your HTML head: link rel="icon" href="/favicon.ico" and link rel="apple-touch-icon" href="/apple-touch-icon.png". 3. Verify using browser developer tools — the Network tab will show favicon requests.
Most site builders (WordPress, Squarespace, Webflow, Shopify) have a dedicated favicon upload field in site settings. Upload the 512×512 PNG there and the platform handles size generation.