How to Create a Favicon for Your Website

A favicon is the small icon that appears in a browser tab, bookmark list, and browser history next to your website title. It might seem like a minor detail, but this tiny image plays a significant role in brand recognition, user experience, and professional credibility. Studies on visual recognition show that people process icons 60,000 times faster than text—a well-designed favicon helps users find your tab among dozens of open ones instantly.

In this comprehensive guide, we will cover what a favicon is, the sizes and formats you need, step-by-step creation instructions, and best practices to ensure your favicon looks crisp and professional everywhere it appears.

What Is a Favicon and Why Does It Matter?

The word "favicon" is short for "favorites icon," originally coined because these icons appeared next to bookmarks (favorites) in Internet Explorer. Today, favicons serve multiple purposes across browsers, operating systems, and applications.

Without a favicon, browsers display a generic blank page icon or a globe symbol. This makes your site look unfinished and makes it harder for returning visitors to identify your tab. A custom favicon signals professionalism and attention to detail—even users who cannot articulate why will perceive your site as more trustworthy and polished.

Favicon Sizes and Formats You Need

The favicon ecosystem has evolved significantly. What was once a single 16×16 pixel ICO file now requires multiple sizes and formats to cover all platforms. Here is the complete breakdown:

Classic Favicon (ICO)

The traditional format, stored as favicon.ico in your website root. The ICO format can contain multiple sizes in a single file. You should include at least 16×16, 32×32, and 48×48 pixels. This format provides the broadest backward compatibility, including older browsers and some desktop applications.

Standard HTML Favicon (PNG)

Modern browsers support PNG favicons linked via <link rel="icon">. You can specify different sizes:

• 16×16 — Browser tabs (standard displays)
• 32×32 — Windows taskbar, browser tabs (high-DPI)
• 48×48 — Windows site icons

Apple Touch Icon

For iOS devices when users add your site to their home screen. The recommended size is 180×180 pixels in PNG format. Linked via <link rel="apple-touch-icon">. Apple automatically applies rounded corners, so design your icon with square edges and let iOS handle the shape.

Android Chrome

Chrome on Android uses a manifest.json file with icons at 192×192 and 512×512 pixels. These appear when users add your site to their home screen. The 192×192 icon is also used for Chrome's New Tab Page suggestions.

Windows Tiles

For pinned sites on the Windows Start menu, you need a browserconfig.xml file with tile icons at 70×70, 150×150, and 310×310 pixels. The tile background color is also configurable.

Social Media Favicons

When your website URL is shared on social media, platforms may display a small icon next to the link. These typically pull from your regular favicon or Open Graph image. Keeping your favicon consistent with your social media profile pictures strengthens brand recognition.

Step-by-Step: Creating Your Favicon

Step 1: Design Your Icon

Start with your logo or brand mark. Simplify it as much as possible—favicons display at extremely small sizes, so fine details will be invisible. Focus on one or two recognizable elements: a distinctive shape, a letter, or a simplified version of your logo.

If you do not have a logo, consider using your brand's initial letter with your primary brand color. Many successful companies use letter-based favicons (Facebook's F, GitHub's octocat silhouette, YouTube's play button).

Design at a large size first—at least 512×512 pixels—then scale down. This gives you the resolution needed for all output sizes and ensures your design is vector-friendly.

Step 2: Generate All Required Sizes

You need multiple versions of your icon at different sizes. Instead of manually resizing, use an automated tool. RiseTop Favicon Generator takes your source image and produces all the required favicon sizes and formats in one step—ICO, PNG at multiple resolutions, Apple Touch Icon, and Android manifest icons.

Step 3: Choose the Right Format

PNG is the best format for modern favicons. It supports transparency, sharp edges, and is universally supported by current browsers. Use ICO only for legacy compatibility (it costs nothing to include it alongside PNG). Avoid JPEG for favicons—it does not support transparency and can introduce artifacts at small sizes.

Step 4: Add Favicon Code to Your Website

Place these tags in the <head> section of your HTML:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">\n<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">\n<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">\n<link rel="manifest" href="/site.webmanifest">

Keep the favicon.ico file in your root directory as well, for legacy browser support and automatic discovery.

Step 5: Test Across Platforms

Check your favicon in multiple browsers (Chrome, Firefox, Safari, Edge), on both Windows and macOS, and on mobile devices. Clear your browser cache between checks—browsers aggressively cache favicons. Verify that the icon is crisp at all sizes and recognizable even at 16×16 pixels.

Favicon Best Practices

• Keep it simple. At 16×16 pixels, you have 256 pixels total. Complex designs become unrecognizable blobs. Stick to one or two elements.
• Use high contrast. Dark icons on light backgrounds or vice versa. Avoid subtle gradients—they vanish at small sizes.
• Be consistent with your brand. Your favicon should be immediately recognizable as belonging to your brand. Use your brand colors and a simplified version of your logo.
• Test at actual size. View your design at 16×16 and 32×32 during the design process, not just at the large source size.
• Support transparency. Use PNG with a transparent background so your icon looks good on any browser theme (light or dark mode).
• Update browserconfig.xml and manifest.json. These files tell Windows and Android how to display your icon when pinned.
• Set proper caching headers. Favicons should be cached aggressively with long expiry times, but use versioned filenames when you update so users see the new icon promptly.

FAQ

What size should my favicon be?

Design your source image at 512×512 pixels or larger. From this master, generate versions at 16×16, 32×32, 48×48, 180×180 (Apple Touch Icon), 192×192, and 512×512 (Android/manifest). An automated favicon generator handles all these sizes from a single upload.

What file format should I use for a favicon?

PNG is the recommended format for modern favicons. It supports transparency and is universally supported. Include an ICO file in your root directory for backward compatibility. Avoid JPEG (no transparency support) and SVG (limited favicon support, though this may improve in the future).

How do I change my existing favicon?

Replace the favicon files on your server with your new versions. Since browsers cache favicons aggressively, you may need to force a refresh. Add a query string version to the URL (e.g., href="/favicon.png?v=2") to bust the cache. Users will see the updated icon on their next visit after the cache expires.

Why is my favicon not showing up?

Common causes include: the file is not in the correct location (root directory or path specified in the link tag), incorrect file path in the HTML, browser caching, the server returning a 404 error, or the file being corrupted. Check the browser's Network tab in Developer Tools to see if the favicon request is succeeding and returning the correct file.

Can I use an SVG as a favicon?

SVG favicons are supported in Chrome, Firefox, and Safari (since version 15), but support is not universal. If you use SVG, include a PNG fallback. SVG has the advantage of looking crisp at any size, but it cannot be used for Apple Touch Icons or Android manifest icons, which require raster PNG files.

Do favicons affect SEO?

Indirectly, yes. Favicons appear in Google search results on mobile devices, next to your page title. A missing or broken favicon can make your search result look less trustworthy and reduce click-through rates. Google also checks for favicon presence and may display a warning in Search Console if it is missing.

How do I create a favicon from a logo?

Start with your logo in a high-resolution format (PNG or vector). Simplify it by removing fine details and text that would be illegible at small sizes. Use a favicon generator tool to automatically crop, resize, and export all required sizes and formats. If your logo is too complex, extract the most recognizable element—a single letter, icon, or symbol.

What is the difference between favicon.ico and apple-touch-icon.png?

favicon.ico is the traditional format used by desktop browsers for tab icons and bookmarks. apple-touch-icon.png is a larger (180×180) PNG used by iOS when a user saves your website to their home screen. They serve different platforms and different display contexts. Modern best practice is to include both, along with standard PNG favicons and a web manifest for Android.