Favicon advice has piled up over two decades, and a lot of it is obsolete. Here is a short list that covers current browsers, phones, home-screen icons and search results.
The files you need
| File | Size | Used for |
|---|---|---|
| favicon.ico | 16, 32 and 48 px in one file | Browsers that request /favicon.ico by default, older systems, crawlers |
| icon.svg (optional) | Any, vector | Modern browsers that support SVG favicons, sharp at every size |
| apple-touch-icon.png | 180 × 180 px | iPhone and iPad home screen |
| icon-192.png | 192 × 192 px | Android and web app manifest |
| icon-512.png | 512 × 512 px | Web app manifest, splash screens |
The HTML
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">In the manifest, list the 192 and 512 pixel PNGs under icons. SVG favicons work in Chrome, Edge and Firefox, while Safari support has lagged, so keep the ICO and PNG files as fallbacks.
Favicons in Google Search
Google shows your favicon next to your result on mobile. Its guidelines ask for a square image whose side is a multiple of 48 pixels, such as 48, 96 or 144, and a stable URL that crawlers can fetch. Make sure your favicon isn't blocked by robots.txt.
Designing a favicon that survives 16 pixels
- Start from a square PNG at least 512 pixels wide, with the artwork filling most of the canvas.
- Use a simple shape or a single letter. Detail disappears at 16 pixels.
- Prefer strong contrast. Tabs can be light or dark, so test both.
- Keep a little padding, but not much. Padding wastes scarce pixels.
Make a favicon.ico from a PNG
- Open the PNG to ICO converter and drop in your square PNG.
- Leave 16, 32 and 48 ticked. Add larger sizes if you also want a Windows icon.
- Download
favicon.icoand upload it to the root of your site. - For the other sizes, use the resize tool to create the 180, 192 and 512 pixel PNGs.
All of it runs in your browser, so your logo never leaves your device.