Basic Favicon (Minimum)
<head>
<link rel="icon" type="image/x-icon" href="/favicon.ico"/>
</head>The .ico file should be placed at the root of your site (/favicon.ico). Browsers automatically look for it there even without a <link> tag, but including the tag is best practice.
All Sizes & Tags
<head>
<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="/images/favicons/favicon.ico"/>
<!-- PNG favicons for modern browsers -->
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicons/favicon-16x16.png"/>
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicons/favicon-32x32.png"/>
<link rel="icon" type="image/png" sizes="96x96" href="/images/favicons/favicon-96x96.png"/>
<!-- Apple devices (home screen icon) -->
<link rel="apple-touch-icon" sizes="180x180" href="/images/favicons/apple-touch-icon.png"/>
<!-- Android/Chrome PWA -->
<link rel="manifest" href="/site.webmanifest"/>
<!-- Windows tiles -->
<meta name="msapplication-TileColor" content="#6366f1"/>
<meta name="theme-color" content="#060b14"/>
</head>Generating All Sizes
Start with a single high-resolution source image (at least 512×512px, PNG with transparent background) then generate all sizes:
- Use our free Favicon Generator — upload one image, download all sizes
- Or use RealFaviconGenerator.net for a comprehensive package including webmanifest
site.webmanifest for PWA
{
"name": "WebDesign001",
"short_name": "WD001",
"icons": [
{ "src": "/images/favicons/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/images/favicons/icon-512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#6366f1",
"background_color": "#060b14",
"display": "standalone"
}