Favicon: Give the Site a Recognizable Browser Identity
A favicon is a small asset, but it shows up in places users repeatedly see.
Missing or broken favicon links make a product feel unfinished.
What It Is
A favicon is the icon used for browser tabs, bookmarks, shortcuts, and some preview surfaces.
It is usually linked in the document head and backed by one or more image files.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
Why It Matters
- It improves recognition when users keep many tabs open.
- It supports a more credible first impression.
- It helps browsers and devices display the brand consistently.
Best Practices
- Declare at least one valid favicon in the head.
- Use clean, high-contrast artwork that survives small sizes.
- Provide PNG variants for modern browsers when possible.
- Keep the asset reachable and cacheable.
Example
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
- The path is explicit.
- The asset type and size are clear.
Common Mistakes
- Broken favicon URLs.
- Uploading a detailed logo that becomes unreadable at 16px.
- Relying on one oversized image for every device.
Quick Checklist
- Favicon link in the head.
- File returns 200.
- Readable at small sizes.
- Matches current branding.
Final Takeaway
Users rarely praise a favicon, but they notice when it is missing. Ship it as part of launch polish.
