How to Create a Favicon: Sizes for Every Device

Favicon comes from "favorite icon" — the icon browsers save alongside bookmarks. Today the concept has gone far beyond that: the favicon appears in browser tabs, the address bar, desktop shortcuts, the home screen on iOS and Android phones, Google results, and as the icon for Progressive Web Apps (PWAs). Each context requires a different size.

The most common mistake is creating just a single 16×16 pixel favicon.ico file and calling the job done. On a Retina monitor or an iPhone, that icon will look blurry. The solution is generating a complete set of sizes — which sounds complicated, but can be done in seconds with the right tool.

What is the .ico file and when to use it

The .ico format is the original favicon format, created by Microsoft in the '90s. It has a special feature: it can hold multiple sizes inside a single file — for example, 16×16 and 32×32 at once. The browser picks the size that best fits each context.

favicon.ico is still necessary in 2026 for a specific reason: older browsers and some search bots automatically try to access the file at /favicon.ico at the site's root. If it doesn't exist, they generate an unnecessary 404 error in the server logs. So even if you use modern PNG for everything, it's recommended to have a favicon.ico at the root.

Complete table of favicon sizes

Here's the list of every size a complete favicon should cover in 2026:

Size	Format	Where it's used
16 × 16 px	.ico / PNG	Browser tab (default)
32 × 32 px	.ico / PNG	Desktop shortcut (Windows), tabs on HiDPI screens
48 × 48 px	.ico / PNG	Windows Explorer shortcut
57 × 57 px	PNG	iPhone (iOS 1–6, non-Retina screens)
60 × 60 px	PNG	iPhone (iOS 7+, non-Retina screens)
72 × 72 px	PNG	iPad (iOS 1–6, non-Retina screens)
76 × 76 px	PNG	iPad (iOS 7+, non-Retina screens)
96 × 96 px	PNG	Chrome shortcut (Android)
114 × 114 px	PNG	iPhone Retina (iOS 1–6)
120 × 120 px	PNG	iPhone Retina (iOS 7+)
144 × 144 px	PNG	iPad Retina (iOS 1–6), Windows 8 tile
152 × 152 px	PNG	iPad Retina (iOS 7+)
167 × 167 px	PNG	iPad Pro (iOS 9+)
180 × 180 px	PNG	iPhone 6 Plus and later
192 × 192 px	PNG	Android Chrome, PWA (manifest.json)
512 × 512 px	PNG	Android Chrome splash screen, high-res PWA

💡 Good news: you don't need to create each size manually. The ImageTools Favicon Generator generates all these files automatically from a single image — including the multi-size .ico and a ZIP with every PNG.

What image to use as the favicon source

The source image needs to be at least 512×512 pixels — that's the maximum size needed, and starting from a large image ensures the smaller sizes are generated with quality. Using a small image as the base results in blurry icons at the larger sizes.

Accepted input formats

PNG with a transparent background — ideal. The icon looks clean against any tab or home screen background color.
PNG with a solid background — works well if the background color matches your site's design.
JPG — accepted, but with no transparency support.
SVG — the best starting point if you have one available. Vector-based, any size with no loss.

Design tips for favicons

A favicon is a very small space — the 16×16 version has only 256 pixels total. This imposes design constraints many people ignore:

Use your brand's simplest element. The full logo usually doesn't work at 16px. Prefer just the initial, an isolated symbol, or a simplified version of the icon.
Avoid thin text. Any text at sizes below 32px will become illegible.
Use high contrast. The favicon competes with dozens of other open tabs — a low-contrast icon visually disappears.
A solid color background often works better than transparent in many cases. This ensures the icon stands out in both light and dark tabs.
Test the result at 16px before calling the work done. A design that looks great at 512px can become unrecognizable at 16px.

Generate your favicon now — every size at once

Upload your image and download a ZIP with the .ico and every PNG needed for browsers, iPhone, Android and PWA. Free, no sign-up.

Create favicon for free

