Favicon: how to create the perfect icon for your website

What is a favicon?

The favicon — contraction of favorite icon — is this little icon that appears in your browser tab, right next to the page title. It's also the icon that appears in your favorites, in the browsing history, on the home screen of your smartphone when you add a site as a shortcut, and even in Google search results on mobile.

Invented by Microsoft in 1999 with Internet Explorer 5, the favicon was originally a simple favicon.ico file placed at the root of the site. Twenty-seven years later, the concept has evolved considerably: we are now talking about an ecosystem of icons available in several formats and sizes to cover all uses — desktop browsers, mobile devices, PWA (Progressive Web Apps) and search engines.

Despite its tiny size (often 16×16 or 32×32 pixels), the favicon plays a disproportionate role in the perception of a website. It is often the very first graphic element that a visitor sees of your brand — even before the large format logo on your home page.

Why the favicon is more important than we think

A site without a favicon is like a store without a brand. It works, but it inspires less confidence. Here's why this little square of pixels deserves your attention.

Immediate recognition in tabs

Most Internet users browse with several tabs open simultaneously — often 10, 15, or even 20. When the tabs are compressed, the page title disappears and only the favicon remains visible. It’s what allows you to find your site in the tab bar at a glance. Without a favicon, your tab displays a generic globe icon — indistinguishable from the others.

Professional credibility

A personalized favicon is a signal of professionalism. Visitors do not consciously notice it when it is there, but they immediately notice its absence. A site without a favicon gives the impression of being unfinished, of an amateur project. This is especially true for business sites, online stores and professional services sites.

Presence in favorites and history

When a user adds your site to their favorites (bookmarks), the favicon is the main visual element that will allow them to find it. In a list of 50 favorites, a good favicon can be found in a second. A site without a favicon gets lost in the crowd.

Home screen icon on mobile

On iOS and Android, users can add a site to their home screen. The icon that appears is derived from the favicon (or the Apple Touch Icon / PWA manifest icon). If you haven't configured anything, the system generates an ugly thumbnail of your page — not exactly the branding you were hoping for.

Google search results

Since 2019, Google has displayed favicons in search results on mobile, and since 2023 also on desktop. A distinctive favicon in the SERPs increases the visibility of your result and helps improve the click-through rate (CTR). Your site appears more professional and more reliable next to results that do not have a favicon or display a generic globe.

Favicon formats in 2026: ICO, PNG, SVG

The landscape of favicon formats has evolved a lot. Here is the state of affairs in 2026.

ICO: the historic format, still useful

The ICO (Windows Icon) format is the original favicon format. Its unique advantage: it can contain several sizes in a single file (16×16, 32×32, 48×48…). All browsers support it, including the oldest.

In 2026, the favicon.ico file remains recommended at the root of your site as a universal fallback solution. This is the file that browsers look for by default when no <link> tag is specified.

Disadvantage: the ICO format does not support partial transparency as well as PNG, and the files can be larger when integrating several resolutions.

PNG: the modern standard

The PNG format is today the most used format for favicons. It offers excellent image quality, perfect transparency and good compression. All modern browsers support PNG favicons.

Google specifically recommends a favicon of at least 48×48 pixels in PNG for display in search results. The most common sizes are 16×16, 32×32, 48×48, and 180×180 (for the Apple Touch Icon).

SVG: the future, already present

The SVG (Scalable Vector Graphics) format is the most modern format for favicons. Its decisive advantage: being vectorial, it adapts to any size without loss of quality. A single SVG file potentially replaces all PNG versions.

Since 2025, SVG has been supported by all major browsers: Chrome, Firefox, Edge and Safari. It is also the only format that allows you to natively manage dark mode via @media (prefers-color-scheme: dark) directly in the SVG file.

Attention: despite the excellent browser support, it is still recommended to provide a fallback ICO file for marginal cases (RSS feed readers, certain desktop applications, embedded browsers).

The essential sizes

In 2026, here are the favicon sizes you really need to provide to cover all uses. No more lists of 20 different sizes: focus on the essentials.

The minimum recommended kit

favicon.ico (32×32, even multi-resolution 16+32+48) — placed at the root of the site, universal fallback
favicon.svg — for modern browsers, with optional dark mode support
apple-touch-icon.png (180×180) — for iOS home screen
icon-192.png (192×192) — for the PWA manifest (Android)
icon-512.png (512×512) — for the PWA splash screen and blinds

