Website Favicon and App Icon Checker
Inspect all favicon variants, Apple touch icons, and PWA web app manifest assets configured on any URL.
Technical Architecture: Reverse-Engineering Multi-Platform Icon Detection​
Modern web applications must supply distinct icon assets tailored for desktop browser tabs, iOS home screen shortcuts, Android Progressive Web App (PWA) launcher matrices, and dark mode themes.
Because direct browser requests are blocked by CORS restrictions, the Icon Checker queries a serverless proxy endpoint (/api/fetchFavicon) to parse HTML link elements and fetch remote web app manifests.
1. Serverless HTML Link Parsing & Absolute URL Resolution​
The backend parses the remote document using Cheerio, querying standard and vendor-specific <link> rel attributes:
// api/fetchFavicon.js (extract)
const cheerio = require('cheerio');
module.exports = async (req, res) => {
const { url } = req.query;
const targetUrl = new URL(url);
const origin = targetUrl.origin;
const response = await fetch(targetUrl.href, {
headers: {
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) IconChecker/1.0'
}
});
const html = await response.text();
const $ = cheerio.load(html);
const icons = [];
// Query DOM for standard and mobile icon declarations
$('link[rel="icon"], link[rel="shortcut icon"], link[rel="apple-touch-icon"], link[rel="mask-icon"]').each((_, el) => {
const href = $(el).attr('href');
const rel = $(el).attr('rel');
const sizes = $(el).attr('sizes') || 'any';
const type = $(el).attr('type') || '';
if (href) {
try {
const absoluteUrl = new URL(href, targetUrl.href).href;
icons.push({ url: absoluteUrl, rel, sizes, type });
} catch (e) {
// Ignore invalid URL strings
}
}
});
// Always check default root fallback if no favicon was discovered in HTML
if (!icons.some(i => i.rel.includes('icon'))) {
icons.push({ url: `${origin}/favicon.ico`, rel: 'icon (default fallback)', sizes: '32x32', type: 'image/x-icon' });
}
// ...
};
2. PWA Web App Manifest Parsing​
If a <link rel="manifest" href="..."> tag is discovered, the serverless function fetches the JSON payload and inspects the icons array for high-resolution Progressive Web App icons:
async function parseManifestIcons(manifestUrl, icons) {
try {
const res = await fetch(manifestUrl);
if (!res.ok) return;
const manifest = await res.json();
if (Array.isArray(manifest.icons)) {
for (const icon of manifest.icons) {
icons.push({
url: new URL(icon.src, manifestUrl).href,
rel: `manifest (${icon.purpose || 'any'})`,
sizes: icon.sizes || 'any',
type: icon.type || 'image/png'
});
}
}
} catch (err) {
// Graceful fallback if manifest is inaccessible
}
}
3. Modern Cross-Platform Icon Specifications​
| Icon Type | Target Size (px) | MIME Type / Format | Purpose & Platform |
|---|---|---|---|
| Legacy Favicon | 32 × 32 | image/x-icon (.ico) | Legacy desktop browsers, IE/Edge fallback |
| Modern Vector | Scalable | image/svg+xml | Modern Chrome/Firefox; dark & light theme auto-switch |
| Apple Touch Icon | 180 × 180 | image/png | iOS Safari "Add to Home Screen" launcher icon |
| PWA Standard | 192 × 192 | image/png | Android Chrome homescreen app icon |
| PWA Splash / High-DPI | 512 × 512 | image/png | PWA splash screens and app store installation listings |
| Maskable Icon | 512 × 512 | image/png (purpose: maskable) | Adaptive safe-zone icons cropped into circle/squircle by Android |
4. Client-Side Security & Proxy Data Guarantee​
- Ephemeral Inspection: All network calls execute in stateless Vercel edge containers.
- No Cache Retention: Remote icons are inspected for HTTP header headers (
Content-Type,Content-Length) and returned without disk caching. - SSRF Shield: Blocks probes targeting private subnets (
10.0.0.0/8,192.168.0.0/16,127.0.0.1).
Get notified about updates to this tool
No spam. Just high-quality updates about new features and guides.
Related Tools​
Related Posts​
Markdown is a lightweight markup language that allows you to format plain text. It is widely used for documentation, writing articles, and creating web content.
A guide for senior developers on identifying and avoiding off-by-one errors in JavaScript with practical code examples.
You can check the history of a specific line in VS Code using the built-in features or the specific view. You can also install the free extension.