Skip to content

Favicon

What a favicon is, where it appears, which formats and sizes to use, and common mistakes when creating one.

A favicon is the small icon that identifies a website in browser tabs, bookmarks, history lists and some search results. The name comes from "favorites icon", the term Internet Explorer used for bookmarks.

Browsers originally requested a file named favicon.ico from the site root. The ICO format can hold several sizes in one file, such as 16×16, 32×32 and 48×48 pixels. Current HTML declares icons with a link element whose rel attribute is icon, and the file can be PNG or SVG as well as ICO.

Apple devices use a separate touch icon for home screen shortcuts, usually a 180×180 PNG. Installable web apps list larger icons, often 192×192 and 512×512, in a web app manifest.

Favicon formats and sizes

FileFormatCommon sizes
favicon.icoICO16, 32, 48 px in one file
Icon linkPNG or SVG32×32 PNG, or one scalable SVG
Apple touch iconPNG180×180
Manifest iconsPNG192×192, 512×512

Where favicons appear

  • Browser tabs and the address bar.
  • Bookmarks, reading lists and history.
  • Home screen shortcuts on phones and tablets.
  • Search results and link previews in some services.

How to create a favicon

  1. Start from a square logo mark, not the full wordmark.
  2. Simplify it so it reads at 16×16 pixels.
  3. Export PNG sizes, an optional SVG and an ICO file.
  4. Add the link elements to the page head and test in several browsers.

In a real publishing workflow

A missing favicon shows as a generic icon in tab screenshots and documentation. Before you capture browser windows for a guide or a launch post, confirm that the favicon loads. Browsers cache favicons aggressively, so an old icon can persist after an update.

Common mistakes

  • Using a detailed logo that turns into a blur at 16 pixels.
  • Forgetting the Apple touch icon, so phones show a page screenshot instead.
  • Serving a transparent icon that disappears on dark browser themes.
  • Testing in only one browser.

Have an image to fix right now?

Convert a logo between PNG, JPG and WebP with Image Converter, and check its pixel size with Screenshot Resolution Checker.

Common questions

Is favicon.ico still needed?

Many sites still include it because some tools request it from the site root. A PNG or SVG icon link covers current browsers.

Can a favicon be animated?

Some browsers show animated GIF favicons, but support varies. A static icon is the reliable choice.

Sources

Taking the same screenshots again and again?

Temposhot captures a screen, window or area on a timer and exports the set as a PDF, images, ZIP or MP4. The free browser tools fix single images.

Download for MacSee features

Related resources

Related terms

All glossary terms