Favicon Generator: Complete Guide to Browser Icons

Create favicons that work everywhere — browser tabs, bookmarks, home screens, and PWA launchers.

5 min read Image · HTML · PWA 6 sections + FAQ

The favicon is the first branded element users see in a browser tab. A missing or blurry favicon signals an unfinished site — but getting favicons right in 2025 means generating multiple sizes and formats, each serving a different platform or context.

Modern favicon implementation goes beyond a single 16×16 ICO file. You need PNG for standard browsers, SVG for scalable rendering, and Apple touch icons for iOS. This guide covers every required size, the HTML tags to connect them, and design principles for icons that stay legible at tiny sizes.

What is a favicon

A favicon (short for "favorites icon") is a small image displayed by browsers in tabs, bookmarks, and history lists. The name comes from Internet Explorer's "Favorites" feature in 1999, when Microsoft introduced the standard. Today favicons appear in many contexts: browser tabs, address bars, bookmarks, reading lists, task managers, and as home screen icons on mobile devices. A well-designed favicon reinforces brand recognition even at 16×16 pixels.

Free Tool Favicon Generator Generate favicons in all required sizes from any image

Required sizes in 2025

The modern favicon set includes: 16×16 and 32×32 PNG for browser tabs; 48×48 PNG for Windows taskbar; 180×180 PNG for Apple touch icon (iOS home screen); 192×192 and 512×512 PNG for Android/PWA; an SVG favicon for modern browsers that support vector favicons; and an ICO file (containing 16×16 and 32×32) for legacy browser compatibility. Most generators package all these into a zip file ready for deployment.

ICO vs PNG vs SVG favicon

ICO format is a container that can hold multiple image sizes in one file — historically the standard but increasingly replaced by PNG. PNG favicons are widely supported, offer transparency, and are easier to generate. SVG favicons are supported by modern Chrome, Firefox, and Edge — they scale perfectly to any size and can adapt to dark/light mode via CSS media queries inside the SVG. For maximum compatibility, use all three: ICO for legacy, PNG for the standard set, and SVG for modern browsers.

Free Tool SVG to PNG Converter Convert SVG files to PNG at any resolution

HTML link tags for favicon

Place favicon link tags in the <head> of your HTML. The minimal modern setup: a rel="icon" tag pointing to your SVG or PNG, a rel="apple-touch-icon" tag for iOS, and a rel="manifest" tag for PWA. The ICO file at the root (/favicon.ico) is picked up automatically by browsers without any HTML tag. Always specify sizes with the sizes attribute on PNG link tags so browsers can select the most appropriate resolution.

Apple touch icon and PWA icons

When users add your site to their iOS home screen, Safari uses the apple-touch-icon. The preferred size is 180×180 pixels — no rounded corners needed as iOS applies them automatically. For Android and Progressive Web Apps, specify icons in your web.app manifest file with at least 192×192 and 512×512 PNG versions. The 512×512 icon is used for the PWA splash screen. Google's Lighthouse audit will flag missing manifest icons as a PWA installability issue.

Design tips for small icons

Favicons must be legible at 16×16 pixels — avoid complex illustrations. Use a single bold letter or simple geometric shape. Ensure high contrast between the icon and the browser chrome (light gray in most browsers). Avoid thin strokes that disappear at small sizes. Test your favicon in both light and dark browser themes. Consider using your brand's primary color as a solid background with a white or dark symbol on top — this ensures visibility at any size.

Free Tool Image to Base64 Encoder Embed images as Base64 strings in HTML and CSS

Frequently Asked Questions

What is the minimum favicon size? +
The minimum is 16×16 pixels, which is the size shown in browser tabs. However, modern setups require multiple sizes: 32×32 for higher-DPI displays, 180×180 for iOS, and 192×192 for PWA.
Can I use just one favicon file? +
You can use a single SVG favicon for modern browsers, but for full compatibility you need an ICO file for legacy browsers and PNG files for Apple devices. Most sites use a combination of all three formats.
Does the favicon affect SEO? +
Directly, no — Google does not use favicons as a ranking factor. Indirectly, a professional favicon improves brand recognition and click-through rates from bookmarks and search results, where Google displays your favicon next to results.
How do I implement dark mode support in my favicon? +
SVG favicons support dark mode via CSS media queries inside the SVG file. Use a prefers-color-scheme media query to switch between light and dark icon variants. ICO and PNG favicons cannot adapt to dark mode.
Why is my favicon not updating after deployment? +
Favicons are aggressively cached by browsers. To force an update, rename the favicon file and update the HTML link tag, or append a cache-busting query string like ?v=2 to the favicon URL.
What is a web app manifest icon? +
Web app manifest icons are defined in your site's manifest.json file and used when users install your PWA to their home screen. The manifest requires at least 192×192 and 512×512 PNG icons.
Should my favicon have a transparent background? +
It depends on the browser chrome. Transparent favicons look good in dark-themed browsers but may be invisible against light backgrounds. A solid color background is generally safer for cross-browser compatibility.