Web Favicon & PWA Icon Complete Guide 2025: All Sizes, Formats & Best Practices

What Are Favicons & Why They Matter in 2025

Favicons (favorite icons) are small icons that appear in browser tabs, bookmarks, history, and address bars. They're a crucial part of your website's branding and user experience. In 2025, with the rise of Progressive Web Apps (PWAs), icons have become even more important for mobile home screens and app-like experiences.

Where Favicons Appear

• Browser Tabs - Next to page title in every tab
• Bookmarks & Favorites - Helps users find saved sites quickly
• Browser History - Makes browsing history scannable
• Address Bar - Shows next to your domain name
• Mobile Home Screen - For PWAs added to home screen
• Taskbar/Dock - When pinning sites in browsers
• Search Results - Google sometimes displays favicons

Complete Favicon Size Guide for 2025

Modern browsers and devices require multiple favicon sizes for optimal display. Here's the complete list:

PWA Icon Sizes & Requirements (2025)

Progressive Web Apps require specific icon sizes for the web app manifest. These icons appear on the user's home screen when they install your PWA.

Apple Touch Icons Guide

Apple devices use "touch icons" when users add your website to their home screen. Different devices require different sizes.

Microsoft Tile Icons for Windows

Windows 8/10/11 and Microsoft Edge use custom tile icons when users pin your site to the Start menu.

How to Implement Favicons & PWA Icons

Here's the complete HTML code needed to implement all icons properly:

<!-- Standard Favicon -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="icon" type="image/x-icon" href="/favicon.ico">

<!-- Apple Touch Icons -->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">

<!-- Microsoft Tile Icons -->
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="msapplication-config" content="/browserconfig.xml">

<!-- PWA Web App Manifest -->
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Your App Name">

<!-- Chrome/Firefox/Edge -->
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

Sample site.webmanifest file:

{
  "name": "Your App Name",
  "short_name": "App",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/"
}

Best Practices for Web Icons

Common Mistakes to Avoid

• ❌ Only providing one size - Different devices need different sizes for optimal display
• ❌ Using wrong file formats - Always use PNG for favicons and web icons
• ❌ Forgetting the manifest.json - Required for PWA installation on Android
• ❌ Not testing on actual devices - Emulators don't always show real results
• ❌ Ignoring dark mode - Ensure icons are visible on both light and dark backgrounds
• ❌ Huge file sizes - Large icon files slow down page load

Frequently Asked Questions