Favicon & Web App Manifest
<link rel="icon" href="favicon.ico"> browser tab, bookmarks, aur history mein dikhne wala chhota icon set karta hai. Modern sites multiple sizes provide karte hain (16x16, 32x32, apple-touch-icon for iOS) different contexts ke liye.
Web App Manifest (manifest.json) ek JSON file hai jo website ko "installable" bana sakti hai (PWA — Progressive Web App) — app naam, icons, theme color define karta hai, taaki website mobile home screen par ek real app jaisa add ho sake.
<head>
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4285f4">
</head>- favicon = browser tab icon, multiple sizes for different contexts
- manifest.json = PWA installability, app-jaisa naam/icon/theme
- theme-color = mobile browser UI ka color match karta hai site se
Modern browsers SVG favicons support karte hain — ek hi file, kisi bhi size par sharp (vector), aur dark-mode-aware bhi ho sakta hai (CSS media queries SVG ke andar).
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<!-- Fallback purane browsers ke liye: -->
<link rel="alternate icon" href="favicon.ico">manifest.json ke important fields: name (poora app naam), short_name (home screen par dikhne wala chhota naam), icons (multiple sizes), start_url (app open hone par kaunsa page), display (standalone = app jaisa, browser UI hidden).
{
"name": "Code10x - Learn Coding",
"short_name": "Code10x",
"icons": [
{ "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "icon-512.png", "sizes": "512x512", "type": "image/png" }
],
"start_url": "/",
"display": "standalone",
"theme_color": "#4285f4",
"background_color": "#ffffff"
}