Free Favicon Generator — Create Favicons for Your Website in Seconds

A favicon is the small icon that appears in browser tabs, bookmarks, and mobile home screens next to your site name. It is one of the first things visitors notice — and one of the most commonly neglected elements of web development. A missing favicon screams "unfinished" or "unprofessional." A well-designed one reinforces your brand every time someone sees their open tabs.

Our free favicon generator creates every size you need from a single image or text input. Upload your logo, or type a letter and pick a color, and get the complete favicon package — ICO, PNG at every size, apple-touch-icon, and the HTML code to paste into your site. Everything runs in your browser. No signup, no RealFaviconGenerator account, no Canva subscription.

What Is a Favicon and Why Does It Matter?

Favicon is short for "favorites icon" — it originally appeared next to bookmarked sites in Internet Explorer 5 (1999). Today, favicons appear in:

• Browser tabs — the primary place users see your favicon, distinguishing your tab from dozens of others
• Bookmarks bar — if someone bookmarks your site, your favicon appears next to the bookmark name
• Browser history — makes your site recognizable in the history list
• Mobile home screens — when someone adds your site to their phone's home screen (iOS and Android)
• PWA installs — Progressive Web Apps use your favicon as the app icon
• Google search results — Google sometimes shows favicons next to search result URLs
• Social bookmarking and link previews — some platforms pull your favicon for link cards

For SEO, Google has confirmed they use favicons in mobile search results. A missing or generic favicon can make your listing look less trustworthy compared to competitors who have branded icons. It is a small detail with outsized impact on perceived professionalism.

Favicon Sizes Explained — The Complete List

Modern websites need favicons in multiple sizes because different devices and contexts require different resolutions. Here is the complete list:

Size	Format	Used By
16x16	PNG / ICO	Browser tabs (standard displays)
32x32	PNG / ICO	Browser tabs (retina displays), Windows taskbar
48x48	PNG / ICO	Windows site shortcuts, desktop icons
180x180	PNG	Apple Touch Icon (iOS home screen)
192x192	PNG	Android Chrome, web manifest
512x512	PNG	PWA splash screen, Chrome install dialog

The classic favicon.ico file is actually a container that holds multiple sizes (16, 32, 48) in a single file. Browsers pick the most appropriate size automatically. This ICO format is a legacy from Windows but still supported everywhere and serves as the fallback when more modern formats are not specified.

Tools like Favicon.io and RealFaviconGenerator charge nothing but require accounts or have limitations. Our tool generates all sizes in one click with no restrictions.

Apple Touch Icon — The Size Most People Miss

When an iPhone or iPad user adds your site to their home screen ("Add to Home Screen" in Safari), iOS looks for a file called apple-touch-icon.png. This should be 180x180 pixels. If you do not provide one, iOS takes a screenshot of your page, shrinks it down, and uses that as the icon — which almost always looks terrible.

The apple-touch-icon is referenced in your HTML like this:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

iOS will automatically add rounded corners and a subtle gloss effect (on older iOS versions) to your icon. Design it as a simple, bold graphic — intricate details disappear at 180px on a retina screen. Solid background color with a centered letter, logo mark, or symbol works best.

Web App Manifest — PWA Icons

If you want your site to be installable as a Progressive Web App (PWA) — or just look polished when pinned on Android — you need a web manifest file. This is a JSON file (typically manifest.json or site.webmanifest) that tells the browser about your app:

{
  "name": "Your App Name",
  "short_name": "App",
  "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"
}

Reference it in your HTML head:

<link rel="manifest" href="/site.webmanifest">

The 192x192 icon is used as the app icon on Android home screens. The 512x512 icon is used for the PWA splash screen (the loading screen when you open the app). Both should be PNG format with no transparency issues on colored backgrounds.

Sell Custom Apparel — We Handle Printing & Free Shipping

Text and Emoji Favicons — No Designer Needed

You do not need a graphic designer to create a good favicon. Many well-known sites use a single letter:

• Facebook — white "f" on blue background
• Google — multicolor "G"
• Netflix — red "N"
• Medium — white "M" on black

Our generator lets you type a letter, pick a background color and text color, and generate a clean favicon instantly. Tips for text-based favicons:

