How do I make a favicon?

Choose Image, Text or Emoji above, adjust the shape and padding, then download the ZIP. Upload the files to your site root and paste the code into your page head.

Can I make a favicon from text or an emoji?

Yes. Use the Text tab for one to three letters, or the Emoji tab for an emoji. Both give the same full set of icon files.

What size should a favicon be?

A favicon.ico with 16, 32 and 48 pixel images covers browsers. Add a 180 pixel Apple touch icon and 192 and 512 pixel PNG icons for phones.

Is my image uploaded to a server?

No. The icons are made in your browser and nothing leaves your device.

Favicon Generator: Make a Favicon from Image, Text or Emoji (Free)

Make a complete favicon set from an image, a few letters or an emoji. Download favicon.ico, PNG icons, an Apple touch icon and the HTML code in one ZIP.

Make a favicon three ways

A favicon is the small icon in a browser tab, a bookmark and a search result. Start with whatever you have:

Image: upload a logo as PNG, JPG, SVG, WebP or GIF.
Text: type one to three letters, pick a font, a text color and a background. A bold letter on a colored square is a classic favicon, and it stays readable at 16 pixels.
Emoji: pick or paste an emoji. It is a fast choice for a new site, a prototype or a side project. The emoji is drawn by your device, and the saved PNG files are fixed, so they look the same everywhere.

What you get

favicon.ico with 16, 32 and 48 pixel images, for tabs, bookmarks and every browser as a fallback.
favicon-16x16.png, favicon-32x32.png and favicon-48x48.png as separate files.
apple-touch-icon.png at 180 by 180 pixels, for iPhone and iPad home screens.
android-chrome-192x192.png and android-chrome-512x512.png for Android and installable web apps.
site.webmanifest, which lists the Android icons.
favicon-code.html, the link tags for the head of your pages.

How to add the favicon to your site

Create the icon above and download the ZIP.
Upload every file to the root folder of your website, so that /favicon.ico opens in the browser.
Paste the code into the head of your pages:

<link rel="icon" href="/favicon.ico" sizes="any">
<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" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Tips for a favicon that works at 16 pixels

Use one simple shape, one letter or one emoji. Fine lines and small text blur away.
Use strong contrast between the mark and the background.
Try the icon on a light and a dark tab with the favicon preview before you publish.
Browsers cache favicons for a long time, so after a change open the site in a private window to see the new icon.

Related tools

If you already have a logo file, favicon from image gives you the same set with image options. Make only the iPhone icon with the Apple touch icon generator, export exact sizes and check an existing favicon with the favicon size tool, or convert a single file with PNG to ICO and the ICO converter. The favicon size guide explains which files you need.

Privacy

Everything happens in your browser. Your image and text are never uploaded.

Favicon Generator

Preview

HTML code