FailX
All tools

FailX Specials

Games

Utilities

Image

Calculators

Text

Favicon Generator

Make a favicon from letters, an emoji or an image. Get favicon.ico, Apple and Android icons, a web manifest and the HTML tags in one download.

Shape

Preview

My site

Shown at real size: 16, 32, 48 and 180 px. Make sure it still reads at 16 px.

ZIP contains: favicon.ico (16, 32, 48), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180), android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest, favicon-tags.html

Tags for your HTML <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">

Upload the files to your site’s root (e.g. https://your-domain/favicon.ico), then add these tags to the <head> of every page.

Everything is processed in your browser. Nothing is sent to our servers.

Guide

Key points

  • Builds a full favicon set for browsers, iPhone and Android from text, an emoji or an image.
  • Upload the files to your site root and paste the HTML tags into <head>.
  • One or two letters or a simple symbol stays readable at 16 px.

What is a favicon?

The small icon shown in browser tabs, bookmarks, search results and phone home screens. Google shows it next to your site name in search results — without one you get a generic globe.

Files in the set

  • favicon.ico (16, 32, 48 px) — browser tabs, older browsers, search results
  • favicon-16x16.png, favicon-32x32.png — modern browser tabs and bookmarks
  • apple-touch-icon.png (180 px) — “Add to Home Screen” on iPhone and iPad
  • android-chrome-192x192.png, 512x512.png — Android home screen and installable web apps
  • site.webmanifest — icon, name and theme color for Android

Adding it to your site

  1. Unzip and upload every file to your site’s root folder.
  2. Paste the tags from favicon-tags.html into the <head> of every page.
  3. On WordPress, upload the 512 px PNG under Appearance → Customize → Site Identity → Site Icon.
  4. Browsers cache favicons for a long time — use a hard refresh (Ctrl+F5) or a private window to check.

Tips for a clear favicon

  • At 16 px, one or two letters or a simple symbol reads best; a full logo tends to blur.
  • Use strong contrast, and check the preview on both light and dark tabs.
  • With a transparent background, the Apple touch icon is filled with white, because iOS shows transparency as black.

FAQ

Isn't favicon.ico enough?

It covers browser tabs, but phones need larger PNG icons when someone adds your site to their home screen. Using the full set is recommended.

I changed my favicon but still see the old one.

Browsers cache favicons aggressively. Try a hard refresh (Ctrl+F5) or a private window. Search results can take a few days to update.

Is my image uploaded?

No. Every icon is generated in your browser and never leaves your device.