How to Create a Favicon for Your Website - Step by Step Guide

A favicon is one of those small details that most visitors never consciously notice — but its absence is immediately felt. That tiny icon in the browser tab, bookmark list, and home screen is a critical piece of your brand identity. It helps users recognize your site at a glance among dozens of open tabs, adds polish to your bookmarks, and signals professionalism. Yet many websites still skip it or rely on outdated formats.

This guide walks you through everything you need to know about creating a favicon that works everywhere: from design principles to file formats, size requirements, and the correct HTML implementation.

What Is a Favicon?

A favicon (short for "favorite icon") is a small icon associated with a website, displayed by web browsers in several places:

• Browser tab: The small icon next to the page title in the tab bar
• Bookmarks: Shown next to saved bookmarks in the browser's bookmark menu or bar
• Browser history: Appears next to URLs in browsing history
• Mobile home screen: When a user adds your site to their home screen (PWA or bookmark), the favicon becomes the app icon
• Search results: Some search engines display favicons next to your site's listing

The favicon was introduced by Microsoft in 1999 with Internet Explorer 5, originally displayed in the Favorites (bookmarks) list — hence the name. The original format was a 16×16 pixel ICO file. Today, the requirements are much more complex, with multiple sizes and formats needed for full coverage across devices and platforms.

Favicon Sizes and Formats You Need

To ensure your favicon looks crisp everywhere, you need to provide it in multiple sizes and formats. Here's a comprehensive breakdown of what modern websites should include:

ICO Format (Legacy Browser Support)

The ICO format is still the most widely supported favicon format. An ICO file can contain multiple sizes in a single file, which is convenient. You should include at least these sizes:

• 16×16: Displayed in browser tabs and bookmarks
• 32×32: Used by Windows taskbar and some older browsers
• 48×48: Used by Windows site icons and older applications

PNG Format (Modern Browsers)

PNG is supported by all modern browsers and offers better compression and transparency support than ICO. Provide these sizes as separate PNG files:

• 16×16: Browser tab fallback
• 32×32: Standard size for most favicon use
• 192×192: Required for Android Chrome home screen icons
• 512×512: Required for Android Chrome splash screens and PWA

Apple Touch Icon (iOS)

Apple devices use a special format called the Apple Touch Icon when users add your site to their home screen. Despite the name, this is simply a PNG file with specific naming:

• 180×180: The standard Apple Touch Icon size (apple-touch-icon.png)

iOS will automatically scale this icon for different devices, but for best results, you can also provide 120×120 and 152×152 versions.

SVG Format (The Modern Standard)

SVG favicons are the future. Because SVGs are vector-based, a single file looks crisp at any size. Browser support has improved significantly — Chrome, Firefox, Safari, and Edge all support SVG favicons as of 2024.

• SVG (any viewBox): Scales perfectly to any size, tiny file size

How to Design an Effective Favicon

Designing a favicon is fundamentally different from designing a logo. You're working with an extremely small canvas (16×16 to 32×32 pixels in most contexts), which means simplicity isn't just a style choice — it's a necessity.

Design Principles

1. Keep it simple: At 16×16 pixels, you have 256 pixels to work with. Complex illustrations, fine text, and detailed graphics will become unreadable. Stick to 1–3 simple shapes or letters.
2. Use high contrast: Favicon backgrounds vary — light browser themes, dark themes, and the default white of most tab bars. Your icon needs to be readable on all of them. If your design uses a light color, add a subtle dark border or background. If it uses dark colors, ensure it's visible against light backgrounds.
3. Be recognizable: Your favicon should evoke your brand at a glance. The most effective favicons use a simplified version of the brand's logo, a distinctive letter, or a memorable symbol. Think of the Twitter bird, the GitHub octocat silhouette, or the Stripe "S" — all instantly recognizable at 16 pixels.
4. Avoid text when possible: Full words or phrases are almost never readable at favicon size. A single letter or abstract symbol works far better.
5. Test at actual size: Always preview your favicon at 16×16 and 32×32 before finalizing. What looks great at 512×512 may look like a blob at 16×16.

Design Tools

You can create a favicon in virtually any image editor:

• Figma / Adobe Illustrator: Best for vector-based designs. Create your icon at a large size (512×512) and export to SVG, then rasterize to PNG sizes.
• Photoshop / GIMP: Good for raster editing. Create at 512×512 and downscale.
• Canva: Offers favicon templates and is beginner-friendly.
• Online favicon generators: Upload any image and get all the sizes and formats you need automatically. This is the fastest approach if you already have a logo.

Step-by-Step: Creating Your Favicon

Step 1: Start with a High-Resolution Source Image

Create or obtain your icon design at 512×512 pixels or larger. This gives you enough resolution to produce crisp versions at every required size. Use a transparent background (PNG or SVG) so the icon works on any browser theme.

Step 2: Export to All Required Sizes

From your 512×512 source, export the following files:

