What Is a Favicon and How Do You Add One to Your Website?

The Tiny Image That Does More Than You Think

Open any browser and look at the row of tabs at the top. Each open tab has a small icon next to the page title — a logo, a symbol, sometimes just an initial. That icon is a favicon. It's tiny, typically 16×16 or 32×32 pixels in the browser tab, and most website visitors never consciously notice it.

Which is exactly how it should work when it's done right. When it's missing — when a site shows the generic grey globe or broken image default instead of a brand icon — you notice that too. It's one of those small details that, like a typo in a business proposal or a missing button on a dress shirt, creates a subtle but real impression of incompleteness.

This guide covers what favicons are, where they appear (more places than you might think), how to create one, and how to implement it correctly across all modern contexts.

What a Favicon Is

A favicon (short for "favorites icon," from when browsers first introduced them in the context of bookmarks/favorites) is the small icon associated with a website that appears in browser tabs, bookmarks, browser history, and increasingly in other contexts like home screen shortcuts on mobile devices and search result snippets.

The concept dates to Internet Explorer 5 in 1999, which introduced favicon.ico support. The format and usage have evolved significantly since then — what started as a single 16×16 pixel .ico file has become a multi-format, multi-size ecosystem to accommodate high-DPI screens, mobile home screens, PWA install prompts, and various operating system contexts.

Where Favicons Appear

The browser tab is the most obvious placement, but favicons appear in more contexts than most people realize:

Browser tabs. The classic placement — the small icon to the left of the page title in each open tab. On screens with many tabs open, the favicon is often the only visual identifier distinguishing one tab from another when tab titles are truncated.

Browser bookmarks and favorites. When someone bookmarks your site, the favicon appears next to the bookmark name in their bookmarks bar or folder. A recognizable favicon makes your site visually identifiable in a list of bookmarks.

Browser history. Your favicon appears in the browser history list, making your site recognizable when users scroll through recent visits.

Address bar autocomplete. When users start typing a URL they've visited before, browsers show the favicon alongside the suggested URL in the dropdown.

Mobile home screen shortcuts. When a user adds a website to their phone's home screen ("Add to Home Screen"), the favicon — or specifically a larger "apple-touch-icon" or PWA icon — becomes the app-like icon on their home screen. This is where icon quality becomes especially visible, since it's displayed at 120×120 pixels or larger.

Search engine results. Google has increasingly shown favicons in mobile search results, next to the website URL. A recognizable brand icon in search results helps your site stand out from plain text entries.

Browser extensions and reading list apps. Various tools that aggregate or save web content display favicons to identify the source.

Progressive Web App (PWA) install prompts. When a browser offers to install your PWA, it uses your icon in the install dialog and the resulting app icon on the device's home screen or app drawer.

Why Favicon Quality Matters

A well-designed favicon does several things that have practical business value:

Brand recognition. Returning visitors who have multiple tabs open can find your site instantly by recognizing the favicon rather than reading tab titles. This matters more than it sounds — making it easy for people to get back to your site removes friction from return visits.

Professionalism signal. A missing favicon — the generic grey globe that browsers show by default — is a visible marker of an incomplete website. It's the digital equivalent of handing someone a business card with a placeholder logo. Small detail, but it contributes to the overall impression of how seriously you take your business.

Search visibility. With Google showing favicons in mobile search results, your icon appears alongside your page title and URL in search. A distinctive, well-designed favicon helps your result stand out visually in a list of plain text entries from competitors.

What Makes a Good Favicon

Designing an effective favicon has specific constraints that differ from other brand design work. The core challenge: it needs to be recognizable and communicate brand identity at 16×16 pixels — a canvas approximately the size of a capital letter on a typical screen.

Simplicity is non-negotiable. Complex logos with multiple colors, fine details, or text simply don't read at 16px. They become illegible blobs. Effective favicons use a single element: the first letter of the brand name, a simplified version of the logo mark, a single icon that represents the brand, or a solid-color square with a single symbol.

High contrast. Browser tabs come in light mode and dark mode, and the favicon needs to be visible against both. Strong contrast between the icon and background — or a design that works on multiple backgrounds — ensures visibility across different browser themes and operating system settings.

Brand alignment. The favicon should feel like it belongs to the same brand as the full website. Even simplified to a single element, it should use the brand's primary colors and visual language. A visitor who sees the favicon in their bookmarks and recognizes it as yours should feel the same brand impression as when visiting the site itself.

It should work at multiple sizes. The favicon displays at 16×16 in browser tabs but at 180×180 on iOS home screens and larger sizes in PWA contexts. A good favicon system includes versions optimized for different size contexts — a simplified mark for small sizes, a fuller version for large sizes.

Favicon Formats and Sizes in 2026

The favicon ecosystem has expanded well beyond the original .ico file. Here's what you actually need:

