Updated March 14, 2026 · 11 min read

How to Create a Favicon: Complete Guide (2026)

This guide covers everything you need to know about favicons in 2026: what sizes you need, which file formats to use, how to add them to your HTML, and how to test that they work across every browser and device. Whether you are building your first website or updating an existing one, you will walk away with a complete, production-ready favicon setup.

At the end of this guide, you will find a free favicon generator that creates all the sizes and formats you need in seconds.

What Is a Favicon?

The word "favicon" is short for "favorite icon." It was originally introduced by Internet Explorer 5 in 1999 as the icon displayed when a user bookmarked (or "favorited") a page. Since then, favicons have become a standard part of the web, appearing in multiple places across browsers and operating systems:

• Browser tabs: The most visible location. When users have 10 or more tabs open, the favicon is often the only way they identify your site.
• Bookmarks and reading lists: Favicons appear next to saved pages, helping users find your site in a long list.
• Browser history: Each entry in the history panel shows the site's favicon.
• Search engine results: Google and other search engines display favicons next to URLs in search results, increasing click-through rates for branded sites.
• Home screen icons: When users add your site to their phone's home screen, the favicon (or Apple Touch Icon) serves as the app icon.
• Progressive Web Apps (PWAs): Favicons define the app icon in the PWA manifest, appearing in app switchers and splash screens.

Without a favicon, browsers display a generic globe or document icon. This is a missed branding opportunity and, for many users, a subtle signal that the site may be amateurish or untrustworthy.

Favicon Sizes: Every Size You Need in 2026

One of the most confusing aspects of favicons is sizing. Different browsers, devices, and operating systems request different sizes. Here is the complete list of favicon sizes you should provide, along with where each one is used:

The Minimum Set

If you want to cover the vast majority of use cases without overcomplicating things, provide these three files:

1. favicon.ico (containing 16x16 and 32x32 sizes) — covers all desktop browsers, including legacy support
2. apple-touch-icon.png (180x180) — covers all Apple devices
3. favicon-192x192.png or a web app manifest icon — covers Android devices and PWAs

The Complete Set

For a thorough implementation that handles every edge case, add the 512x512 PWA icon and an SVG favicon for modern browsers. The SVG approach is particularly powerful because a single file scales perfectly to any size, eliminating the need for multiple PNG files on browsers that support it.

Favicon Formats: ICO vs PNG vs SVG

Three file formats dominate the favicon landscape. Each has distinct advantages, and the best strategy is to use a combination.

ICO (the classic)

The ICO format has been the favicon standard since 1999. Its unique advantage is that a single .ico file can contain multiple image sizes (16x16, 32x32, and 48x48 bundled together). The browser automatically selects the appropriate size.

• Pros: Universal browser support, including Internet Explorer. Can bundle multiple sizes in one file.
• Cons: Larger file size than equivalent PNGs. Does not support transparency as cleanly as PNG in very old browsers. No vector scaling.

If you place a file named favicon.ico in the root directory of your website, most browsers will find it automatically, even without an explicit HTML link tag. This is the fallback behavior defined by the original specification.

PNG (the modern standard)

PNG favicons offer better image quality, smaller file sizes, and full transparency support. Every modern browser supports PNG favicons, making it the preferred format for new websites.

• Pros: Excellent image quality. Full alpha transparency. Smaller file sizes. Supported by all modern browsers.
• Cons: Not supported by Internet Explorer 10 and earlier (which is effectively irrelevant in 2026). Each size requires a separate file.

SVG (the future)

SVG favicons are the newest addition. Because SVGs are vector graphics, a single SVG favicon scales perfectly to any size without quality loss. SVG favicons also support CSS features, including the prefers-color-scheme media query, which means your favicon can automatically adapt between light and dark mode.

• Pros: Infinite scalability. Tiny file size for simple icons. Dark mode support via CSS. Single file for all sizes.
• Cons: Not supported by Safari (as of early 2026). Requires a fallback ICO or PNG.

How to Create a Favicon: Step by Step

