What favicon.ico is, why it still matters, and how to add it to your website.
favicon.ico is the classic favicon file for a
website. It is an ICO file, usually placed at the root of a
domain as /favicon.ico, that browsers use for tab
icons, bookmarks, shortcuts, and fallback favicon discovery.
Quick answer: favicon.ico
For broad compatibility, create a favicon.ico
file that contains 16x16, 32x32, and 48x48 pixel icons,
place it in your site's root directory, and link to it from
your HTML head.
<link rel="icon" href="/favicon.ico">A modern favicon setup should also include PNG icons, an Apple Touch Icon, and a web app manifest.
Yes. Modern browsers support PNG and SVG favicons, but
favicon.ico is still useful because many browsers
automatically request /favicon.ico when no icon is
declared. It is also a reliable fallback for older browsers,
bookmarks, shortcuts, and tools that expect the traditional
root favicon file.
Think of favicon.ico as the universal fallback,
not the whole package. For a polished setup, keep the ICO file
and add modern PNG sizes for Apple, Android, and PWA use cases.
A good favicon.ico file contains multiple square
images inside one ICO container. The standard sizes are:
| Size | Why Include It? |
|---|---|
| 16x16 | Classic browser tab, bookmark bar, and history icon size. |
| 32x32 | Sharper browser tabs and high-DPI displays. |
| 48x48 | Desktop shortcuts, Windows contexts, and larger fallback surfaces. |
If you also care about Google search result favicons, make sure your site has a square favicon that is crawlable and larger than 48x48 pixels. That can be an ICO, PNG, SVG, or another valid favicon format, but the URL should be stable. For the full browser, mobile, and PWA matrix, see the favicon size guide.
Put favicon.ico in your site's root directory, so
it is available at:
https://example.com/favicon.icoBrowsers can discover this root file automatically, but adding an explicit HTML link is still recommended because it removes ambiguity and helps tools understand which icon you want used.
The simplest favicon.ico HTML uses one link tag in your document head:
<link rel="icon" href="/favicon.ico">You can include the ICO MIME type if you want to be explicit:
<link rel="icon" type="image/x-icon" href="/favicon.ico">For a complete modern favicon package, use the ICO file as a fallback and add the PNG and manifest files generated by Favicon.io:
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">| Format | Best For | Notes |
|---|---|---|
| ICO | Universal fallback | Can store 16x16, 32x32, and 48x48 icons in one file. |
| PNG | Modern browser and device icons | High quality, supports transparency, one size per file. |
| SVG | Scalable modern favicons | Small and crisp at any size, but keep ICO/PNG fallbacks. |
favicon.ico and the generated PNG files
to your website root.
<head>./favicon.ico was deployed to the public root directory.favicon.ico is not enough. Add apple-touch-icon.png and site.webmanifest.favicon.ico is the traditional favicon file for a
website. It is usually placed at /favicon.ico and
can contain multiple icon sizes in one ICO file.
Include 16x16, 32x32, and 48x48 pixel images inside the ICO file. These sizes cover classic browser tabs, bookmarks, high-DPI tabs, and desktop shortcut contexts.
It is not the only valid favicon format, but it is still a
smart fallback. Modern sites should keep favicon.ico
and also include PNG icons, an Apple Touch Icon, and a web app
manifest.
No. A file named favicon.ico should be an ICO file.
PNG favicons should use .png filenames and
type="image/png" link tags.
Put it in the root directory of your website so it is available
at https://example.com/favicon.ico. Then link to it
from the HTML <head> section.
Generate a complete favicon package for free: