What you need in 2026
| File | Size | Purpose |
|---|---|---|
| favicon.ico | 16–48 px (multiple sizes in one file) | Older browsers and some tools |
| favicon.svg | Vector | Modern browsers; sharp at any size |
| apple-touch-icon.png | 180 × 180 px | iPhone/iPad home screen |
| icon-192.png, icon-512.png | 192 and 512 px | Android and web app manifest |
Create the files
- Start from a square logo mark (an icon or initial works better than a full wordmark at 16 px).
- If it has a white box, make it transparent with the logo background remover.
- Open the image converter and choose ICO — the file will contain sizes from 16 to 256 px.
- Make PNG versions at 180, 192 and 512 px with Resize image.
Add it to your site
Place the files in the root of your site and add to the <head>: <link rel="icon" href="/favicon.ico" sizes="48x48">, <link rel="icon" href="/favicon.svg" type="image/svg+xml"> and <link rel="apple-touch-icon" href="/apple-touch-icon.png">.
Favicons in Google search
Google shows favicons next to results. Its guidelines ask for a square icon that is a multiple of 48 px (48, 96, 144…), visually representative of your brand and accessible to Googlebot. Updates can take some time to appear in results.
Frequently asked questions
Can the favicon be transparent?
Yes, but check it on both light and dark browser themes. A solid background shape often reads better in dark mode.