Skip to main content
Web Design June 18, 2026 · 5 min read

What Is a Favicon and How to Create One for Your Website

The tiny icon next to your website's name in a browser tab is called a favicon. It's one of the smallest assets on your site — but it has a big impact on professionalism and brand recognition. Here's everything you need to know.

What Is a Favicon?

Favicon stands for "favourites icon" — the name comes from Internet Explorer, which displayed the icon when a page was added to favourites. Today, favicons appear in many places:

  • The browser tab, next to the page title
  • Browser bookmark bars and bookmark managers
  • Browser history and address bar suggestions
  • Home screen icons when a website is saved to a phone (as a PWA)
  • Search engine results — Google sometimes shows favicons next to page titles
  • Link previews in apps like Slack, Notion, and Linear

What Size Should a Favicon Be?

The frustrating answer is: multiple sizes. Different browsers and devices use different sizes. Here is the modern recommended set:

File Size Used for
favicon.ico 16×16, 32×32 (multi-size) Legacy browsers, Windows browser chrome
favicon-32.png 32×32 Standard browser tab on most desktops
favicon-16.png 16×16 Small browser tabs
apple-touch-icon.png 180×180 iOS home screen shortcut
android-chrome-192.png 192×192 Android home screen shortcut
android-chrome-512.png 512×512 Android splash screen
og-default.png 1200×630 Social sharing preview (not a favicon but related)

ICO vs PNG vs SVG

ICO

The original favicon format. A single .ico file can contain multiple sizes (16, 32, 48 px) in one file. Required for Internet Explorer and some email clients. Best placed at the root as /favicon.ico — browsers automatically look there.

PNG

The modern standard. Cleaner at all sizes, supports transparency, and widely supported. Use PNG for most of your favicon sizes.

SVG

An SVG favicon scales perfectly to any size and supports dark mode via CSS media queries. Add it with <link rel="icon" type="image/svg+xml" href="/favicon.svg"> alongside your .ico fallback.

How to Create a Favicon

Step 1: Design your icon

A favicon is tiny — the effective area at 16×16 px is barely 256 pixels total. Keep it extremely simple:

  • Use a single letter, symbol, or simplified version of your logo
  • Avoid thin lines and small details — they disappear at small sizes
  • Use high contrast — it needs to be visible on both light and dark browser tabs
  • Start designing at 512×512 px, then check how it looks scaled down to 32×32 and 16×16

Step 2: Generate all sizes

Our Favicon Generator takes a single PNG or SVG file and outputs all the sizes you need, packaged as a ZIP file with an HTML snippet to paste into your <head>.

Step 3: Add the HTML

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Generate all favicon sizes in one click

Upload your logo and download a complete favicon package with HTML snippet.

⭐ Favicon Generator
← Back to Blog