What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Make a simple square icon, save it in formats suited to the places your site needs to appear, and link it from the page’s <head> with rel="icon". Apple home-screen icons and installable web-app icons use separate declarations, so one favicon link does not cover every use.
How do I add a favicon to my website?
Put a <link rel="icon"> element inside the HTML document’s <head>. For example, if the file is at the site root:
<link rel="icon" href="/favicon.ico">You can also declare a PNG and its dimensions explicitly:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">Use paths that match the files you actually publish. When a page has multiple favicon links, browsers may use attributes such as type, sizes, and media to select an appropriate icon. See MDN’s rel documentation and examples and Google Search Central’s favicon guidance.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minute#1 Best Overall
- Comes with secure packaging
- It can be a gift item
- Easy to read text
What size should a favicon be?
Start with a square design that stays recognizable when reduced. Google Search Central says a Search favicon must be square (1:1), with a minimum of 8×8 pixels, and recommends an image larger than 48×48 pixels for good results across surfaces. Those are Google Search guidelines, not universal requirements for every browser or operating system. A 32×32 PNG is one practical browser-link example; provide the exact dimensions in the markup when declaring a raster image.
For Apple home-screen web clips, MDN’s examples include 180×180, 167×167, and 152×152 pixel touch-icon files. They illustrate documented sizes; they are not a complete, guaranteed current device matrix. For manifest icons, list each raster icon’s exact available size. A vector icon can use sizes="any" to indicate that it is scalable.
Which favicon format should I use?
ICO and PNG are common options in basic HTML examples, but format support depends on the browser, platform, or other consumer. Google Search Central lists BMP, GIF, ICO, PNG, JPEG, PPM, and TIFF as formats it supports for Search favicons. That list describes Google Search support; it does not mean every browser or device handles every listed format identically.
For a PNG link, declare its type and dimensions, such as type="image/png" and sizes="32x32". For a vector favicon, the scalable nature can be represented with sizes="any". Choose assets based on the destinations you need rather than assuming one format declaration guarantees the same display everywhere.
Rank #3
- Used Book in Good Condition
Do browser favicons, Apple touch icons, and app icons use the same setup?
No. They are related brand assets, but each belongs to a different display context and declaration.
| Use | Where it is declared | What to know |
|---|---|---|
| Browser favicon | HTML head with rel="icon" |
Can link to assets such as ICO or PNG; browsers may select among multiple links using their attributes. |
| Apple home-screen web clip | HTML head with rel="apple-touch-icon" |
MDN notes that iOS uses this non-standard relation rather than rel="icon" in the same way for web clips. |
| Installable web-app icon | Icon entries inside a linked web app manifest | Manifest entries can specify src, sizes, and type; src is the only required member in MDN’s documented structure. |
MDN explains the Apple touch icon distinction in its HTML rel reference; its size examples also appear in guidance for adding a launcher icon. For manifest icon fields and path resolution, see MDN’s manifest icons reference.
Rank #4
- Used Book in Good Condition
How do I include all the icons in the page head?
Include only the declarations for assets you provide. A page that needs a browser favicon, an Apple touch icon, and a manifest link could use:
<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 points to a separate file; it does not declare the app icons by itself. Add icon entries inside the manifest JSON. A relative src for a manifest icon is resolved relative to the manifest’s URL, not the page URL, so account for the manifest’s location when setting paths.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →How can I get a favicon to appear in Google Search?
Google Search’s favicon rules concern eligibility and crawling; they do not guarantee display. Google supports one favicon per site hostname. A subdomain may have its own favicon, but a subdirectory does not receive a separate Search favicon from its parent hostname.
- Use a square icon that represents the site’s brand and a format Google Search supports.
- Keep the favicon at a stable URL rather than changing its location frequently.
- Make sure Googlebot can crawl both the home page and favicon file.
- If you have changed the icon, you can request home-page indexing through Search Console’s URL Inspection tool; this does not promise an immediate update.
Google says its systems may take several days to several weeks to recrawl and process favicon information. Meeting the documented guidance still does not guarantee that Google will show the icon.
Quick Recap
Common setup mistakes to avoid
- Treating Google’s size recommendation as a universal rule: its 8×8 minimum and recommendation for larger-than-48×48 artwork apply to Google Search guidance.
- Assuming a browser-tab icon guarantees a Search icon: Search display also depends on crawlability and Google’s processing.
- Using only
rel="icon"for an Apple web clip: use the separateapple-touch-iconrelation when you provide a dedicated touch icon. - Linking a manifest without declaring its icons: put the app icon metadata in the manifest itself.
- Expecting an instant Search update: recrawling and processing can take days or weeks, and a request for indexing is not an immediate-display guarantee.
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.
