Favicon Generator

Making your favicon

1. Pick a source. "From Image" uses a picture you add. "From Text / Emoji" draws a letter or an emoji on a coloured square.
2. From Image: drop a file or click browse, then click Generate Favicons. If the image is not square, the tool cuts the largest square from the middle, and the sides are lost. Transparent areas stay transparent, except in the 180 × 180 Apple touch icon. That one gets a solid background colour, which is white unless you pick another one. If your browser cannot open the file, a message tells you.
3. From Text / Emoji: type up to 2 characters. An emoji counts as 1, even with a skin tone or as a flag. Then set the background colour, the text colour, the font (Arial, Georgia, Courier New, Impact or Verdana), the font size (30–90%, starts at 65%) and the corner rounding (0–50%, starts at 15%). The rounding is used for every size except the 180 × 180 Apple touch icon, which is always a full square. Text is always bold. The 128 × 128 preview updates as you go. Click Generate Favicons.
4. Download. Each size has its own Download PNG button. Download ICO gives you favicon.ico. Download All (ZIP) gives you favicons.zip with all eight PNG files. The ICO is not inside the ZIP, so download it separately.

The files, and where each one is used

The tool makes eight square PNG files: 16, 32, 48, 64, 128, 180, 192 and 512 pixels. It also makes one ICO file. The ICO holds two PNG images, 16 × 16 and 32 × 32. PNG inside ICO works in all current browsers. You do not need every file:

Google Search shows your favicon next to your pages in results. Google asks for a square icon and suggests one larger than 48 × 48, so the 192 × 192 file is a safe choice. The tool does not make an SVG icon or a web manifest file.

Where to put the files

1. Upload the files to the root folder of your site. That is the folder with your home page, usually index.html. When it works, https://your-site.com/favicon.ico opens the icon.
2. Add these tags inside the <head> of every page:

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">
<link rel="manifest" href="/site.webmanifest">

Leave out the last line if you have no manifest. If you want one, create a text file named site.webmanifest in the same folder:

{
  "name": "My Site",
  "short_name": "My Site",
  "icons": [
    { "src": "/favicon-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/favicon-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

The / at the start of each path means "the root of the domain". If your site lives in a subfolder, such as https://name.github.io/my-project/, remove the / or write the full folder path. Otherwise the browser looks in the wrong place.

Tips for a sharp favicon

• Start big and square. Use an image of at least 512 × 512 pixels. A smaller image is stretched up for the 512 file and looks blurry. A square source also means nothing gets cut off.
• Keep it simple. A 16 × 16 icon has only 256 pixels. Thin lines and small words disappear. A bold shape or one or two letters works best. That is what text mode is for.
• Check light and dark tabs. Many people use dark browser themes. A dark logo on a transparent background can almost vanish there. Add a background colour or a light outline.
• Pick a good background for the Apple touch icon. iOS does not show transparency in home screen icons. Clear areas often turn black. iOS also rounds the corners by itself. So the tool always makes the 180 × 180 file a full square with a solid background. In image mode you choose that colour under the preview. If your logo is white, pick a darker colour.
• Emoji and fonts come from your device. The emoji is drawn with the emoji font of the computer you use, so a favicon made on Windows shows the Windows style of that emoji everywhere. Fonts such as Impact are not on every device. If one is missing, your browser uses another font.

If you still see the old icon

Browsers keep favicons in their cache for a long time. After you upload a new one, open /favicon.ico on your site directly and reload it. Then reload your page. A private window shows the new icon more quickly. Bookmarks and home screen icons that already exist may keep the old image until they are added again.