favicon.ico — The original format, still supported everywhere. Modern practice is to include multiple sizes inside the .ico container: 16×16, 32×32, and 48×48. The .ico format is a container file that can embed multiple image sizes, and browsers select the most appropriate size automatically. Place this file in the root of your website (yoursite.com/favicon.ico) — browsers automatically look for it there.

favicon-16x16.png and favicon-32x32.png — PNG versions at specific sizes, referenced explicitly in the HTML head. Useful for browsers that prefer PNG over .ico.

apple-touch-icon.png (180×180) — The icon used when a user adds your site to their iOS home screen or bookmarks in Safari. Apple devices look for this specifically. At 180×180, this icon is large enough to show much more detail than the browser tab version. It should be high quality and look good as a standalone icon — essentially a small app icon.

android-chrome-192x192.png and android-chrome-512x512.png — Icons for Android devices and PWA contexts. The 512×512 version is used in PWA install prompts and on certain high-resolution displays.

Web App Manifest (site.webmanifest) — A JSON file that defines PWA metadata including icon paths, app name, theme colors, and display preferences. Referenced from the HTML head. Even if you're not building a full PWA, having a manifest with proper icon references improves how your site installs and appears on mobile home screens.

How to Create a Favicon

For Existing Logos

If you already have a brand logo, the process is to create a simplified, favicon-appropriate version:

Start with your logo in SVG or high-resolution PNG. Extract the most recognizable single element — typically the logomark rather than the full wordmark, or just the first letter if no symbol exists. Simplify it: remove fine details that won't be visible at 16px, increase contrast, reduce the color palette to 1–3 colors maximum.

Test it by viewing it at 16×16, 32×32, and larger sizes. Does it still read as recognizable at the smallest size? If not, simplify further.

Once you have the design, export to the required sizes and formats. Adobe Illustrator, Figma, and Sketch all handle this export workflow. For the .ico file specifically, use a dedicated converter — Favicon.io, RealFaviconGenerator.net, or similar tools accept your images and output a complete, correctly structured favicon package.

Starting from Scratch

If you don't have existing brand assets, online favicon generators make the process accessible without design software. Favicon.io lets you generate a favicon from text (your brand's initial letter with customizable font, color, and background), from an emoji, or from an uploaded image. The output is a complete favicon package ready to implement.

RealFaviconGenerator.net is the most comprehensive tool — you upload a master image and it generates all required sizes and formats, provides HTML code for implementation, and lets you preview how the favicon will look across different contexts (Chrome on Windows, Safari on iOS, Android home screen, etc.).

How to Add a Favicon to Your Website

Platform-Specific Implementation

Webflow: Go to Site Settings → Favicon & App Icon. Upload your favicon file (PNG or SVG recommended; Webflow handles the conversion). Changes take effect after republishing.

WordPress: Go to Appearance → Customize → Site Identity → Site Icon. Upload your image (WordPress recommends at least 512×512 pixels). WordPress generates and handles all favicon sizes automatically.

Shopify: Online Store → Preferences → Favicon image. Upload your favicon file.

Squarespace: Design → Browser Icon. Upload your favicon.

Wix: Dashboard → Settings → Favicon. Upload your file.

All major platforms handle the technical implementation details — they generate required sizes, write the appropriate HTML tags, and serve the files. You just upload the source image.

Manual Implementation (Custom Sites)

For custom-built websites, place your favicon files at the root of your domain and add the following tags to the <head> section of every page:

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

If you used RealFaviconGenerator, it provides exactly this HTML code alongside the generated files, so you can copy-paste rather than writing it manually.

Troubleshooting Common Favicon Issues

Favicon not updating after a change. Browsers aggressively cache favicons. After updating your favicon, visitors (including yourself) may continue seeing the old one for a while. To see the updated version immediately, hard refresh the page (Ctrl+Shift+R / Cmd+Shift+R), clear the browser cache, or open the site in an incognito window. The cache will eventually expire for regular visitors.

Favicon not showing at all. Check that the file is accessible at the URL you specified — try typing the favicon URL directly in your browser to confirm it loads. Verify the HTML link tags are correctly structured and in the <head> section. Ensure the file path is correct relative to the document root.

Favicon showing on some devices but not others. Different browsers and operating systems look for different files. The apple-touch-icon is specifically for Apple devices; if it's missing, iOS users see a screenshot of the page as their home screen icon rather than your brand icon. Ensure you've provided all required format variants.

The Bottom Line

A favicon is a small thing. But small things done right are what separate websites that feel polished and professional from ones that feel like they were assembled rather than crafted. The implementation time is under an hour. The brand impression improvement is permanent and visible to every visitor in every browser tab, every bookmark, every search result listing.

If your site is missing a favicon, fix it today. It's one of those tasks where the time investment is genuinely small and the visual improvement is immediately apparent.

Every website Scalify delivers includes properly implemented favicons across all required formats — one of dozens of small details that add up to a website that feels genuinely complete.