Image favicon package
Download a zip file when you select an image to convert.
Download Contents
Unzip into your web root, paste the supplied link tags into your <head>. Instructions are included.
| File | Size | Where it is used |
|---|---|---|
| favicon.ico | 16 × 16, 32 × 32 | Browser tabs, bookmarks, and older browsers |
| favicon-16x16.png | 16 × 16 | Browser tabs at standard density |
| favicon-32x32.png | 32 × 32 | Search results, taskbar shortcuts, and retina tabs |
| favicon-48x48.png | 48 × 48 | Windows site shortcuts |
| favicon-96x96.png | 96 × 96 | High-density displays and desktop shortcuts |
| apple-touch-icon.png | 180 × 180 | iOS and iPadOS home screens |
| android-chrome-192x192.png | 192 × 192 | Android home screens and launchers |
| android-chrome-512x512.png | 512 × 512 | Progressive web app splash screens |
| site.webmanifest | — | Names the app and carries your theme colour on Android and PWAs |
| instructions.html | — | The link tags to paste into your <head> |
Reference
A favicon is the small icon a browser shows beside a page title in tabs, bookmarks, history and search results. Modern browsers, phone home screens and progressive web apps each ask for a different size and format, which is why a favicon is delivered as a package of files rather than a single image.
A multi-resolution favicon.ico holding 16x16 and 32x32 frames covers browser tabs and legacy browsers. Add 48x48 and 96x96 PNGs for high-density displays, a 180x180 apple-touch-icon for iOS home screens, and 192x192 and 512x512 PNGs for Android and progressive web apps.
Every download contains favicon.ico, favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, favicon-96x96.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, and a site.webmanifest naming your site and theme colour.
Unzip the package into the web root of your site, the directory that serves your home page, so each file resolves at a path such as /favicon.ico. Then paste the supplied link tags into the head element of your HTML.
Upload a square PNG, JPG or WebP that is at least 512x512 so the largest icon is generated without upscaling. Simple, high-contrast artwork reads best, because the same image is scaled down to 16x16 in a browser tab.