# Favicon: Give the Site a Recognizable Browser Identity

> Why favicons matter, how to declare them, and what to ship before a website launch.

Canonical: https://softwareontheweb.com/tools/launch-readiness-checker/favicon

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.

```html
<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

1. Declare at least one valid favicon in the head.
2. Use clean, high-contrast artwork that survives small sizes.
3. Provide PNG variants for modern browsers when possible.
4. Keep the asset reachable and cacheable.

## Example

```html
<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.

## Related
- [Home](https://softwareontheweb.com/)
- [Topics](https://softwareontheweb.com/topics)