Recommended Free Tools
Make a simple square icon, save it in a format your intended platforms support, and add a rel="icon" link inside your page’s <head>. Apple home-screen icons and installable web-app icons use separate declarations, so a browser favicon alone may not cover every place you want your branding to appear.
What size should a favicon be?
Start with a square design that stays recognizable when reduced. For Google Search, Google Search Central specifies a minimum of 8×8 pixels and recommends using an image larger than 48×48 pixels for a good result across surfaces. That is Google Search guidance, not a universal minimum for every browser or device. See Google’s favicon guidance.
As an Amazon Associate I earn from qualifying purchases.
For a raster image, declare its actual pixel dimensions in the HTML or manifest entry where applicable. A vector icon can use sizes="any" to indicate that it is scalable. The right size and declaration depend on the consumer: a browser favicon, an Apple home-screen web clip, and an installable web app do not all use the same icon setup.
Which favicon format should you use?
ICO and PNG are common choices in basic browser examples. Google Search lists BMP, GIF, ICO, PNG, JPEG, PPM, and TIFF as supported formats for its favicon feature. That list describes Google Search support; it does not mean every browser, operating system, or search surface handles every format identically. Check the requirements for each destination you need to support.
#1 Best Overall
- Comes with secure packaging
- It can be a gift item
- Easy to read text
How do I add a favicon to my website?
Put one or more favicon links in the HTML document’s <head>. For example:
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">The first declaration points to an ICO file. The second identifies a 32×32 PNG. Use paths that match files actually present on your site; change the filenames or omit a line if you do not provide that asset. When a page has multiple favicon links, browsers can consider attributes such as type, sizes, and media when selecting an icon. See MDN’s documentation on link relations.
When do you need an Apple touch icon or a web app manifest?
Apple home-screen web clips
If you want a dedicated icon when someone saves your site to an iOS home screen, provide an Apple touch icon using the separate apple-touch-icon relation. MDN’s examples include 180×180, 167×167, and 152×152 pixel assets; these are documented examples, not a complete device-by-device matrix. MDN notes that iOS uses this relation rather than treating rel="icon" and its sizes attribute the same way for web clips. See MDN’s Apple touch icon guidance.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Installable web apps
If your site is configured as an installable web app, link its manifest from the page head and put the app icon entries inside the manifest. Manifest entries can include src, sizes, and type; src is the only required member in the documented structure. A relative icon src is resolved against the manifest URL, not the HTML page URL. See MDN’s manifest icon documentation.
Rank #3
- Used Book in Good Condition
These declarations can sit together when your site provides all the corresponding assets:
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="manifest" href="/site.webmanifest">The manifest link only points to the manifest file; the app icons themselves belong in that file. A manifest example with raster and vector entries might look like this:
Rank #4
- Used Book in Good Condition
{
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon.svg",
"sizes": "any",
"type": "image/svg+xml"
}
]
}Use accurate sizes and types for files you actually serve. The example illustrates manifest fields; it does not establish a universal set of app icon dimensions.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
How can you check whether Google Search can use your favicon?
Google Search has its own eligibility and crawling conditions. Its documentation says a site can have one favicon per hostname: a subdomain can have its own, but a subdirectory does not receive a separate Search favicon from the parent hostname. Googlebot must be able to crawl both the home page and icon file. The icon should represent the site, remain at a stable URL, be square, and use a supported format. Meeting those conditions does not guarantee Google will show it.
Google says recrawling and processing can take several days to several weeks. You can request indexing of the home page through Search Console’s URL Inspection tool, but a request does not guarantee an immediate update. A favicon visible in a browser tab is not proof that it will also appear in Google Search.
Quick Recap
Common favicon setup mistakes
- Using a design that loses its shape when small: keep the artwork simple and test that it remains legible at the size where it will appear.
- Treating Google Search guidance as a browser-wide rule: Google’s size and format guidance applies to its Search feature; other consumers may differ.
- Expecting one declaration to serve every purpose: use a separate Apple touch icon for a home-screen web clip and manifest icon entries for a web-app context when needed.
- Linking a manifest without adding icons inside it: the manifest link does not itself declare the app’s icon files.
- Blocking Googlebot or changing the icon URL frequently: Google needs to crawl the home page and favicon, and recommends a stable icon URL.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
