How to Create a Favicon for Your Website — Complete Guide

What Is a Favicon and Why Does It Matter?

A favicon (short for "favorite icon") is the small icon that appears in browser tabs, bookmarks, history lists, and search results next to your website's name. Despite its tiny size, a favicon plays a significant role in how users perceive and interact with your site.

Think about how you manage multiple open browser tabs. When you have ten or more tabs competing for space, the favicon is often the only visual identifier that helps you find the right page. Without one, your site displays a generic blank document icon — an immediate signal that the site may be unfinished or untrustworthy.

Favicons contribute to your website in several important ways:

• Brand recognition — A consistent favicon reinforces your brand identity across every browser and device.
• User experience — Visitors can quickly locate your tab among dozens of open pages.
• Professionalism — A missing favicon suggests a lack of attention to detail.
• Search visibility — Google and other search engines display favicons in mobile search results, making your listing more recognizable.
• Bookmarks and home screens — When users save your site, the favicon becomes the visual shortcut they associate with your brand.

In short, a favicon is one of the smallest assets on your website, but its absence is immediately noticeable.

Favicon Sizes Explained

One of the most common points of confusion is which sizes you actually need. Different browsers, operating systems, and devices request different icon sizes. Here is a breakdown of every standard size and where it is used.

16x16 — Browser Tab (Legacy)

The original favicon size, still used in some older browsers for tab icons and the address bar. Most modern browsers have moved to 32x32, but 16x16 remains a safe fallback when bundled inside an ICO file.

32x32 — Browser Tab (Standard)

This is the primary size for desktop browser tabs in 2026. Chrome, Firefox, Safari, and Edge all use this size for displaying the tab icon. It is the single most important favicon size to get right.

48x48 — Windows Taskbar

Windows uses the 48x48 variant when a website is pinned to the taskbar or displayed in shortcut tiles. Including this size ensures your icon renders crisply on Windows devices.

180x180 — Apple Touch Icon

When an iOS user adds your website to their home screen, Safari uses a 180x180 PNG as the app icon. This size is specified using the apple-touch-icon link tag and is critical for any site with mobile traffic.

192x192 — Android Chrome

Android Chrome uses a 192x192 icon for the "Add to Home Screen" feature and Progressive Web App (PWA) manifests. This size should be included in your site.webmanifest file.

512x512 — PWA Splash Screen

The 512x512 icon is used for PWA splash screens on Android devices and in the Chrome Web Store. If you are building a PWA, this size is mandatory for passing Lighthouse audits.

Quick Reference Table

Size	Purpose	Format	Required?
16x16	Legacy browser tabs	ICO	Recommended
32x32	Desktop browser tabs	ICO/PNG	Yes
48x48	Windows taskbar	ICO/PNG	Recommended
180x180	Apple Touch Icon	PNG	Yes
192x192	Android home screen, PWA	PNG	Yes
512x512	PWA splash screen	PNG	For PWAs

Favicon Formats: ICO vs PNG vs SVG

Choosing the right file format for your favicon depends on your browser support requirements and how much flexibility you need.

ICO — The Universal Format

The ICO format has been the standard since Microsoft introduced favicons in Internet Explorer 5. An ICO file can bundle multiple sizes (16x16, 32x32, 48x48) into a single file, which makes it the most broadly compatible option. Every browser, including legacy versions, supports ICO.

The main drawback is that ICO files are larger than equivalent PNGs and do not support the level of detail that SVG offers.

PNG — The Modern Standard

PNG favicons offer better compression, transparency support, and sharper rendering at specific sizes. Most modern browsers (Chrome, Firefox, Edge, Safari 12+) fully support PNG favicons. If you are targeting only modern browsers, PNG is the cleanest approach.

The limitation is that PNG icons are raster-based, meaning each size requires a separate file.

SVG — The Scalable Future