How to install the favicon on your site

After generating the files, you need to reference them in the HTML <head>. The complete recommended code for 2026 is:

<!-- Basic favicon for browsers -->
<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">

<!-- Apple Touch Icon (iPhone and iPad) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Android and PWA -->
<link rel="manifest" href="/site.webmanifest">

The favicon.ico file should be at the site's root (the same directory as index.html). The other PNG files can live at the root or in a subfolder, as long as the paths in the HTML are correct.

The site.webmanifest file

For PWAs, and so Android Chrome recognizes your icon correctly, you need a site.webmanifest file at the site's root. The basic content is:

{
  "name": "Your Site Name",
  "short_name": "Site",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

📦 The Favicon Generator ZIP already includes the site.webmanifest file pre-configured with the correct paths — just unzip and upload the files to your site's root.

How to install on specific platforms

WordPress

In WordPress, the favicon is called the "site icon". To set it up: go to Appearance → Customize → Site Identity and click "Select Site Icon". WordPress automatically handles generating the needed sizes from the image you upload — just use a square image of at least 512×512 pixels.

Shopify

Under Online Store → Preferences, scroll to "Favicon" and upload a square image of at least 512×512 pixels in PNG or JPG.

Wix

Under Settings → Business Info → Favicon. Use a square image in PNG or JPG.

Squarespace

Under Design → Browser Icon section. Recommended: a square 100×100 pixel PNG (Squarespace handles the rest).

Plain HTML/CSS or frameworks

Place all the generated files at the root of your project and add the <link> tags shown above to the <head> of each page — or the base layout, if you're using a framework like Next.js, Nuxt, or similar.

Checking that the favicon is working

After installing, open the site in a browser tab and check whether the icon shows up. If it doesn't appear right away, try:

Clearing the browser cache (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac).
Opening it in an incognito tab — which doesn't use cache.
Waiting a few minutes, since browsers tend to cache favicons for varying periods.
Checking that the file path in the HTML is correct and that the file actually exists on the server.

Frequently asked questions

What's the minimum recommended size to create a favicon?

512×512 pixels. That's the largest size needed (for the PWA splash screen on Android), and starting from an image of that size ensures every smaller size is generated with sharpness. Using a smaller image results in blurry icons at the larger sizes.

PNG or ICO: which is better for a favicon?

They complement each other. The .ico should live at the site's root for compatibility with older browsers and search bots. Separate PNGs are used for Apple Touch Icon, Android Chrome and PWA — those contexts don't accept .ico. Best practice is to have both: a favicon.ico at the root and PNGs referenced via <link> tags in the HTML.

Do I really need all these sizes?

For most sites, the minimum functional set is: favicon.ico (16+32px), favicon-32x32.png, apple-touch-icon.png (180×180) and android-chrome-192x192.png. That covers modern browsers, iPhone and Android. The remaining sizes are for compatibility with older iOS versions and specific contexts like Windows tiles. Since a generator creates all of them at once, there's no cost to having the complete set.

Why doesn't my favicon show up on Google?

Google takes time to index and display favicons in search results — usually a few days to weeks after publishing. For the favicon to appear, the site needs: a publicly accessible favicon (not blocked by robots.txt), a favicon.ico file at the root or a valid <link rel="icon"> tag in the HTML, and to have been crawled by Googlebot. New sites usually take longer.

Can I use my company logo as a favicon?

Yes, as long as the simplified version works at 16×16 pixels. Logos with text, fine details, or many elements usually aren't recognizable at such small sizes. It's best to create an "icon" version of the logo — just the symbol, initial, or most distinctive element of the brand — specifically for use as a favicon.

Does the favicon affect my site's SEO?

Directly, no — the favicon isn't a ranking factor. Indirectly, yes: a present, well-made favicon appears in search results next to the site name, boosts brand recognition, and can improve click-through rate (CTR). Sites without a favicon show up with a generic icon in results, which comes across as less professional.