• favicon.svg — Your original SVG (if you designed in vector)
• favicon.ico — Multi-size ICO containing 16×16, 32×32, and 48×48
• favicon-16x16.png
• favicon-32x32.png
• android-chrome-192x192.png
• android-chrome-512x512.png
• apple-touch-icon.png — 180×180

Step 3: Place Files in Your Website Root

Upload all favicon files to your website's root directory or a dedicated /icons/ or /assets/ folder. The standard locations are:

/favicon.ico
/favicon.svg
/favicon-16x16.png
/favicon-32x32.png
/apple-touch-icon.png
/android-chrome-192x192.png
/android-chrome-512x512.png

Step 4: Add HTML Link Tags

Add the appropriate <link> tags to the <head> section of every page on your website:

<!-- Primary favicon with fallback -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" href="/favicon-32x32.png" sizes="32x32">

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

<!-- Android Chrome -->
<link rel="manifest" href="/site.webmanifest">

Step 5: Create a Web App Manifest

For Android Chrome support, create a site.webmanifest file in your root directory:

{
  "name": "Your Website Name",
  "short_name": "Short Name",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#8b5cf6",
  "background_color": "#0f1117",
  "display": "standalone"
}

Common Mistakes to Avoid

• Forgetting to clear browser cache: Browsers aggressively cache favicons. After updating your favicon, you may need to clear your browser cache or add a version query string (e.g., /favicon.ico?v=2) to see changes.
• Using only a 16×16 ICO: This was acceptable in 2005, but today it looks blurry on high-DPI displays and mobile devices. Always provide multiple sizes.
• Not using transparent backgrounds: A white or colored square background looks fine in a browser tab but appears as a block when used as a home screen icon on iOS or Android.
• Ignoring dark mode: Test your favicon against both light and dark browser themes. Consider adding a subtle background or adjusting contrast for dark mode visibility.
• Missing the Apple Touch Icon: Even if you don't intend to support PWA functionality, users can still add your site to their iOS home screen. Without an Apple Touch Icon, iOS will take a screenshot of your page, which usually looks terrible as an app icon.
• Not updating after a rebrand: If you change your logo or brand colors, remember to update your favicon. An outdated favicon looks unprofessional and can confuse visitors.

Testing Your Favicon

After implementing your favicon, verify it works correctly across different contexts:

1. Browser tab: Open your site in Chrome, Firefox, Safari, and Edge. Check that the icon appears correctly.
2. Bookmark: Bookmark your site and check the bookmark list and toolbar.
3. Mobile: Open your site on iOS and Android. Try adding it to the home screen.
4. Incognito/private mode: Verify the favicon loads without cached versions.
5. Favicon checker tools: Use online tools like realfavicongenerator.net's favicon checker to audit your implementation and catch missing tags or incorrect paths.

Frequently Asked Questions

What's the best favicon format in 2026?

SVG is the best primary format because it's vector-based, scales to any size, and has tiny file sizes. However, you should still provide PNG and ICO fallbacks for older browsers and specific platform requirements. The ideal setup is: SVG as the primary icon (referenced with rel="icon" type="image/svg+xml"), PNG at 16×16 and 32×32 as fallbacks, and a multi-size ICO for legacy support.

Why isn't my favicon showing up?

The most common cause is browser caching. Browsers cache favicons aggressively — sometimes for weeks. Try clearing your cache, opening in an incognito window, or appending a version parameter to the URL (e.g., /favicon.ico?v=2). Other common issues include: incorrect file paths in your HTML, missing <link> tags, incorrect MIME type, or the server not serving the file with the right headers.

Can I use a JPEG as a favicon?

Technically, some browsers will display a JPEG if you reference it, but it's not recommended. JPEG doesn't support transparency, which means your icon will always have a solid background. This looks particularly bad on browser tabs with different theme colors. Use PNG or SVG instead — both support transparency and are universally supported for favicons.

Do I need a favicon.ico if I have an SVG?

For modern browsers, no — they'll use the SVG. But for legacy support (older browsers, email clients, RSS readers, and some third-party applications), an ICO file is still valuable. Since it only takes a few seconds to generate one, it's worth including as a fallback. The cost is negligible, and the compatibility benefit is real.

How do I change my favicon without cache issues?

Add a version query string to your favicon URL. For example, change /favicon.ico to /favicon.ico?v=2 (or use a hash based on the file content). This tricks the browser into treating it as a new resource. Some content management systems and build tools handle this automatically through cache-busting strategies. You can also use the Cache-Control HTTP header to control how long browsers cache your favicon files.

What size should my favicon be for best quality?

Design your source image at 512×512 pixels minimum. Export to all the specific sizes needed: 16×16, 32×32, 48×48 (for ICO), 180×180 (Apple Touch Icon), 192×192 and 512×512 (Android). If you're using SVG as your primary format, the browser handles scaling automatically, so you only need the one SVG file plus your fallback PNGs.