How to add a favicon and touch icons
Google shows your favicon next to search results; phones use touch icons for bookmarks. Both take a couple of link tags.
Step by step, with screenshots: Favicon and touch icons: sizes and formats that work everywhere →
Check your own site
Runs these 2 checks and the other 185, free, in about 45 seconds.
What a passing site looks like
- An apple-touch-icon is declaredwarning · −0.5 ptseffort S
- A favicon is declaredwarning · −0.5 ptseffort S
1. No apple-touch-icon is declared
Why it matters. iPhones and iPads use this icon when someone adds your site to their home screen or shares it in Messages. Without it, they show a blurry screenshot.
- Add <link rel="apple-touch-icon" href="/apple-touch-icon.png"> with a 180×180 px PNG.
In a report the technical detail reads: Detected 0 <link rel="apple-touch-icon"> elements.
2. No favicon is declared
Why it matters. Google shows the favicon next to your search result, and browsers show it in tabs and bookmarks. Without one, the result gets a generic globe icon.
- Add <link rel="icon" href="/favicon.ico" sizes="48x48"> (or an SVG/PNG of at least 48×48 px) in <head>.
- In WordPress, upload a Site Icon under Appearance → Customize → Site Identity.
In a report the technical detail reads: Detected 0 <link rel="icon"> elements; /favicon.ico was not probed.