What image should I use for my favicon?

Use your logo or a simplified version of it. At 16x16 pixels, details disappear — bold shapes with high contrast work best. If your logo has text, use just the icon mark or the first letter. A recognizable shape matters more than detail.

What size image do I need to start with?

Start with at least 512x512 pixels. The favicon generator will resize it down to every required size (16x16, 32x32, 48x48, 180x180, 192x192, 512x512). Starting with a large image ensures the biggest sizes stay sharp. Starting too small causes pixelation when scaling up.

How do I add a favicon to my HTML?

Add link tags inside your <head> element: <link rel="icon" type="image/x-icon" href="/favicon.ico"> for the ICO file, <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> for PNG, and <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> for iOS.

Why is my new favicon not showing in the browser?

Browser caching. Browsers aggressively cache favicons and may show the old one (or the generic globe) for days. Fix: hard refresh with Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac). If that fails, clear your browser cache entirely or test in an incognito/private window.

Can I have different favicons for different pages?

Yes, technically — each page can specify different favicon link tags. However, this confuses users who rely on favicons to identify sites in their tabs. Use one consistent favicon across your entire site for the best user experience.

Should my favicon have a transparent background?

For browser tabs, yes — transparent backgrounds let your icon blend with the browser chrome. Use a PNG source image with transparency. One exception: Apple touch icons. iOS does NOT support transparent favicons on the home screen — it fills transparent areas with white.

Do I need a favicon.ico file specifically?

For maximum compatibility, yes. Some older browsers and certain platforms only look for favicon.ico in the root directory. Modern browsers prefer the PNG link tags, but having favicon.ico as a fallback ensures your icon appears everywhere. The generator creates it automatically.

How often should I update my favicon?

Only when your brand identity changes (new logo, rebrand, merger). Changing favicons frequently confuses returning visitors who use the icon to identify your site. If you do update, remember to clear CDN caches and update the cache-busting query string in your link tags if applicable.

How to Create a Favicon for Your Website — Complete Guide (2026)

Last updated: April 20268 min readGenerator Tools

Every website needs a favicon. It takes 5 minutes to create and install one. Here is the complete process: designing an icon that works at tiny sizes, generating every required format, adding the HTML, and fixing the inevitable browser cache issue.

Step 1: Design or Prepare Your Icon

Your favicon needs to be recognizable at 16x16 pixels — the size of a browser tab icon. That rules out detailed images, photos, and most text. What works:

Your logo mark — the icon part of your logo, without the wordmark
A single letter — the first letter of your brand in a bold font on a colored background
A simple shape — geometric icons with 1-2 colors translate well to small sizes

If your logo does not have a standalone icon, create a simple one. A colored square with a white letter is better than a shrunken full logo that becomes unreadable.

Prepare your source image:

Crop to a perfect square — favicons are always 1:1 aspect ratio
Remove the background for a transparent favicon (save as PNG)
Resize to 512x512 minimum — larger source = sharper output at every size

Step 2: Generate All Favicon Sizes

Open Favicon Generator
Upload your square image (PNG for transparency, JPEG for solid backgrounds)
Download the zip containing every size plus the ICO file

The zip includes: favicon.ico, 16x16, 32x32, 48x48, 180x180 (apple-touch-icon), 192x192, and 512x512 PNGs.

Step 3: Upload Files to Your Website

Place all favicon files in your website's root directory — the same folder as your main index.html or homepage. The file structure should look like:

your-site/
  index.html
  favicon.ico
  favicon-16x16.png
  favicon-32x32.png
  apple-touch-icon.png
  android-chrome-192x192.png
  android-chrome-512x512.png

Step 4: Add HTML Link Tags

Add these tags inside 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="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">

Step 5: Test in Different Browsers

Browser	How to Test	Cache Fix
Chrome	Open a new tab, check the tab icon	Ctrl+Shift+R (hard refresh)
Firefox	Open site, check tab + bookmark bar	Ctrl+Shift+Delete → clear cache
Safari	Open site, check tab + favorites	Develop menu → Empty Caches
Edge	Same as Chrome	Ctrl+Shift+R
iOS Safari	Add to Home Screen, check icon	No cache — shows apple-touch-icon
Android Chrome	Add to Home Screen, check icon	Clear Chrome app cache

Tips for Favicons That Look Good at Small Sizes

High contrast — dark icon on light background (or vice versa). Low-contrast icons disappear in tabs.
Simple shapes — at 16px, only 2-3 recognizable shapes fit. Less is more.
Avoid text — letters below about 48px become illegible. One oversized letter works; a full word does not.
Test at actual size — zoom to 16x16 on your screen. If you cannot identify it, simplify further.
Use color strategically — a bright brand color on a favicon makes your tab pop among a row of generic sites.

Common Errors and Fixes

Problem	Cause	Fix
Favicon not appearing	Wrong file path in HTML	Check href paths match your file locations — use absolute paths starting with /
Old favicon still showing	Browser cache	Hard refresh (Ctrl+Shift+R) or test in incognito window
Blurry favicon	Source image too small	Upload a 512x512+ source image to the generator
White square on iOS	Transparent background	iOS does not support transparent apple-touch-icons — add a solid background
Favicon shows on some pages only	Link tags missing on other pages	Add favicon link tags to the <head> of EVERY page, not just the homepage

Complete Your Website Setup

Meta Tag Generator — set up title, description, and social tags
Open Graph Checker — verify social media previews
Compress Images — optimize page load speed
Robots.txt Generator — configure search engine crawling

Generate every favicon size from one image — free, instant.

Open Favicon Generator

How to Create a Favicon for Your Website — Complete Guide (2026)

Step 1: Design or Prepare Your Icon

Step 2: Generate All Favicon Sizes

Step 3: Upload Files to Your Website

Step 4: Add HTML Link Tags

Step 5: Test in Different Browsers

Tips for Favicons That Look Good at Small Sizes

Common Errors and Fixes

Complete Your Website Setup

Related Posts

Favicon Generator Guide

Favicon Sizes & Formats

Favicon for WordPress & Shopify

Favicon Generator — No Signup