I audited a client site that had been live for six months. On a hunch, I added their site to my iPhone home screen.
A gray letter placeholder. Six months of visitors bookmarking the site and seeing a generic icon.
The Three Files Every Site Needs
Most developers stop at favicon.ico. That covers browser tabs. But it does nothing for:
- iPhone/iPad home screen bookmarks
- Android home screen shortcuts
- PWA install prompts
The minimum set is three files:
<link rel="icon" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
One-Click Generation
I use genfavicon.org to generate the complete package. It outputs all sizes plus the manifest in one download.
Quick audit: Add your site to your iPhone home screen right now. If it is a gray letter, you are missing the apple-touch-icon.
How long has your site been showing a placeholder?
Top comments (0)