Your site's icon is missing from tabs and search results — the favicon
The little icon in browser tabs, bookmarks, and next to search results (the favicon) goes missing or shows a default when the file is absent, the size/format is wrong, or it isn't registered. Here's how to make and register one that shows correctly everywhere.
The problem: others have a tab icon and mine is blank
With many tabs open, each site's little icon makes it easy to tell which tab is which. But your site shows a plain default document icon. Add it to bookmarks — no icon. Next to your site name in Google results — no icon.
That little icon is the favicon (favorite icon). It reinforces your brand and adds a sense of polish; without it a site feels unfinished. A missing favicon usually means the file is absent, the format/size is wrong, or it was never registered.
Why one favicon needs several files
A single favicon.ico used to be enough, but favicons now appear in many places: browser tabs (small), bookmarks, a phone home-screen shortcut (large), and dark mode. Each context wants a different size and format, so preparing several sizes is safest.
iPhones in particular use a separate apple-touch-icon (180×180) for home-screen shortcuts. Without it, adding your site to the home screen puts an odd shrunken screenshot there. Android and PWAs reference 192 and 512 icons.
| Use | Recommended size/format | Note |
|---|---|---|
| Browser tab, default | favicon.ico (incl. 16/32/48) | The basics |
| Modern browsers | PNG/SVG 32–48 | SVG is crisp and dark-mode friendly |
| iPhone home screen | apple-touch-icon 180×180 | Missing → shrunken screenshot |
| Android / PWA | 192×192, 512×512 | Referenced in the manifest |
How to make and register it
Take one image (a logo or symbol), export it in the sizes above, and register them in the HTML <head>. A tool that turns one image into favicon.ico, the PNGs, the apple-touch-icon, and the <head> link code all at once makes this easy.
Small icons blur complex images, so a letter or two or a simple symbol reads best. A transparent PNG or SVG sits naturally on any tab background.
When it still won't show
If it's registered but still missing, it's usually cache or path:
- The browser cached the old favicon → hard-refresh or check in a private window
- The file path is wrong → confirm the <link href> matches the file's actual location
- favicon.ico isn't at the site root → put one at the root too
- No link tag in the HTML → add each icon <link> to the <head>
Frequently asked questions
Isn't favicon.ico alone enough?
For basic display, yes. But the iPhone home-screen icon (apple-touch-icon), Android/PWA, and dark mode need separate sizes and formats, or the icon looks off. Preparing several sizes is safest.
Why is there no favicon in search results?
Google finds the favicon on your homepage and reflects it when it recrawls, so it may not appear right after you register it. Include a multiple of 48×48, make sure the <head> links are correct, and wait a few days.
How should I design the favicon image?
It shows very small, so keep it simple. A letter or two or a simple symbol reads more clearly than a full logo. A transparent PNG or SVG looks natural on any tab background.