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 →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
You can select an icon from a website’s existing homepage declarations without requesting a separate logo—but the right choice depends on where the icon will appear. A browser tab, an iOS web clip, an installed web app, and Google Search may use different declarations and apply different rules.
What does it mean to rank a website’s declared icons?
It means inspecting the homepage markup for icon candidates, then evaluating each candidate for a specific destination. The <head> may declare several files, and the declaration itself indicates how a browser or platform can use them. There is no universal ranking formula shared by every browser and service.
| # | Preview | Product | Price | |
|---|---|---|---|---|
| 1 |
|
Web Design: Flash Sites (Icons) | $11.00 | Buy on Amazon |
| 2 |
|
Web Design: Studios 1 (Icons) (English and German and French Edition) | $4.99 | Buy on Amazon |
| 3 |
|
Web Design: E-Commerce (Icons) | $8.13 | Buy on Amazon |
| 4 |
|
Web Design: Best Portfolios (Icons) | $9.99 | Buy on Amazon |
| 5 |
|
Web Design: Interactive & Games (Icons) (German Edition) | $15.97 | Buy on Amazon |
For example, a site might declare a compact tab icon with rel="icon", an Apple touch icon for an iOS web clip, and larger icons in a web app manifest for an installable app. Those files are not interchangeable just because they all depict the same brand.
How does a browser choose a page icon?
Look in the homepage’s <head> for one or more <link rel="icon"> elements. Each element’s href points to an icon resource. When there are multiple candidates, browsers can consider the declared media condition, MIME type, and dimensions. MDN describes browsers choosing the most appropriate candidate; when candidates are equally appropriate, the last one is used, and a browser may try another if a candidate proves unsuitable. These documented inputs do not amount to a fixed cross-browser scoring formula. MDN: the rel attribute
#1 Best Overall
When assessing candidates for a page icon, compare:
- Declaration: Is the relation
icon? - Format: Does the declared MIME type match the file, and can the target browser use that format?
- Dimensions: What pixel sizes are available, and what does the
sizesattribute declare? - Media: Does a
mediacondition apply in the current context? - Fallback suitability: If a candidate cannot be used, is another declared option available?
Do not simply choose the first or largest image. A large asset may target an installed app, while a smaller one may be a more suitable browser page icon.
Rank #2
- Used Book in Good Condition
Which declaration applies to each platform surface?
| Surface | Where to look | What to evaluate |
|---|---|---|
| Browser page or tab | Homepage <head>, link rel="icon" |
Declared format, dimensions, media applicability, and browser support |
| iOS web clip or startup placeholder | Homepage declarations such as apple-touch-icon and apple-touch-startup-image |
Whether the page supplies the Apple-specific convention for that use |
| Installed progressive web app | Web app manifest linked from the document | Manifest information for the app, including its declared icons |
| Google organic Search favicon | Homepage icon declaration and the referenced image URL | Google’s separate eligibility, crawlability, size, and hostname requirements |
MDN notes that iOS does not use rel="icon" and its sizes attribute in the same way for web clips or startup placeholders; Apple’s touch-icon conventions apply there. A web app manifest is a JSON file linked from the document head that provides information used for installing a progressive web app, including its icons. A manifest icon therefore does not automatically replace a browser’s tab icon. MDN: the rel attribute MDN: Web app manifests
How is Google Search’s favicon handled differently?
Google Search reads a favicon from a site’s homepage and applies its own eligibility rules; this is not a general-purpose browser icon-ranking system. Google supports one favicon per site hostname, so a subdirectory does not receive an independent Search favicon. Googlebot and Googlebot-Image must be allowed to crawl both the homepage and the icon file. Google Search Central: favicon guidelines
Rank #3
- The image must be square, with a 1:1 aspect ratio.
- It must be at least 8 by 8 pixels; Google recommends an image larger than 48 by 48 pixels.
- Supported formats listed by Google are BMP, GIF, ICO, PNG, JPEG, PPM, and TIFF.
- Keep the favicon URL stable so Google can continue to retrieve it.
These are Google Search eligibility and implementation guidelines, not a guarantee of display. Google says processing after a recrawl can take several days to several weeks, and states: “A favicon isn’t guaranteed to appear in Google Search results, even if all guidelines are met.” Requesting homepage indexing through URL Inspection is possible, but it does not guarantee that the favicon will appear. Google Search Central: favicon guidelines
How to evaluate a homepage’s candidates
- Choose the destination first. Decide whether you are selecting for a browser page, iOS web clip, installed web app, or Google Search.
- Inspect the homepage declarations. Review its
<head>for relevantlinkelements and note eachrel,href,type,sizes, andmediavalue. - Check the resource itself. Confirm that the file is reachable, its actual format matches the declaration, and its pixel dimensions suit the intended destination.
- Apply the destination’s conventions. Use the page-icon declaration for a browser icon, Apple touch conventions for the iOS use described by MDN, and manifest declarations for app-installation use.
- Apply Google’s separate checks when Search is the target. Confirm a square supported image, the minimum dimensions, crawl access for Googlebot and Googlebot-Image, and a stable URL. Evaluate it at the hostname level rather than as a subdirectory-specific icon.
What about the proposed icon-discovery standard?
The community Website Icon Standard proposes discovering icons under /.well-known/icons/, including SVG and ICO defaults, and documents /favicon.ico as a backward-compatibility path. It is a proposal, not evidence that every browser, crawler, or other client implements that convention. For current selection, prioritize declarations and requirements that the target platform documents. Website Icon Standard proposal
Quick Recap
Best Value
- Used Book in Good Condition
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.
Recommended Free Tools