SVG favicons are vector-based, which means a single file looks sharp at every resolution. They also support CSS media queries, enabling features like automatic dark mode adaptation:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    rect { fill: #1a1a2e; }
    @media (prefers-color-scheme: dark) {
      rect { fill: #e0e0e0; }
    }
  </style>
  <rect width="32" height="32" rx="6" />
  <text x="16" y="22" text-anchor="middle" fill="#fff" font-size="18" font-weight="bold">T</text>
</svg>

SVG favicons are supported in Chrome, Firefox, and Edge. Safari added support in version 15. However, you still need ICO or PNG fallbacks for full compatibility.

Which Format Should You Use?

The recommended approach in 2026 is to provide all three:

1. An ICO file containing 16x16, 32x32, and 48x48 sizes for maximum compatibility.
2. PNG files at 180x180 and 192x192 for Apple and Android devices.
3. An SVG file for modern browsers that supports dark mode.

How to Create a Favicon

There are multiple approaches to creating a favicon, ranging from fully manual to fully automated.

Option 1: Use an Online Favicon Generator

The fastest way to create a complete favicon package is with a dedicated tool. Try our free Favicon Generator — it accepts any image and automatically produces all the sizes and formats you need, including the ICO bundle, Apple Touch Icon, Android icons, and the web manifest configuration.

Using a generator saves significant time because it handles the resizing, format conversion, and optimization in one step.

Option 2: Design from Scratch in a Graphics Editor

If you want full creative control, start with a 512x512 canvas in Figma, Adobe Illustrator, or Inkscape. Design your icon at this large size, then export it at each required dimension:

1. Create a new 512x512 artboard.
2. Design your icon with simplicity in mind — fine details will be lost at 16x16.
3. Export PNG versions at 512, 192, 180, 48, 32, and 16 pixels.
4. Convert the smaller sizes into an ICO file using a tool like ImageMagick.

Option 3: Convert an Existing Logo

If you already have a logo, you can adapt it into a favicon. Keep in mind that logos with text or intricate details rarely work well at small sizes. Consider using just the logomark (the symbol portion) or the first letter of your brand name.

Generating an ICO File with ImageMagick

For developers comfortable with the command line, ImageMagick can create a multi-resolution ICO file from PNG sources:

# Generate individual sizes from a source image
magick source-512.png -resize 16x16 favicon-16.png
magick source-512.png -resize 32x32 favicon-32.png
magick source-512.png -resize 48x48 favicon-48.png

# Bundle them into a single ICO file
magick favicon-16.png favicon-32.png favicon-48.png favicon.ico

HTML Code to Add Favicons to Your Website

Once you have generated your favicon files, add the following tags inside the <head> section of your HTML:

<head>
  <!-- Standard favicon (ICO for universal support) -->
  <link rel="icon" href="/favicon.ico" sizes="48x48" />

  <!-- SVG favicon for modern browsers with dark mode support -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />

  <!-- Apple Touch Icon -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />

  <!-- Web App Manifest for Android and PWAs -->
  <link rel="manifest" href="/site.webmanifest" />
</head>

Your site.webmanifest file should reference the larger PNG icons:

{
  "name": "Your Website",
  "short_name": "YourSite",
  "icons": [
    {
      "src": "/favicon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Framework-Specific Implementation

If you are using a modern framework, favicon configuration may differ slightly.

Next.js (App Router):

Place your favicon files in the app/ directory. Next.js automatically serves favicon.ico from this location. For additional icons, use the metadata API:

// app/layout.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: "/favicon.ico", sizes: "48x48" },
      { url: "/favicon.svg", type: "image/svg+xml" },
    ],
    apple: "/apple-touch-icon.png",
  },
};

Astro:

Add the link tags directly in your base layout's <head>:

---
// src/layouts/BaseLayout.astro
---
<html>
  <head>
    <link rel="icon" href="/favicon.ico" sizes="48x48" />
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />
  </head>
  <body><slot /></body>
</html>

Best Practices for 2026

Favicon standards and browser behavior continue to evolve. Here are the current best practices to follow.

Provide Multiple Formats

Do not rely on a single favicon file. Serve ICO for legacy browsers, PNG for Apple and Android, and SVG for modern browsers. This layered approach ensures your icon looks correct everywhere.

Support Dark Mode with SVG

More users are browsing in dark mode than ever before. An SVG favicon with a prefers-color-scheme media query will automatically adapt its colors to match the user's system theme, avoiding the problem of a dark icon disappearing against a dark browser tab bar.

Keep the Design Simple

Your favicon will be rendered as small as 16x16 pixels. At that size, subtle gradients, thin lines, and small text are invisible. Use bold shapes, high contrast colors, and minimal detail. A single letter or a simple geometric symbol works best.

Optimize File Size

Favicons are loaded on every page visit. Run your PNG files through an optimizer like pngquant or optipng to reduce file size without visible quality loss. SVG files should be cleaned with svgo to remove unnecessary metadata.

# Optimize PNG favicons
pngquant --quality=65-80 favicon-192.png -o favicon-192.png
optipng -o7 favicon-32.png

# Optimize SVG favicon
svgo favicon.svg -o favicon.svg

Use a Web App Manifest

Even if you are not building a PWA, a site.webmanifest file tells Android Chrome where to find your icons and defines your app's theme color. It takes less than a minute to set up and significantly improves the "Add to Home Screen" experience.

Test Across Browsers and Devices

After deploying your favicons, verify them on multiple browsers (Chrome, Safari, Firefox, Edge) and devices (desktop, iOS, Android). Use browser developer tools to confirm the correct icon is loading at each size.

Common Mistakes to Avoid

Even experienced developers make these errors when implementing favicons. Here is what to watch out for.

Using Only favicon.ico

Relying on a single ICO file means your icon will look blurry on high-DPI Apple and Android devices. Always include dedicated PNG files at 180x180 and 192x192.

Ignoring the Apple Touch Icon

If you skip the apple-touch-icon, iOS will take a screenshot of your page and use it as the home screen icon. The result is almost always an unreadable, zoomed-in snapshot of your layout.

Placing the Favicon in the Wrong Directory

The ICO file should be at the root of your domain (/favicon.ico) because some browsers and crawlers look for it there by default, regardless of what your HTML specifies.

Forgetting to Cache-Bust After Updates

Browsers aggressively cache favicons. When you update your icon, users may see the old version for days or weeks. Append a version query parameter to force a refresh:

<link rel="icon" href="/favicon.ico?v=2" sizes="48x48" />

Overcomplicating the Design

A detailed company logo with a tagline will not scale down to 16 pixels. Simplify aggressively. Many successful brands use a single letter or abstract mark as their favicon rather than their full logo.

Skipping the Manifest File

Without a site.webmanifest, Android devices will fall back to lower-resolution icons or generate their own. The manifest takes minutes to create and prevents this problem entirely.

Conclusion

A well-implemented favicon is a small detail that reflects the overall quality of your website. By providing the right sizes, formats, and HTML markup, you ensure that your brand is represented consistently across every browser, device, and platform.

To get started quickly, use our free Favicon Generator to create all the files you need from a single source image. Upload your logo or design, download the complete package, and add the HTML tags to your site — the entire process takes less than a minute.

The key takeaways for 2026: serve ICO, PNG, and SVG together; support dark mode with an SVG media query; keep your design simple and bold; and always test your favicons across real devices before launching.