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 9 checks and the other 184, free, in about 45 seconds.
Or run only this check with the free Favicon & app icon checker or the free Meta tag checker.
What it is
A favicon is the small icon that represents your site in browser tabs, bookmarks and Google search results, declared with <link rel="icon" href="…"> in the page's head. Phones use a separate apple-touch-icon, a 180 × 180 px PNG, when someone adds your site to their home screen.
Google shows the favicon next to your result on mobile and desktop, so a missing one gets a generic globe and looks less trustworthy. Google needs a square icon at least 48 × 48 px (or a multiple of 48), linked from the home page and crawlable by Googlebot.
OK looks like this: a rel="icon" link to a square icon of at least 48 × 48 px, in SVG, PNG or ICO, plus an apple-touch-icon link to a 180 × 180 px PNG. getReport checks that both are declared.
What a passing site looks like
- The favicon loadsfail · −25 ptseffort S
- A square icon of at least 48 by 48 pixels is availablewarning · −7.5 ptseffort S
- Every icon is served as an imagewarning · −5 ptseffort S
- The manifest lists 192 and 512 pixel iconswarning · −4 ptseffort M
- The apple-touch-icon is 180 by 180 pixelswarning · −3 ptseffort S
- An apple-touch-icon is declaredwarning · −0.5 ptseffort S
- A favicon is declaredwarning · −0.5 ptseffort S
- /favicon.ico answersinfo onlyeffort S
- An SVG icon is declaredinfo onlyeffort S
1. The favicon cannot be loaded
Why it matters. A declared icon that answers 404, or a web page served where an image should be, leaves every tab, bookmark and search result with a blank or generic icon. Browsers do not fall back to another icon once the declared one fails.
- Open the icon address in a browser; it must show the image, not a page or an error. Upload the file to that address or correct the href in <link rel="icon">.
- Keep a copy at /favicon.ico as well, for clients that ask there directly.
In a report the technical detail reads: The declared icon did not answer with an image.
2. No square icon of at least 48 by 48 pixels
Why it matters. Google shows your icon next to the search result only when one of your icons is square and at least 48 pixels (a multiple of 48 is best), or an SVG. With only a 16 or 32 pixel icon, the result gets a generic globe.
- Add a square PNG of 48, 96 or 192 pixels, or an SVG, with <link rel="icon" href="/icon.png" sizes="96x96"> on the home page.
- Keep the small .ico for old clients; the two do not conflict.
In a report the technical detail reads: No icon met Google's size rule.
3. Icon content type
Why it matters. An icon address that answers with HTML, often a soft 404 or a login page, looks fine in the tag and in the status code but is not an image, so browsers and Google ignore it.
- Open each icon address and make sure the server sends the file with an image content type (image/png, image/svg+xml, image/x-icon).
- If the address redirects to a page, point the href at the real file.
In a report the technical detail reads: The listed icons answered 200 without an image body.
4. No web app manifest with 192 and 512 pixel icons
Why it matters. Chrome on Android, and every browser that installs a site as an app, reads the icons from the web manifest linked with rel=manifest. Without a 192 and a 512 pixel icon there, the installed app and the splash screen get a generic icon.
- Add a manifest file linked with <link rel="manifest" href="/site.webmanifest"> that lists a 192 by 192 and a 512 by 512 pixel PNG, ideally one of them with purpose maskable.
- In WordPress, a Site Icon of at least 512 pixels covers this when the theme or an SEO plugin writes the manifest.
In a report the technical detail reads: The manifest or its icons were missing.
5. The apple-touch-icon is not 180 by 180 pixels
Why it matters. iOS scales the touch icon to 180 by 180 pixels; a smaller one looks blurry on the home screen and in Messages, and a non-square one is stretched. Transparent areas are filled with black.
- Export a 180 by 180 pixel PNG without transparency and declare it with <link rel="apple-touch-icon" href="/apple-touch-icon.png">.
In a report the technical detail reads: The touch icon measured a different size.
6. 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.
7. 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.
8. /favicon.ico does not answer
Why it matters. Some clients, feed readers and crawlers request /favicon.ico from the site root without reading the page's tags. A 404 there fills the server log with errors and leaves those clients without an icon.
- Optional. Put a 32 by 32 pixel .ico file at the site root, next to the declared icons.
In a report the technical detail reads: /favicon.ico did not answer with an image.
9. No SVG icon
Why it matters. An SVG icon is drawn at whatever size the tab or bookmark needs, stays sharp on every screen, and can carry a dark-mode style. Safari still needs a PNG or an .ico next to it.
- Optional. Add <link rel="icon" href="/icon.svg" type="image/svg+xml"> before the PNG or .ico fallback.
In a report the technical detail reads: No icon was an SVG.
Questions people ask
What is a favicon?
A favicon, short for favourite icon, is a small square image that browsers show in the tab, the bookmarks bar and history next to your page title. Search engines and phones also use it to represent your site. It is usually your logo or its first letter, simplified to read at 16 to 48 pixels.
What is favicon.ico?
favicon.ico is the traditional favicon file in the ICO format, which can hold several sizes in one file. Browsers still look for /favicon.ico at the root of a site when no icon is declared. Today you can also use a PNG or SVG declared with rel="icon"; keeping a favicon.ico as a fallback does no harm.
How do you make a favicon?
Start from a simple square version of your logo, then export it as a 48 × 48 px PNG or larger multiple of 48, or as an SVG. Favicon generators can also build an ICO file and the 180 × 180 px apple-touch-icon from one image. Test that it stays recognisable at 16 px.
How do you add a favicon in HTML?
Upload the icon to your site and add <link rel="icon" href="/favicon.svg" type="image/svg+xml"> (or a PNG or ICO) inside the head of every page, plus <link rel="apple-touch-icon" href="/apple-touch-icon.png">. In WordPress, upload a Site Icon under Appearance → Customize → Site Identity instead.
Why is my favicon not showing in Google?
Google may need weeks to recrawl the icon, and it only shows favicons that are square, at least 48 × 48 px, linked from the home page and not blocked by robots.txt. It also skips icons it considers inappropriate. Check those points, then wait for Google to recrawl your home page.