The corresponding HTML code

In the <head> section of your site, simply add these few lines:

<link rel="icon" href="/icon.svg" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-icon">
<link rel="manifest" href="https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest">

And in your manifest.webmanifest file:

{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

This configuration covers almost all use cases in 2026: desktop, mobile browsers, PWAs, Google results, favorites and home screens.

Do we still need to provide 16×16 separately?

No, except in very specific cases. A 32x32 ICO file will automatically be reduced to 16x16 by the browser if necessary. And if you provide an SVG, the browser takes care of it natively. The multiplication of intermediate PNG sizes (24×24, 48×48, 64×64, etc.) is largely useless in 2026.

How to create your favicon step by step

1. Starting from its logo

The favicon must be a simplified and recognizable version of your logo. If your logo is a whole word (logotype), it will probably not be readable at 16x16 pixels. In this case, use the initial, a monogram or a distinctive graphic element of your visual identity.

Some concrete examples:

Facebook uses the lowercase “f” in its logo
Google uses the multi-colored capital “G”
Twitter/X uses the symbol
Spotify uses the three arcs of its icon

If you don't have a logo yet, now is the time to create one. A favicon consistent with your logo reinforces your brand recognition across all touchpoints. Wilogo can help you create your logo — and the favicon that goes with it.

2. Simplify as much as possible

A favicon is not a miniature work of art. It is a symbol of recognition. Fine details, subtle gradients, long texts — all that disappears at 16 pixels on a side. The best favicons are simple shapes, with contrasting colors and an immediately identifiable silhouette.

Test your favicon at its actual size. Display it in 16x16 on your screen. If you no longer recognize your brand, it's too complex.

3. Choosing the right colors

Use the main colors of your graphic charter. Favors strong contrasts: the favicon appears on varied backgrounds (light or dark tab bar, white or colored background in favorites). A favicon disappearing on a white background or becoming unreadable in dark mode is a common problem.

To learn more about choosing colors for your visual identity, consult our complete guide to logo colors.

4. Create the files

You can create your favicon with any design software (Figma, Illustrator, Photoshop, Inkscape) by exporting to the necessary formats. But the simplest is often to use an online generator (see tools section below) which automatically produces all the variations from a single source image.

For optimal results, start with a source image of at least 512×512 pixels, square, with a transparent background if possible. The ideal format for the source image is SVG — it will be resized without loss.

5. Implement on your site

Place the files at the root of your site (or in a dedicated folder) and add the <link> tags in the <head> of each page. If you use a CMS like WordPress, Wix or Squarespace, most offer a “favicon” or “site icon” option in the appearance settings.

The best tools for generating a favicon

No need to do everything by hand. Here are the most reliable tools for creating and optimizing your favicon in 2026.

RealFaviconGenerator.net

It has been the benchmark for years. You upload your image (PNG, SVG or JPG), and the tool automatically generates all the necessary variations: ICO, multi-size PNG, Apple Touch Icon, PWA manifest, plus the HTML code to copy and paste. It also offers an overview on different browsers and operating systems.

Favicon.io

A free tool that allows you to create a favicon from an image, text (by choosing the font and colors) or an emoji. Very practical for quickly prototyping a favicon based on an initial. Export includes ICO, PNG and manifest formats.

Figma / Illustrator / Inkscape

If you want total control over the design, use vector software. Create your favicon in SVG, export to PNG at the necessary sizes, and use an online converter to generate the ICO file. The advantage of this approach: you keep the source files editable in your design project.

Generators integrated into CMS

WordPress (via plugins like Flavor or native settings since WP 4.3), Shopify, Wix, Squarespace — all modern CMS allow you to configure a favicon directly from the administration interface. The downside: they don't always generate all the recommended variations.

Favicon and SEO: what real impact?

Is the favicon an SEO ranking factor? The short answer: no, not directly. Google does not use the favicon as a ranking signal in its algorithm. But its indirect impact is very real.

Display in SERPs

Since Google displays favicons in search results (mobile since 2019, desktop since 2023), a distinctive favicon can improve the click-through rate (CTR) of your results. A site with a professional and recognizable favicon attracts more attention than a result with the generic globe icon.

Google has specific technical requirements for displaying the favicon in the SERPs:

The favicon must be at least 48×48 pixels (multiples of 48 are preferred)
It must be square (1:1 ratio)
It must be visible and readable at small size
The favicon URL must be accessible to Googlebot (no blocking by robots.txt)
The favicon must be hosted on the same domain as the site
Content must visually represent the site’s brand

If your favicon does not meet these criteria, Google will simply not display it — which deprives you of a visual advantage in the results.

Trust and user behavior

A professional site inspires confidence. Trust promotes clicks, time spent on the site, page views — all signals that Google interprets positively. The favicon is part of this overall impression of quality. It's a weak signal individually, but it adds to all the other signals of professionalism on your site.

Web performance

A poorly optimized favicon (too heavy, too many HTTP requests) can marginally impact the performance of your site. A well-configured favicon is no problem — the files are a few kilobytes in size and are cached by the browser. But a site that generates 404 errors on /favicon.ico because the file does not exist pollutes the server logs and wastes requests.

Frequent errors to avoid

Here are the errors we encounter most often, even on otherwise well-designed sites.

1. No favicon at all

It's more common than you think, especially on newly launched sites. The browser displays a globe icon, the server logs fill up with 404 errors on /favicon.ico, and the site loses credibility. Even a temporary favicon based on your brand initial is better than nothing.

2. Use your logo in full, not simplified

A horizontal logo with the full brand name written in full will never work at 16x16 pixels. This is the number one source of unreadable favicons. Extract the most distinctive element from your logo (symbol, initial, monogram) and use it alone.

3. Forget the Apple Touch Icon

Without the apple-touch-icon.png (180x180) file, iOS users who add your site to their home screen will see a reduced screenshot of your page instead of a clean icon. It's a shame when the solution is so simple.

4. Skip Dark Mode

If your favicon is dark (black, navy blue, etc.) and the user is in dark mode, the icon may become invisible in the tab. The solution: use an SVG favicon with a media query for dark mode, or choose colors that work on both light and dark backgrounds.

5. Neglecting the PWA manifest

If your site is a web app or if you plan to become one, the manifest.webmanifest file with the 192×192 and 512×512 icons is essential. Without it, the installation on the Android home screen will not work correctly.

6. Favicon not accessible to Googlebot

Check that your robots.txt file does not prohibit access to the folder containing your favicons. Google must be able to crawl the favicon URL to display it in search results. This is a stupid technical error but one that often happens during site migrations.

Good practices and final checklist

Here is your checklist for a perfect favicon in 2026:

✓ A favicon.ico (32×32 minimum) at the root of the site
✓ A favicon.svg with optional dark mode support
✓ An apple-touch-icon.png (180×180) for iOS
✓ A manifest.webmanifest with 192×192 and 512×512 icons
✓ The correct <link> tags in the <head>
✓ Favicon visible on light background AND on dark background
✓ Favicon recognizable and consistent with the vector logo of the brand
✓ No blocking in robots.txt
✓ Test on mobile, desktop and in Google results

The favicon is a small detail that says a lot about the seriousness of your site. Like minimalist design, it is the art of conveying maximum information in a minimum of space.

Create your logo and favicon with Wilogo →

FAQ

What is the ideal size for a favicon in 2026?

The minimum recommended kit includes: a favicon.ico in 32×32 pixels at the root of the site, an SVG favicon for modern browsers, an Apple Touch Icon of 180×180 pixels for iOS, and PNG icons in 192×192 and 512×512 for the PWA manifesto. Google requires a minimum of 48x48 pixels for display in search results.

Does the favicon have an impact on SEO?

The favicon is not a direct ranking factor in the Google algorithm. However, it is displayed in search results (desktop and mobile), which can improve click-through rate (CTR). A professional favicon also contributes to the overall impression of credibility of a site, which indirectly influences user behavior.

How to create a favicon for free?

Several free tools exist: RealFaviconGenerator.net is the reference for generating all variations from an image. Favicon.io allows you to create a favicon from text, an image or an emoji. For full control, use free vector software like Inkscape or Figma (free for personal projects).

Can we use an SVG favicon in 2026?

Yes. By 2026, all major browsers (Chrome, Firefox, Edge, Safari) support SVG favicons. SVG has the advantage of being perfectly sharp at all sizes and supporting dark mode via CSS media queries. However, it is recommended to keep a favicon.ico file in fallback for edge cases.

Do you need a favicon different from your logo?

The favicon must be consistent with your logo but not necessarily identical. If your logo is complex or contains text, you should simplify it for the favicon: use the initial, a monogram or the most distinctive graphic element. The goal is for the favicon to remain recognizable in 16×16 pixels.