PictureEditor

Essential Favicon Sizes Explained

Browser Tab Favicons (16x16 and 32x32)

The 16x16 pixel favicon is the original and smallest size, displayed in browser tabs on standard-resolution displays. At this size, only the simplest designs remain recognizable: a single letter, a bold geometric shape, or a distinctive color block. Fine details, thin lines, and text beyond a single character become indistinguishable blobs. The 32x32 version serves the same purpose on high-DPI (Retina) displays, where the browser renders at double pixel density. On a Retina display, a 16x16 favicon would appear blurry because the browser upscales it; the 32x32 version provides crisp rendering. Every website needs both sizes as the absolute minimum.

Application Icons (48x48 and 64x64)

The 48x48 and 64x64 sizes are used by Windows for site icons in the taskbar, start menu, and desktop shortcuts. When a user pins your website to their Windows taskbar, the operating system uses these larger sizes for the icon representation. These sizes also appear in browser bookmark managers and history views. The additional pixel budget allows for slightly more detail than tab favicons, but the design should still be a simplified version of your full logo. If your favicon is unrecognizable at 48x48, it needs simplification.

Apple Touch Icon (180x180)

Apple devices use the 180x180 pixel Apple Touch Icon when users add your website to their home screen. Unlike browser favicons, this icon is displayed at a relatively large size alongside native app icons, making design quality immediately apparent. Apple automatically applies rounded corners and a subtle gloss effect (which can be disabled). The icon should fill most of the 180x180 canvas — Apple does not add padding automatically. Include a background color rather than transparency, because iOS replaces transparent areas with black on the home screen, which typically looks unintentional.

PWA and Android Icons (192x192 and 512x512)

Progressive Web Applications require 192x192 and 512x512 icons defined in the web app manifest. The 192x192 icon appears on the Android home screen when users install your PWA, while the 512x512 version is used for splash screens during app launch. These large sizes accommodate the full detail of your brand mark. Android applies its own adaptive icon masking (circle, squircle, or rounded square depending on the device), so design with a safe zone: keep critical elements within the center 66% of the canvas to ensure nothing is clipped by the mask shape.

Favicon Design Best Practices

Simplify Ruthlessly

The most effective favicons are radically simplified versions of the brand identity. Google uses a simple multi-colored "G". GitHub uses their octocat silhouette. Slack uses their hashtag mark. None of these companies attempt to fit their full logo into 16 pixels. If your brand has a distinctive lettermark, icon, or symbol, use that alone. If your brand relies on a wordmark (text-only logo), extract the first letter or most distinctive letter and use it as a standalone mark. The favicon needs to be recognizable at a glance among dozens of other tabs, not readable.

Contrast and Color

Favicons appear against varying backgrounds: light tab bars, dark tab bars, white bookmark pages, colored desktops. A favicon that looks perfect against a white background may vanish against a dark theme. The safest approach is to use a solid colored background with a contrasting foreground element. If you prefer a transparent favicon, test it against both light and dark backgrounds and consider adding a subtle border or shadow to maintain visibility. Avoid using your brand's lightest color as the primary favicon color — it will disappear in light-themed browsers that represent the majority of usage.

Pixel-Perfect at Small Sizes

At 16x16 pixels, every single pixel matters. A line that is 1.5 pixels wide will render as a blurry 2-pixel line with anti-aliasing, destroying the crisp appearance. Professional favicon designers often hand-tweak the 16x16 and 32x32 versions pixel by pixel rather than relying on automated downscaling. While this tool handles the scaling automatically with high-quality interpolation, the best results come from starting with a source image that has been designed with small-size rendering in mind: bold shapes, solid colors, minimal gradients, and no fine details that will be lost.

Testing Across Contexts

Before deploying your favicon, test it in context. Open multiple browser tabs and verify your favicon is distinguishable among common sites your audience visits. Check it in bookmark lists, browser history, and mobile home screens. Test with both light and dark operating system themes. A favicon that works in isolation may become invisible when placed next to visually similar icons from other sites. If two tabs are easily confused, your favicon needs more contrast or a more distinctive shape.

HTML Implementation Guide

Minimal Setup (Two Lines)

The absolute minimum favicon implementation requires just two link tags in your HTML head section. A 32x32 PNG favicon covers all modern browsers, and a 180x180 Apple Touch Icon covers iOS home screen additions. Place both files in your site root directory and add the following HTML: a link tag with rel="icon" pointing to your 32x32 PNG, and a link tag with rel="apple-touch-icon" pointing to your 180x180 PNG. This two-line approach works for the vast majority of websites and avoids the complexity of comprehensive favicon setups.

Comprehensive Setup

For complete coverage across every browser, device, and context, include link tags for 16x16, 32x32, and 48x48 PNG favicons with type="image/png", the 180x180 Apple Touch Icon, and reference a web manifest file that declares your 192x192 and 512x512 PWA icons. Additionally, include a theme-color meta tag that matches your favicon's background color, so mobile browsers tint their UI to match your brand. The comprehensive approach adds more markup but ensures pixel-perfect icon rendering in every possible context.

The ICO Format Legacy

The ICO (Windows Icon) format was the original favicon format and remains the only format supported by very old browsers. An ICO file can contain multiple sizes in a single file — typically 16x16, 32x32, and 48x48 bundled together. Modern browsers all support PNG favicons, making ICO largely unnecessary unless your audience includes users on Internet Explorer 10 or earlier. If you need ICO support, place a favicon.ico file in your site root directory; browsers will automatically look for it there even without an explicit link tag. For most modern sites, PNG favicons are sufficient and preferred.

Platform-Specific Requirements

Google and Search Results

Google displays favicons in search results next to your site name. Google requires the favicon to be a multiple of 48x48 pixels, recommends 48x48 as the minimum, and will resize larger icons as needed. The favicon must be accessible to Googlebot (not blocked by robots.txt) and should be on the same domain as the site. Google caches favicons aggressively, so changes may take weeks to appear in search results. Ensure your favicon is not misleading, offensive, or a generic placeholder — Google reserves the right to replace unsuitable favicons with a generic globe icon.

Windows Tiles and Pinned Sites

Windows 10 and 11 use a separate tile image system for pinned sites in the Start menu. While favicons work for basic pinning, the best experience requires a browserconfig.xml file that specifies tile images at 70x70, 150x150, 310x150, and 310x310 pixels with a tile background color. The tile image should use a transparent background with your icon in the center, allowing Windows to apply your specified background color. This creates a cleaner, more native-looking tile than a scaled favicon.

macOS Safari Pinned Tabs

Safari on macOS uses a special monochrome SVG icon for pinned tabs, called a "mask icon." This icon must be a single-color SVG with a transparent background. Safari applies the color you specify in the meta tag, creating a tinted version of your icon that adapts to the system theme. If you do not provide a mask icon, Safari falls back to the first letter of your domain name. The mask icon should be a simplified silhouette version of your favicon that works as a single flat shape without relying on color variation for recognition.

Social Media Sharing

Favicons and Open Graph images serve different purposes. When your site is shared on social media, platforms use your OG image (typically 1200x630 pixels), not your favicon. However, some messaging apps and link preview widgets display a small favicon alongside the preview. Ensure your favicon is available at 32x32 minimum for these contexts. Discord, Slack, and Microsoft Teams all display favicons in link previews, making them an important brand touchpoint beyond just browser tabs.

Frequently Asked Questions