There are several ways to create a favicon, from designing one from scratch to converting an existing logo. Here are the most common approaches:

Option 1: Convert Your Logo

If you already have a logo, this is the fastest path. Keep in mind that favicons are displayed at very small sizes (as small as 16x16 pixels), so detailed logos often need simplification. Use just the icon or monogram portion of your logo, not the full wordmark. A single letter or simple symbol works best at small sizes.

1. Start with a square version of your logo at 512x512 pixels or larger
2. Simplify the design: remove small text, thin lines, and fine details that disappear at 16x16
3. Export as PNG with a transparent background
4. Use a favicon generator to create all required sizes and formats

Option 2: Design from Scratch

If you are creating a new brand or do not have a suitable logo, design a simple icon. The most effective favicons use bold shapes, high contrast, and no more than two or three colors. Here are proven patterns that work well:

• Single letter: The first letter of your brand name in a bold font, optionally on a colored background circle or square
• Simple symbol: A recognizable icon related to your business (a shopping bag for e-commerce, a pen for a blog, a chart for analytics)
• Geometric shape: An abstract mark using basic geometric forms in your brand colors

Option 3: Use a Favicon Generator

A favicon generator handles the tedious parts: resizing, format conversion, and generating the HTML code. This is the recommended approach for most people. Upload a single high-resolution image, and the generator produces every file and code snippet you need.

Option 4: Use an Emoji or Text-Based Favicon

For quick projects, personal blogs, or prototypes, you can use an SVG favicon generated from text or an emoji. This requires no image editing at all. Here is an example of an SVG favicon using an emoji:

<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎯</text></svg>">

This technique is surprisingly useful for development environments or placeholder favicons while a proper icon is being designed.

How to Add a Favicon to Your HTML

Once you have your favicon files, you need to tell browsers where to find them using <link> tags in the <head> section of your HTML. Here is the complete set of tags for a thorough implementation:

<!-- Standard favicon (ICO fallback) -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">

<!-- PNG favicons -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- SVG favicon (modern browsers) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

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

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

The Minimal Setup

If you want the simplest possible implementation that still works well everywhere, use just these two lines:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Place favicon.ico in your site's root directory. Browsers have been trained for over 20 years to look for /favicon.ico automatically, so even if the link tag is missing, most browsers will find it there.

The Web App Manifest

For Progressive Web Apps or sites that want to appear on Android home screens, create a site.webmanifest file in your root directory:

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

The manifest tells Android Chrome what icon to use when a user adds your site to their home screen, and provides the splash screen icon for PWAs.

Apple Touch Icon: What It Is and How to Set It Up

The Apple Touch Icon is a special favicon used by Apple devices. When an iPhone or iPad user adds your website to their home screen, iOS uses the Apple Touch Icon as the app icon. Safari also uses it in its tab overview and reading list.

Requirements

• Size: 180x180 pixels (this is the recommended size that covers all current Apple devices)
• Format: PNG
• Shape: Design a square image. iOS automatically applies rounded corners and its standard visual effects.
• Background: Use a solid background color, not transparency. iOS fills transparent areas with black, which rarely looks good.

HTML Implementation

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Name the file apple-touch-icon.png and place it in your root directory. Similar to favicon.ico, Apple devices will look for this file automatically at the root, even without a link tag. However, explicitly declaring it in your HTML is the reliable approach.

Favicon Best Practices

Getting the technical setup right is essential, but these best practices will ensure your favicon performs well across all contexts:

1. Start with a High-Resolution Source

Always design or export your source image at 512x512 pixels or larger. Scaling down produces clean results. Scaling up from a 16x16 image produces a blurry mess. Your source file should be the highest quality version of the icon.

2. Keep It Simple

The best favicons use simple, bold shapes. At 16x16 pixels, you have 256 total pixels to work with. Fine details, thin lines, gradients, and small text become unrecognizable. Aim for an icon that is identifiable as a single shape or letter.

3. Use High Contrast

