How to Make a Favicon for Your Website (2026 Guide)

A favicon is one of those tiny details that experienced web designers obsess over and everyone else forgets until they notice their site looks unfinished in a browser tab. It is the image that appears next to the page title in a browser tab, on the bookmark bar, in the browser history, and (with the right setup) on the home screen when someone saves your site on their phone.

Getting it right is a 10-minute job. Getting it wrong is worse than not having one at all, because a blurry or wrong-sized favicon looks worse than the default browser icon. This guide covers both.

What "favicon" actually covers

The word "favicon" comes from "favourites icon", the little image a browser shows next to a bookmark. In 2026, the same image is used in at least eight places:

• Browser tab next to the page title
• Bookmark bar and bookmark menus
• Browser history entries
• Tab switcher on mobile
• Home screen icon when a user saves your site (iOS / Android)
• Pinned tab in Safari
• Rich previews on social media (sometimes)
• Search results (Google sometimes shows it next to results)

Every surface uses a slightly different size. A favicon set (not a single favicon) is what you actually need.

The modern favicon set (2026)

If you generate the right set once, you never have to think about it again. Here is what you need:

You do not need all six files if you only care about a browser tab. But if you want your site to look good when someone saves it to their phone home screen, generate the full set.

Design tips for a favicon that reads at 16 x 16 pixels

The hardest thing about favicon design is that it has to be readable at 16 x 16, the size of a pencil eraser. Most favicons fail this test because they were designed at 512 x 512 and never checked at small size.

• Use a single letter or a simple geometric shape. A capital "T" for ToolDeck, a "G" for Google, a rounded triangle. This is what works at 16 px.
• Skip text unless it is one character. Anything more becomes illegible.
• Use high contrast. Light on dark or dark on light. Avoid mid-tones on mid-tones.
• Avoid fine details. Thin lines disappear. Rounded corners look softer.
• Test at actual size. Generate the icon, open it in an image editor, and zoom to 100 percent (not 400 percent). If you cannot tell what it is, redraw.
• Square is safe. Round favicons get cropped awkwardly in some surfaces.

How to generate a favicon set

1. Open the Favicon Generator tool.
2. Upload a square source image, at least 512 x 512. Larger is better. PNG with transparency works best.
3. The tool generates every size in the modern set.
4. Download the resulting ZIP file. It contains all icons plus a site.webmanifest and a snippet of HTML.

How to install the favicon set

The generated ZIP file contains everything you need. Here is the exact process:

Step 1: Upload the icons

Upload every file from the ZIP to the root of your website. In a Next.js project, that means the /public folder. In WordPress, the root directory. In any other CMS, wherever static assets live. The icons must be publicly accessible, usually at https://yoursite.com/favicon.ico and similar paths.

Step 2: Add the HTML

Add these lines to the head of every page. In a Next.js app, they go in app/layout.tsx inside the head tag.

<link rel="icon" href="/favicon.ico" sizes="any" />
<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" />

That is the modern, complete set. Every browser (Chrome, Safari, Firefox, Edge, on desktop and mobile) will pick the right one for its surface.

Step 3: Verify the site.webmanifest

The manifest file needs to reference the Android icons:

{
  "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": "#060912",
  "background_color": "#060912",
  "display": "standalone"
}

The theme_color and background_color are the colours Android uses for the top bar and splash screen when a user installs your site as a PWA.

Five mistakes that make favicons fail

• Wrong file location. The favicon must be at /favicon.ico (root) for old browsers to find it automatically. Modern browsers use the link tags, but old ones do not.
• Wrong file type. A .ico file is not the same as a .png renamed to .ico. Generate both formats properly.
• Path mistakes. Use absolute paths (/favicon.ico), not relative ones (./favicon.ico or ../favicon.ico). Relative paths break on pages in subfolders.
• Wrong size. A 512 x 512 PNG served as a "16 x 16 favicon" works but wastes bandwidth and looks blurry when the browser downsamples. Serve the right size for each slot.
• Cache problems. Browsers cache favicons aggressively. After changing your favicon, hard-refresh (Ctrl+Shift+R) to see the new one. In production, users may see the old one for a day or two.

If your favicon is not showing up

The bottom line

A favicon is a five-minute job that most sites get wrong. Generate the full set once, install it correctly, verify with a hard refresh, and never think about it again. It is a small but visible quality signal: a site with a proper favicon looks more finished than one that just shows the browser default.