Definition

What Is a Favicon?

A small icon (typically 16×16 or 32×32px) displayed in browser tabs, bookmarks, and address bars to visually represent a website or brand.

Related Terms

Logo

Brand Identity

Custom Domain

Mobile First

Metadata

Example

Reload Mode's favicon uses a simplified version of its logo mark so it remains recognisable at small sizes in browser tabs.

A missing or broken favicon generates a 404 error in browser network logs on every page load — contributing to unnecessary server requests and a perception of poor attention to detail.

Synonyms:

Browser icon, Tab icon

Acronyms:

-

What it applies to

Every website. The favicon appears in browser tabs, bookmarks, browser history, and on mobile home screens when a user saves the site. It is a small but visible brand touchpoint.

How to set up a favicon

  • Design a simplified version of your logo mark that works at 16×16px — remove fine detail and ensure it reads clearly as a small square.
  • Export in multiple sizes: 16×16, 32×32, 180×180 (Apple touch icon), and 192×192 (Android).
  • Use an .ico file for maximum browser compatibility, plus .png versions for modern browsers.
  • Add to your HTML <head>: <link rel="icon" href="/favicon.ico"> and <link rel="apple-touch-icon" href="/apple-touch-icon.png">

In Webflow

Upload your favicon via Project Settings → General → Favicon. Webflow accepts PNG files and handles the browser tab display automatically. For the Apple touch icon and Android icon, add the additional <link> tags via Project Settings → Custom Code → Head Code.

Best practices

  • Use SVG format if your icon is a simple shape — SVG favicons scale perfectly at any size and are supported in all modern browsers.
  • Test the favicon in both light and dark browser themes — some icons become invisible on dark tab bars if they use a dark colour without a background.

Favicon: Common Questions Answered

Question

Answer