Favicon sizes, formats and installation
Choose the files each surface needs, then make their paths agree.
Free toolFavicon GeneratorTurn an image, initials or emoji into a complete website icon package. Review tiny pixels, light and dark tabs, and maskable app icons.Make your faviconWhich favicon files should you make?
Use a small browser icon, an Apple touch icon and app icons if your site needs them. ICO, PNG and SVG have different jobs. You do not need every historical icon size.
| File | Useful size | Purpose |
|---|---|---|
| favicon.ico | 16, 32 and 48 px inside one file | Small raster fallback with several resolutions. |
| Browser PNGs | 16, 32, 48 and 96 px | Explicit raster choices for tabs and other surfaces. |
| favicon.svg | Square viewBox | Scalable artwork, optionally with theme-aware colours. |
| apple-touch-icon.png | 180 × 180 px | Apple home-screen icon with an opaque background. |
| App icons | 192 × 192 and 512 × 512 px | Manifest icons, with separate any and maskable versions. |
| site.webmanifest | JSON, not an image | App names, launch path, colours and references to app icons. |
This is a practical package, not a universal platform specification. Google recommends a square favicon larger than 48 pixels for its surfaces. A 96px PNG provides that option. Search display remains Google’s decision.
Design at 16 pixels before exporting at 512
Use one strong shape or a short initial. A detailed wordmark can remain sharp at 512 pixels and become unreadable in a tab. Enlarging the 16px render reveals the pixels that actually survived.
- Trim empty margins before fitting the mark. A small logo inside a large transparent canvas stays small after resizing.
- Check both light and dark backgrounds. Transparency does not choose a contrasting colour for you.
- Prefer a bolder silhouette over a longer name. One clear letter often reads better than three tiny ones.
- Keep a vector master when you have one. Turning a PNG into an SVG wrapper does not restore vector detail.
Why maskable icons need a different fit
Keep important artwork inside the central safe circle, not an 80% square. The Web Application Manifest specification defines that circle with a radius of 40% of the icon’s size. A launcher can remove the corners outside it.
A square logo occupying 80% of a 512px canvas reaches about 289.6 pixels from the centre at its corners. The safe radius is only 204.8 pixels. That square can lose its corners even though it has a 10% margin.
| Centred square mark on 512px canvas | Distance to farthest corner | Inside the 204.8px safe radius? |
|---|---|---|
| 80% wide, 409.6px | About 289.6px | No |
| 55% wide, 281.6px | About 199.1px | Yes |
These are geometry calculations: half the square’s diagonal is its width divided by the square root of two. Floi fits the whole mark within at most 55% of the canvas for maskable exports. It centres that fit independently of your tab crop. Ordinary app icons can use a larger mark.
Put the manifest beside the icon files
Keep the icon paths relative inside the manifest, and use the asset folder in the page’s links. This avoids accidentally repeating a folder when the manifest is stored below the site root.
For example, put your files in /assets/icons/. Your page links to /assets/icons/site.webmanifest. Inside that manifest, "src": "icon-192.png" resolves to /assets/icons/icon-192.png. The app’s start_url can still be / or another local page.
<link rel="icon" href="/assets/icons/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" sizes="96x96" href="/assets/icons/favicon-96x96.png">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png">
<link rel="manifest" href="/assets/icons/site.webmanifest">Add the links in your framework
Place the generated icons in the public directory, then use your framework’s document-head mechanism. Existing automatic icon files can add their own declarations, so inspect the final HTML.
| Project | Files | Declaration |
|---|---|---|
| Plain HTML | Your web root or chosen folder | Link tags inside each page’s head. |
| Astro | public/ or public/assets/icons/ | Link tags inside the head of your shared layout. |
| React with Vite | public/ or public/assets/icons/ | Link tags in index.html. Adjust the asset folder for a site deployed under a subpath. |
| Next.js App Router | public/ or public/assets/icons/ | Merge the metadata snippet into app/layout. Review automatic favicon.ico and icon files. |
Next.js also supports file-based icon conventions. Choose one coherent setup. Keeping both an old automatic icon and new manual declarations makes troubleshooting harder.
Choose a method that fits the job
A generator is convenient for a coordinated package. A desktop editor gives you more control over tiny pixel shapes, and a command line suits repeatable builds.
| Method | Useful advantage | Tradeoff |
|---|---|---|
| Floi favicon studio | Review tab colours, pixel sizes and safe masks while editing. Generate locally. | No hosted-site checker or individual pixel painting. |
| RealFaviconGenerator | Detailed platform guidance and hosted-site checking. | Check the service’s current handling of your input before using private artwork. |
| Desktop pixel or vector editor | Draw a dedicated 16px version and control each detail. | You assemble the package and declarations yourself. |
| ImageMagick | Script repeatable raster conversions in your build process. | Install it locally and create the manifest, app variants and markup separately. |
For a square PNG, an ImageMagick ICO conversion can be scripted with magick logo.png -define icon:auto-resize=48,32,16 favicon.ico. Inspect the result after resizing. This command does not prepare a maskable icon or a manifest.
Why is the favicon not showing?
Check the final URL and declaration before changing your design. Browsers cache favicons, and frameworks or templates can inject a different icon.
- Open the exact icon URL. Confirm it returns the icon, not an HTML error or a sign-in page.
- Inspect the page head. Look for conflicting icon links and verify the asset folder. MDN explains icon selection using media, type and size.
- Check the manifest’s URLs. Resolve each icon relative to the manifest’s own location.
- Try a fresh browser profile. A normal page reload may retain the older favicon.
- Check crawlability for Search. Allow Google to fetch the homepage and icon. Updating your files does not set Google’s recrawl schedule.
A correct package is one part of the setup. Browser version, caching, launcher behaviour and Search selection still affect the result. Test the hosted site on the devices you support.
Frequently asked questions
Is a 512 × 512 image enough for a favicon?
It is a useful source size for app icons, but it does not replace smaller browser exports. Inspect the mark at 16 pixels and render each output size from the source. Use a square icon with a simple silhouette.
Do I still need favicon.ico if I have an SVG?
An ICO is a useful fallback for clients that do not use your SVG declaration. Include it alongside PNG or SVG links. An ICO can hold several small raster sizes in one file.
Will a manifest make my website an installable PWA?
No. A manifest describes the app and its icons. Installation requirements vary by browser and platform. Check HTTPS, app metadata and your target platform’s other requirements separately.
Does a favicon improve Google rankings?
A favicon identifies your site visually. Google’s favicon guidance does not promise a ranking benefit or guaranteed display. Keep the icon crawlable and consistent with the site.