Favicon FAQ

Can I have both a favicon.ico and a favicon.png in the root of my domain?

It's better to provide only favicon.ico and not favicon.png, because:

Is it true that favicons should be in the site root?

No, that's only if you don't explicitly specify the browser/device-specific <link> tags with a favicon path.

If you don't have favicon.ico in the root consider adding one, or returning a HTTP 204 instead. Many tools and services e.g. bookmarking sites, feed readers, web crawlers etc., request a favicon.ico from the site root, and so recieve a HTTP 404 if it's not present. In the worst case some frameworks will return a custom error page which is likely to be many times larger than the missing favicon.

Is it true that the PNG must be named favicon.png?

No, a PNG favicon can be named favicon.ico.

Is it true that the ico has to be named favicon.ico?

If you don't explicitly specify its <link> tag, yes. Explicitness is best, so we both name it favicon.ico and explicitly specify the <link> tag.

Why not prefix with "apple-touch-icon"?

If you don't specify <link> tags, iOS looks for files prefixed with apple-touch-icon or apple-touch-icon-precomposed. Many (e.g. HTML5 Boilerplate) rely on this assumption, but:

Why use iOS precomposed icons?

Why absolute paths?

Some Firefox versions require absolute paths. Since all browsers support them, it's the simplest choice.

Why not append a query string to force-refresh for all visitors?

Some proxies and load balancers can fail to read query strings in edge cases.


The information on this site has been made available thanks to the following sources: