Favicons identify tabs, bookmarks, and history entries at a glance. They also appear on mobile home screens when users “install” progressive web apps.
Declaring icons
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<!-- WebP icons work in modern browsers when you serve the right type -->
<link rel="icon" type="image/webp" href="/images/baby-icon.webp" sizes="128x128">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">Rendered sample icon (course asset)
Same file as above—browsers downscale for the tab; design a square master if you ship multi-size ICO/PNG packs.
Shown at 64×64 CSS pixels—verify legibility at 16px in real favicon exports.
Formats
- ICO bundles multiple sizes for legacy tabs.
- PNG offers crisp transparency.
- SVG scales cleanly but ensure single-color icons remain legible at 16px.
Tips
- Provide at least a square master asset and export needed sizes.
- Use stable URLs with cache busting only when file contents change.
- Align with manifest icons when shipping PWAs.
Cache frustration most teams blame on “CDN magic”
- Browsers aggressively cache favicons—changing them without filename or query updates means users keep stale tabs for hours.
- Ship multiple densities (16/32/etc.) so crisp Windows taskbars aren’t blurry upscales.
Important interview questions and answers
- Q: What makes image delivery accessible and performant?
A: Meaningful `alt`, correct intrinsic `width`/`height`, and responsive sources (`srcset`/`sizes` or `picture`) based on viewport needs. - Q: When do you use a table in HTML?
A: Only for real tabular data, not page layout; use `th`, `scope`, and `caption` to preserve structure for assistive tech. - Q: What is the role of the `head` element in production apps?
A: It provides critical metadata like charset, viewport, title, canonical/social tags, and linked resources used by browsers and crawlers.
Tip: Ship SVG or PNG favicons plus apple-touch-icon for mobile home screens.