How to Create a Favicon for Your Website (ICO, PNG, Apple)

To create a favicon, design a simple square icon (one or two letters or a symbol work best), export it as favicon.ico plus PNG icons for phones, upload the files to your site's root folder and add a few link tags to your HTML. The Favicon Generator makes the whole set from text, an emoji or your logo, and gives you the HTML to paste.

What is a favicon?

A favicon is the small icon shown in browser tabs, bookmarks, history and, on mobile, Google search results. When someone saves your site to their phone's home screen, the larger app icons are used. A clear favicon makes your site easier to find among many open tabs and looks more professional.

Which favicon sizes do I need?

File	Size	Used by
favicon.ico	16, 32 and 48 px inside one file	Browser tabs, Windows, older browsers
favicon-16x16.png and favicon-32x32.png	16 and 32 px	Modern browser tabs
apple-touch-icon.png	180 × 180 px	iPhone and iPad home screen
android-chrome-192x192.png and 512x512	192 and 512 px	Android, installed web apps
site.webmanifest	text file	Tells Android your app name, icons and colours

The Favicon Generator downloads all of these in one zip, plus a small how-to file with the HTML.

How do I make a favicon step by step?

1. Open the Favicon Generator.
2. Choose Letters or emoji and type 1–3 characters, or choose From an image and pick your logo (square PNG or SVG works best).
3. Pick a background colour, text colour and shape: rounded square, square or circle. For an image you can also choose a transparent background.
4. Check the small previews at 16, 32 and 48 px: that's how the icon looks in a browser tab.
5. Type your site name for the app manifest.
6. Click Download favicon pack (.zip).

How do I add the favicon to my website?

Unzip the files into your website's root folder (next to your home page). The generator then shows five short link tags under "Paste this into your site's head", with a Copy button. They point browsers to:

• favicon.ico (48 px) for browser tabs,
• favicon-32x32.png and favicon-16x16.png for modern browsers,
• apple-touch-icon.png (180 px) for iPhones and iPads,
• site.webmanifest for Android and installed web apps.

Paste them into the head section of every page, usually in your theme's header template, and they'll work site-wide.

WordPress: go to Appearance → Customize → Site Identity → Site Icon and upload android-chrome-512x512.png. Shopify, Wix and Squarespace have a similar "favicon" or "site icon" setting where you upload one image.

What makes a good favicon?

• Simple: at 16 pixels, detail disappears. One bold letter or a simple shape reads best.
• High contrast: a light letter on a dark background (or the reverse) stands out in both light and dark browser themes.
• Consistent with your brand: use your main brand colour.
• Square: wide logos become tiny when squeezed into a square; use just the icon part of your logo.

An emoji can make a fun, instantly recognisable favicon for a personal site or side project. It's drawn with your device's emoji font.

Why isn't my favicon showing?

• Cache: browsers keep old favicons for a long time. Test in a private window.
• Wrong path: the files must be at the paths in the HTML, usually the site root.
• Missing tags on some pages: the link tags need to be on every page, normally in your theme's header.
• Google results: Google picks up new favicons when it recrawls your home page, which can take a while. Your favicon should be a multiple of 48 px square and visible to Google's crawler.

Create your favicon

Make a complete icon set in under a minute with the free Favicon Generator. Everything happens in your browser, so your logo isn't uploaded. To brand your printed materials too, try the QR Code with Logo and read how to add a logo to a QR code. Checking your domain's setup? The IP & DNS Lookup shows your DNS records.