How to add a favicon and a home screen icon to your website
A favicon is the small icon next to your site's name in the browser tab. Google also shows it next to your site in search results, and a larger version becomes the app icon on a phone's home screen. Without one, most browsers show a grey globe — a small sign that the site was not finished.
The files you need
A modern set is small:
| File | Size | Used by |
|---|---|---|
favicon.ico | 32×32 | Older browsers and many tools that look for it by name |
favicon.svg | Any, it scales | Modern browsers; in Chrome and Firefox it can adapt to dark mode |
apple-touch-icon.png | 180×180 | iPhone and iPad home screens |
icon-192.png and icon-512.png | 192×192 and 512×512 | Android home screens, through the web manifest |
site.webmanifest | — | Tells phones and browsers the site's name, icons and colours |
All of these are file types aiput.site publishes.
Start from a simple, square image
- Square, with the important part in the middle.
- Simple: at 16 pixels, only a letter, a shape or a bold mark survives. A full logo with a slogan turns into a smudge.
- Contrasting: it must be visible on light and dark browser tabs.
- For Google search results, use a square PNG or ICO of at least 48×48 pixels: the 180×180
apple-touch-icon.pngbelow qualifies.
Let the agent make them
Make a favicon set from logo.png: favicon.ico 32×32, favicon.svg, apple-touch-icon.png 180×180, icon-192.png and icon-512.png, and a site.webmanifest with the site name and these icons. Add the right link tags to the head of every page.
An agent that runs commands on your computer can resize the images itself and draw the SVG version. If the logo is too detailed, ask it to make a simplified mark — the first letter of your name in your brand colour works well.
The tags in the page
The agent adds lines like these to the head of every page:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Ask for them on every page, not only the home page.
Check it
- Open the site in a new tab and look at the tab.
- On a phone, add the site to your home screen and look at the icon.
- Browsers remember favicons stubbornly: if you still see the old one, open the site in a private window.
Search engines take longer: the icon in Google results can take days or weeks to update after you publish.