• Use a single character. Two or more characters become unreadable at 16px. Stick to one letter, number, or symbol.
• Bold, sans-serif fonts work best. Thin or serif fonts lose detail at small sizes.
• High contrast is essential. White text on a dark background or dark text on a light background. Avoid mid-tone combinations.
• Use your brand's primary color as the background so it is instantly recognizable among other tabs.

You can also use emojis as favicons. A camera emoji for a photography site, a book emoji for a library, a rocket for a startup. Emojis render at any size and are instantly recognizable.

How to Add a Favicon to Your HTML

After generating your favicon files, place them in your website's root directory (/). Then add these lines inside your <head> tag:

<!-- Standard favicon -->
<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 -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Web Manifest (for PWA and Android) -->
<link rel="manifest" href="/site.webmanifest">

That is it. Browsers will automatically select the appropriate size for each context. The favicon.ico in the root directory also works without any HTML tag — browsers check for it by default (convention since IE5).

Troubleshooting — Why Your Favicon Is Not Showing

1. Browser cache. This is the most common cause. Hard refresh with Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac). If that does not work, clear your browser cache entirely or test in an incognito window.
2. Wrong file path. Double-check that the href in your link tags matches the actual file location. Use absolute paths starting with / to avoid subdirectory issues.
3. File not in root directory. Some browsers look for /favicon.ico at the root automatically. If your file is in a subdirectory, it may not be found without an explicit link tag.
4. Invalid ICO file. A PNG file renamed to .ico is not a valid ICO file. ICO is a specific container format. Our generator creates proper ICO files with embedded multi-size bitmaps.
5. Server MIME type. Your server should serve .ico files with the MIME type image/x-icon. Most servers handle this correctly by default, but misconfigured servers may return the wrong type.
6. CDN or proxy cache. If you use Cloudflare, Fastly, or another CDN, purge the cache after uploading new favicons.

Platform-Specific Guides

WordPress

Go to Appearance > Customize > Site Identity > Site Icon. Upload a 512x512 PNG. WordPress generates all needed sizes automatically. Alternatively, upload files via FTP/SFTP and add the link tags to your theme's header.php or use a child theme.

Squarespace

Go to Design > Browser Icon (Favicon). Upload a 300x300px minimum image. Squarespace handles the rest. For the social sharing icon (used for Apple Touch Icon), go to Design > Social Sharing and upload there.

Shopify

Go to Online Store > Themes > Customize > Theme Settings > Favicon. Upload a 32x32px favicon. For larger sizes, edit your theme's theme.liquid and add the link tags manually.

Static HTML Sites

Place all favicon files in your root directory and add the HTML tags shown above. This is the simplest approach and gives you the most control.

Frequently Asked Questions

What sizes does a favicon need to be?

A complete favicon set includes: 16x16px (browser tabs), 32x32px (retina browser tabs), 48x48px (Windows shortcuts), 180x180px (Apple Touch Icon for iOS), 192x192px (Android Chrome), and 512x512px (PWA splash screens). The classic favicon.ico file typically contains 16, 32, and 48px versions bundled together.

How do I add a favicon to my website?

Place your favicon files in your website's root directory, then add link tags in your HTML <head>. The essential tags reference favicon.ico, favicon-32x32.png, apple-touch-icon.png, and your site.webmanifest. Our tool generates the complete HTML snippet you need.

What is an apple-touch-icon?

The apple-touch-icon is a 180x180px PNG image that iOS devices use when someone adds your website to their home screen. Without it, iOS takes a screenshot of your page and uses that as the icon — which usually looks terrible. Always include an apple-touch-icon for a polished mobile experience.

Can I create a favicon from text?

Yes. Our tool lets you generate a favicon from a letter, emoji, or short text on a colored background. This is a fast way to create a recognizable icon without needing a graphic designer. Many successful websites use a single letter or symbol as their favicon.

Why is my favicon not showing up?

Common reasons: browser cache (hard refresh with Ctrl+Shift+R or Cmd+Shift+R), incorrect file path in your HTML link tag, the favicon file is not in the root directory, or the MIME type is wrong on your server. Also check that your favicon.ico is a valid ICO file, not just a renamed PNG.

What is a web app manifest and do I need one?

A web app manifest is a JSON file that tells browsers about your web app — its name, colors, and icons. You need one if you want your site to be installable as a Progressive Web App (PWA) or look good when pinned on Android home screens. The manifest references your 192px and 512px icon files.