Which files you need and why
| File | Size | Used for |
|---|---|---|
favicon.ico | 16, 32 and 48 px | Browser tabs, bookmarks and Google Search, which lists ICO among the formats it supports. |
favicon-32.png | 32 × 32 | Tabs in modern browsers. |
icon-192.png | 192 × 192 | Android home screen and the manifest. It is also larger than 48 × 48 px, as Google recommends for search. |
icon-512.png | 512 × 512 | The manifest. web.dev says Chrome needs at least a 192 × 192 and a 512 × 512 icon. |
apple-touch-icon.png | 180 × 180 | iPhone and iPad home screen. Apple's guide uses 180 × 180 for iPhone and looks for this name in the root of the site. |
site.webmanifest | text | Name, icons and colors for phones, linked with a manifest tag. |
Google Search and your favicon
Google shows one favicon per hostname, so www.example.com and shop.example.com can have different icons, but a subfolder cannot. The icon must be square and at least 8 × 8 px, and Google recommends a size larger than 48 × 48 px.
The tag must be on your home page, and Google must be allowed to crawl both the home page and the icon file. Keep the icon at the same address. A change can take days or weeks to show, and Google does not promise to show a favicon even when everything is right.
How to add it to your site
- Upload the files from the ZIP to the root of your site, the folder with your home page.
- Paste the tags into the head section of your pages. If you use another folder, set it above first, so the tags point to the right place.
- On WordPress 6.5 or newer you can instead open Settings, then General, and upload icon-512.png as the Site Icon. WordPress asks for a square image of at least 512 × 512 px and makes the other sizes itself.
- Open your site in a new tab to check. Browsers keep old icons for a while, so a private window shows the change sooner.
FAQ
Do I still need favicon.ico?
It is the safest choice. Google Search supports ICO, and some browsers and tools still look for /favicon.ico in the root of a site. Modern browsers also use the PNG files from the tags.
Why does the Apple icon have a background?
We give it a solid background, your color or white, so it looks clean on any wallpaper and does not depend on how the phone shows transparent areas.
Can I use an SVG logo?
Yes, and it gives the sharpest result, because the tool draws it again at every size. Simple, bold shapes read best at 16 px. Thin lines and small text disappear.
Do you see or keep my logo?
No. Your files never leave your device. The browser makes the icons in this tab, and nothing is uploaded or stored.
Sources: Google Search Central: favicon in search results, Apple: Configuring Web Applications, web.dev: Add a web app manifest, MDN: Web app manifest and WordPress: Create a Favicon. Checked in October 2026.