Question 1

What favicon formats does a website need?

Accepted Answer

A complete favicon setup includes four formats: a favicon.ico file at the root of the domain for legacy browser support, a PNG icon (32×32 or 192×192) declared with <link rel='icon'> for modern browsers, an apple-touch-icon (180×180 PNG) for iOS home screen bookmarks, and a web app manifest file linking to larger icons for Android and PWA support. Missing any of these degrades the user experience on specific platforms.

Question 2

Why do I need an Apple touch icon?

Accepted Answer

When iOS users add your website to their home screen, Safari uses the apple-touch-icon to create the icon. Without one, iOS takes a screenshot of the page and scales it down as the icon — resulting in a blurry, unrecognizable image. The recommended size is 180×180 pixels PNG. It should be declared with <link rel='apple-touch-icon' href='/apple-touch-icon.png'> in your HTML head.

Question 3

Does a missing favicon affect SEO?

Accepted Answer

A missing or broken favicon does not directly affect search rankings. However, Google displays favicons in search results next to your site name, and a missing favicon results in a generic placeholder icon. This reduces brand recognition and can lower click-through rates compared to competitors with clearly branded favicons. Chrome and other browsers also display a broken icon indicator in the tab when favicon.ico returns a 404.

Question 4

What size should a favicon be?

Accepted Answer

You need multiple sizes for different contexts. The minimum is a 16×16 and 32×32 PNG for browser tabs. Add 180×180 for Apple touch icon (iOS home screen) and 192×192 plus 512×512 for Android and PWA manifests. The favicon.ico file at your domain root should be a multi-size ICO containing 16×16 and 32×32 variants. For Google search results, Google fetches and resizes to 16×16, so your design should remain recognizable at that size.

Question 5

Why is my favicon not showing in Chrome?

Accepted Answer

The most common reasons are: the favicon file returns a 404 error, the link tag in HTML points to a wrong or relative path, the favicon is cached from an old version (try clearing browser cache or opening in incognito), or the MIME type is incorrect (PNG favicons require type='image/png' in the link tag). Chrome also sometimes delays showing a new favicon — force a refresh with Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac).

Question 6

What is a web app manifest and do I need one?

Accepted Answer

A web app manifest is a JSON file (typically site.webmanifest or manifest.json) that defines how your website behaves when installed as a Progressive Web App on Android and desktop Chrome. It specifies icons, theme colors, display mode, and app name. While not required for basic websites, a manifest enables Android home screen installation, the Chrome PWA install prompt, and maskable icons. Declare it with <link rel='manifest' href='/site.webmanifest'> in your HTML head.

Question 7

How do I add a favicon to my website?

Accepted Answer

Place a favicon.ico file in your website root directory (it will be served automatically without any HTML tag needed). Then add and inside your HTML . In WordPress, go to Appearance → Customize → Site Identity. In Next.js, place favicon.ico in the /app directory and it is automatically served.

Check your faviconsin seconds.

Favicon.ico Check

Apple Touch Icon

Web Manifest

Live Previews

HTTP Status Check

Sizes Declaration

What the Favicon Checker Analyzes

Favicon Best Practices

Favicons in Google Search Results