A continuation of Janady13/crawler-signal-reference / framework-html-favicon-icons.md. The complete source identity, every recorded occurrence, and linked equations are on its first page.
Source transcript · continued
Download complete source text ↓1,635 lines · 61.5 KB
```html
<!-- Favicon and icons -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
```
### 25.2 With Federal SDVOSB Defensive Coverage
```html
<!-- Federal defensive: includes mask-icon -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#BRAND_HEX">
<link rel="manifest" href="/manifest.webmanifest">
```
### 25.3 Minimal Manifest.webmanifest (icons array only)
```json
{
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}
```
### 25.4 PWA Enabled Manifest.webmanifest
```json
{
"name": "Client Full Name",
"short_name": "Short Label",
"start_url": "/",
"display": "standalone",
"theme_color": "#BRAND_HEX",
"background_color": "#FFFFFF",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
{ "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]
}
```
### 25.5 Dark Mode SVG Favicon Template
```xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
.bg { fill: #FFFFFF; }
.fg { fill: #6B3FA0; }
@media (prefers-color-scheme: dark) {
.bg { fill: #0F0F0F; }
.fg { fill: #8E63C7; }
}
</style>
<rect class="bg" width="100" height="100"/>
<text class="fg" x="50" y="70" font-family="Inter, sans-serif" font-size="60"
font-weight="800" text-anchor="middle">T</text>
</svg>
```
### 25.6 The nginx Snippet
```nginx
# Web App Manifest MIME type
location ~ \.webmanifest$ {
add_header Content-Type "application/manifest+json";
}
# Icon caching
location ~* \.(ico|png|svg)$ {
expires 30d;
add_header Cache-Control "public, max-age=2592000";
}
```
End with:
```bash
nginx -t && systemctl reload nginx
```
---
## 26. REFERENCES
* W3C Web App Manifest specification (icons section): https://www.w3.org/TR/appmanifest/#icons-member
* MDN apple-touch-icon: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/apple-touch-icon
* MDN mask-icon: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/mask-icon
* Maskable icon validator: https://maskable.app
* Favicon.io generator: https://favicon.io
* Evil Martians How to Favicon in 2026: https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs
* Google Search Central favicon guidelines: https://developers.google.com/search/docs/appearance/favicon-in-search
**Companion frameworks in the HTML signal track:**
* framework-html-meta-robots.md
* framework-html-meta-charset.md
* framework-html-meta-viewport.md
* framework-html-meta-description.md
* framework-html-meta-keywords.md
* framework-html-meta-author.md
* framework-html-meta-generator.md
* framework-html-meta-copyright.md
* framework-html-meta-theme-color.md (the chrome color that frames the icons)
* framework-html-meta-color-scheme.md
* framework-html-meta-referrer.md
* framework-html-content-language.md
* framework-html-meta-refresh.md
* framework-html-open-graph.md
* framework-html-twitter-cards.md
* framework-html-search-engine-verification.md
* framework-html-app-pwa-meta.md (direct companion: apple-touch-icon and manifest reference covered there too)
* framework-html-canonical-alternate.md
**Forward references:**
* framework-pwa-manifest.md (deeper Web App Manifest field reference if separately developed).
* framework-pwa-service-worker.md (service worker layer for full PWA).
**Parent reference:** UNIVERSAL-RANKING-FRAMEWORK.md (the 27 section master document).
---
*End of framework-html-favicon-icons.md.*