âš¡IntermediateStructured Data and SEO
Favicon and Web App Icons
Set favicons, touch icons, and web app manifests for browsers, bookmarks, and home screens.
Overview
A favicon is the small icon shown in browser tabs, bookmarks, and history. Modern browsers and devices require multiple icon formats and sizes for different contexts: browser tabs, OS taskbars, iOS home screens, Android launchers, and Windows start menus.
A modern icon setup includes:
1. favicon.ico legacy browsers (IE)
2. PNG icons modern browsers (32×32, 16×16, larger sizes)
3. Apple touch icon iOS home screen add-to-homescreen
4. Web app manifest Android/PWA launcher icons
5. SVG favicon infinite resolution for modern browsers
Key Points
- •Place favicon.ico in the root older browsers find it automatically
- •<link rel="icon" href="/favicon.svg" type="image/svg+xml"> for modern browsers
- •<link rel="apple-touch-icon" href="/apple-touch-icon.png"> for iOS (180×180px)
- •<link rel="manifest" href="/site.webmanifest"> links the PWA web app manifest
- •SVG favicons are recommended for modern browsers no resolution limits
- •The manifest.json defines app name, icons, theme colors, and display mode
Examples
Complete modern favicon setup
<head>
<!-- Modern SVG favicon (infinite resolution) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- PNG fallback for Safari and older browsers -->
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png">
<!-- iOS home screen icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<!-- Web App Manifest (for Android/PWA) -->
<link rel="manifest" href="/site.webmanifest">
<!-- Theme color for browser chrome (Android) -->
<meta name="theme-color" content="#3b82f6">
</head>site.webmanifest content
{
"name": "My Application",
"short_name": "MyApp",
"description": "A web application for learning HTML",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#3b82f6",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/icons/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}A maskable icon has safe area padding for adaptive icons on Android.
SVG favicon that adapts to dark mode
<!-- An SVG favicon can use a media query for dark mode -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
@media (prefers-color-scheme: dark) {
path { fill: white; }
}
@media (prefers-color-scheme: light) {
path { fill: black; }
}
</style>
<path d="M16 2L2 30h28L16 2z"/>
</svg>SVG favicons can embed CSS media queries impossible with .ico or .png.
Common Mistakes
- Only providing a favicon.ico modern contexts (iOS, PWA, Android) need PNG and manifest icons
- Forgetting the apple-touch-icon iOS shows a generic screenshot instead of your icon
- Using a non-square icon all favicon sizes must be square
Note
Use realfavicongenerator.net to generate all required icon sizes from a single source image. It creates the ICO, PNGs, SVG, and webmanifest with optimal settings for every platform.
Exercises
Write HTML to solve each exercise. Use Preview to see it render in a live iframe, then mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4