How to Create a Favicon From Your Logo

The favicon files you actually need

Favicon advice online ranges from “one ICO file” to twenty-plus icons for every device ever made. In 2026 the practical set is small:

The Favicon Generator creates exactly this set from one image, plus the HTML to paste. It runs in your browser, so the logo is never uploaded.

Step 1: Simplify your logo for 16 pixels

A 16 × 16 favicon has 256 pixels in total — fewer than a single letter in your header logo. What survives at that size:

• An icon or symbol with bold shapes.
• A single letter (or two) from your name in a heavy weight, on a coloured square or circle.
• High contrast — the tab bar may be light or dark.

What does not survive: wordmarks, taglines, thin outlines, fine gradients and small details inside the mark. If your logo is a wordmark with no symbol, use the first letter in the brand typeface. Many well-known brands do exactly this.

Step 2: Choose padding and background

• Padding: around 10–12%. Edge-to-edge icons look cramped in tabs and are clipped by rounded masks on phones. The generator’s default of 12% works for most marks.
• Transparent or solid: transparent looks native in light browser tabs, but a dark icon can vanish in dark-mode tabs. A solid rounded square in your brand colour is the most robust choice.
• Apple touch icon: iOS fills transparency with black and applies its own rounded corners, so this one should always have a solid background and square corners — the generator handles that automatically.

Step 3: Upload the files and add the HTML

Upload every file to the root of your website (the same folder as your homepage), then add these tags inside <head>:

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

Keeping favicon.ico at the root matters even with the tags: many crawlers, RSS readers and older browsers request /favicon.ico directly without reading your HTML.

Favicons in Google Search results

Google shows a favicon next to your site name in mobile and desktop results. Its guidelines are specific:

• The favicon must be square (1:1) and at least 48 × 48 px. Google recommends sizes that are multiples of 48 (48, 96, 144…).
• It must be crawlable — not blocked by robots.txt — and the homepage must reference it with a rel="icon" link.
• Use a stable URL; changing it frequently delays updates.
• It should visually represent your brand, and must not be inappropriate — Google replaces unsuitable icons with a generic globe.

Updates are not instant. After changing your favicon, it can take days or weeks for Google to recrawl and show the new one. Requesting indexing of the homepage in Search Console can speed it up.

Optional: an SVG favicon that adapts to dark mode

Modern Chrome, Edge and Firefox support SVG favicons, which stay sharp at any size and can react to the browser theme:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Inside the SVG, a <style> block with @media (prefers-color-scheme: dark) can switch the fill colour. Safari’s support is more limited, so keep the ICO and PNG files as fallbacks. If you only have a raster logo, see converting PNG to SVG first.

Adding a favicon in WordPress, Shopify, Wix and Squarespace

• WordPress: Appearance → Customize → Site Identity → Site Icon (or Settings → General in block themes). Upload a square image of at least 512 × 512; WordPress generates the smaller sizes and tags itself.
• Shopify: Online Store → Themes → Customize → Theme settings → Logo (or Brand) → Favicon image. Shopify recommends 32 × 32; upload a sharp square PNG. More in our Shopify logo guide.
• Wix: Settings → Website settings → Favicon (premium plans). Upload a square PNG.
• Squarespace: Design (or Site styles) → Browser icon / Favicon. Upload a square PNG at least 300 × 300.
• Custom sites: upload the full package and paste the HTML as described above.

Troubleshooting: my favicon is not changing

1. Browser cache. Browsers keep favicons for a long time. Test in a private/incognito window, or open /favicon.ico directly and hard-refresh.
2. Wrong path. Open each linked URL in the browser; a 404 means the file is not where the tag says.
3. Theme override. WordPress themes and plugins sometimes add their own icon tags. View the page source and search for rel="icon" — there should be only one set.
4. CDN cache. If you use Cloudflare or similar, purge the cached favicon files.
5. Google still shows the old one. Wait for a recrawl, and confirm the new icon meets the 48 px square rule.