Shrinking a full logo with a wordmark into 16 px, where the text becomes an unreadable smudge.
Photo types and platforms
Favicon
Also called site icon, browser tab icon or shortcut icon. Here is what it means, when it changes what you export, and what people get wrong.
Photo types and platformsRuns on your deviceUpdated 10 August 2026
The short answer
A favicon is the small icon a browser shows for a site in tabs, bookmarks and history. The name is short for favourites icon. Modern sites ship a small set of files rather than one: an SVG, a PNG or two, an Apple touch icon and an ICO at the site root as a fallback.
Updated
The short version
Favicon at a glance
| Quick fact | Detail |
|---|---|
| Name from | Favourites icon |
| Default path | /favicon.ico at the site root |
| Formats used | ICO, PNG and SVG |
| Apple touch icon | 180 x 180 PNG |
| Design limit | One strong shape survives at 16 px |
Slide the table sideways to see every column.
Why is one file no longer enough?
The favicon started as a single favicon.ico at the root of a site, and browsers still request that path even when nothing declares it. But the icon is now used in far more places than a tab: bookmark bars, mobile home screens, search results, browser history and reading lists, each at a different size.
ICO is a container format that can hold several sizes in one file, which is why it survived. Alongside it, an SVG scales to any size from one file, and PNG covers the specific sizes that some contexts want handed to them directly.
A workable modern set is small:
- SVG icon, declared in the page head, scaling cleanly to any size.
- 32 x 32 PNG for browsers that want a raster icon.
- 180 x 180 PNG as the Apple touch icon for iOS home screens.
favicon.icoat the site root, so the automatic request finds something.
How do you design something that reads at 16 pixels?
At 16 px across you have roughly the area of a full stop on this page. Exactly one idea fits.
- One shape, not a scene. A single letter, a mark or a silhouette. A full logo with a wordmark turns into a grey bar.
- High contrast. The icon sits on browser chrome that may be light or dark, so an icon that relies on a pale background disappears in dark mode.
- No fine lines. A one-pixel stroke either vanishes or aliases into a fuzzy grey.
- Fill the square. Padding costs you the pixels you cannot spare.
Check the result at actual size on both a light and a dark browser theme before you ship it. Producing the raster sizes is mechanical: export the master once and resize it, in Photomop or any editor, then convert to ICO for the root file.
Why is the old favicon still showing?
Caching, almost always. Browsers cache favicons aggressively and separately from ordinary page assets, so a hard refresh of the page frequently does not touch it. Loading the icon URL directly in a tab, then reloading, usually settles it.
If the icon is genuinely not appearing at all, check three things: the file is reachable at the URL you declared, the server is sending an image content type rather than HTML for a missing file, and the markup in the page head points at the right path. A 404 page returned with a 200 status is a classic cause of a mysteriously blank icon.
What people get wrong about favicon
Each one is a real failure mode, not a style preference.
Designing an icon that only works on a light background, so it vanishes in a dark browser theme.
Assuming the icon did not update when the browser is simply serving a cached copy.
Declaring an icon path that returns the site's HTML error page instead of an image file.
Questions people ask
Favicon, answered
The follow-up questions people search for once they have the definition.
Do I still need a favicon.ico file?
It is worth keeping. Browsers request /favicon.ico at the site root automatically even when your markup declares other icons, so having a real file there avoids a pointless 404 and covers older clients. Everything else can be PNG and SVG.
Can a favicon be animated?
Do not rely on it. Support for animated icons is inconsistent, and a moving tab icon is a distraction rather than a feature. If you need to signal activity, change the icon to a different static state instead.
What size should a favicon be?
Design at a size that divides cleanly, then export the set. A 32 x 32 PNG covers ordinary tabs, 180 x 180 covers the Apple touch icon, and an SVG covers everything that can scale. The ICO at the root can contain multiple sizes in one file.
Why does my favicon look blurry?
Usually because a larger image was scaled down to an odd size, so edges land between pixels. Design on a grid that matches the target size, keep strokes thick, and export at exact multiples rather than letting the browser resize an arbitrary source.
Same cluster
More from the glossary
Neighbouring entries, so every term in the set is one hop from every other.
Feathering
Feathering softens the edge of a selection or mask so it fades out over a few pixels instead of stopping dead.
Exposure
Exposure is how much light your camera lets reach the sensor, which decides whether a photo comes out dark, bright or just right.
File size
File size is how many bytes an image takes up on disk, usually measured in KB or MB.
From the studio
Tools that do this
Each one runs on your own device, so the photo stays where it is.
Sources
Where the facts on this page come from. Every link opens the specification, standard or documentation the claim was read at.
Keep reading
Elsewhere on Photomop
Platform image rules
Image size, file type and background rules for 22 selling platforms, each one sourced.
Read itConvert image
JPG, PNG, WebP and AVIF, with an honest answer about HEIC and alpha.
Read itAll the tools
The whole toolbox in three families, with what each one needs before it can run.
Read itOn-device privacy
The pipeline in five steps, what leaves your device, and how to check it yourself.
Read it
Now do it to a photo
Photomop is a photo studio that runs on your own device. Resize, crop, compress, convert, batch edit, remove a background and change one all work in the browser tab you are reading this in, at full resolution and with no watermark. The on-device page shows you how to check that the photo stays put.