Your favicon appears against varying backgrounds: white browser chrome, dark mode toolbars, colorful bookmark bars. Use colors with strong contrast to ensure visibility in all contexts. Test your favicon against both light and dark backgrounds.

4. Make It Distinct from Competitors

Open your competitors' websites alongside yours. If your favicons look similar, users will struggle to tell the tabs apart. Choose a unique color or shape that stands out in a row of open tabs.

5. Use a Transparent Background for ICO and PNG

For browser tab favicons, use a transparent background so the icon blends naturally with the browser's tab styling. The exception is the Apple Touch Icon, which should have a solid background because iOS fills transparency with black.

6. Match Your Brand

Your favicon should be instantly associated with your brand. Use your brand's primary color and the most recognizable element of your visual identity. Consistency between your favicon, logo, and social media profile picture builds recognition.

7. Optimize File Size

Favicons should be as small as possible. A typical ICO file should be under 15 KB. PNG favicons should be under 5 KB each. Use PNG compression tools to reduce file size without visible quality loss. Every kilobyte matters because the favicon is loaded on every single page of your site.

8. Consider Dark Mode

With dark mode becoming standard across operating systems and browsers, your favicon needs to look good on dark backgrounds. If you use an SVG favicon, you can leverage CSS media queries to automatically switch colors:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <style>
        circle { fill: #6366f1; }
        @media (prefers-color-scheme: dark) {
            circle { fill: #a5b4fc; }
        }
    </style>
    <circle cx="50" cy="50" r="45"/>
</svg>

This SVG favicon automatically adapts its color when the user switches to dark mode, a polished detail that very few websites implement.

How to Test Your Favicon

After implementing your favicon, verify it works correctly across browsers and devices. Favicon caching is aggressive, so testing requires some specific techniques:

Browser Testing

1. Hard refresh: Press Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac) to bypass the cache and reload the page with fresh assets.
2. Incognito mode: Open your site in a private/incognito window. This avoids any cached favicons from previous versions.
3. Multiple browsers: Check Chrome, Firefox, Safari, and Edge. Each handles favicon loading slightly differently.
4. Mobile browsers: Test on actual iOS Safari and Android Chrome, not just desktop browser emulators.

Google Search Results

Google uses its own favicon cache and may take days or weeks to update. To check if Google can find your favicon, use the Google Search Console URL Inspection tool. It will show you what Google sees, including your favicon.

Google has specific requirements for favicons in search results:

• The favicon URL must be crawlable (not blocked by robots.txt)
• The favicon must be a multiple of 48x48 pixels (48x48, 96x96, 144x144, etc.)
• The favicon should visually represent your website's brand
• Inappropriate content (adult, hate symbols) will cause Google to replace your favicon with a generic icon

Troubleshooting Common Issues

• Favicon not showing: Check that the file path in your HTML matches the actual file location. Use absolute paths (/favicon.ico) rather than relative paths (favicon.ico).
• Old favicon persists: Browsers cache favicons aggressively. Clear your browser cache, or add a version query string: href="/favicon.ico?v=2".
• Blurry on Retina displays: You are probably serving only a 16x16 icon. Add a 32x32 PNG for high-DPI displays.
• Not appearing on iOS home screen: Make sure you have an apple-touch-icon link tag and the file is a 180x180 PNG with a solid background.

Favicon Implementation Checklist

Before you ship, verify you have covered everything:

• Source image is at least 512x512 pixels
• favicon.ico file (containing 16x16 and 32x32) is in the root directory
• apple-touch-icon.png (180x180) with solid background is in the root directory
• PNG favicons (32x32, 192x192, 512x512) are generated
• HTML link tags are in the head section of every page
• Web app manifest file references 192x192 and 512x512 icons
• Favicon looks clear and recognizable at 16x16 pixels
• Icon works on both light and dark backgrounds
• File sizes are optimized (ICO under 15 KB, PNGs under 5 KB each)
• Tested in Chrome, Firefox, Safari, and Edge
• Tested on iOS Safari and Android Chrome
• favicon.ico is not blocked by robots.txt