Skip to content
FlexiConvert

Favicon generator

Every icon your website needs, made from your logo and ready to upload.

Other tools: JPEG to JPG Compress JPG Compress PNG Compress WebP Resize image Crop image Merge images

One file at a time, up to 20 MB.

Fit to square

Icons are square. If your image isn’t, choose whether it is shown whole (with transparent margins) or fills the square.

For the Apple icon, which can’t be transparent, and as the theme colour on Android.

Your files are deleted automatically after conversion, and no later than one hour after upload. How we handle your files

Create your website’s complete favicon from your logo: the browser tab icon, the iPhone and Android home screen icons, the manifest and the HTML code to link them. Upload a PNG, JPG, WebP or SVG image and download a ZIP with everything, with no sign-up and no watermarks.

How to create a favicon

  1. Select your logo or icon as PNG, JPG, WebP or SVG; ideally square and at least 512 pixels.
  2. Choose whether the image is shown whole or fills the square, and the background colour of the Apple icon.
  3. Click “Create favicon” and download the ZIP.
  4. Upload the files to the root of your website and paste the code from head.html into the head tag of your pages.

What the package includes

File What it is for
favicon.ico The classic tab icon, with 16, 32 and 48 pixel sizes in a single file. Browsers look for it even if you don’t link it.
favicon-16x16.png and favicon-32x32.png The tab and bookmark icons in modern browsers.
apple-touch-icon.png The 180-pixel icon used by iPhone and iPad when your website is added to the home screen.
android-chrome-192x192.png and android-chrome-512x512.png The icons for Android and installable web apps.
site.webmanifest The manifest that declares the Android icons and your website’s colour.
head.html The tags to link the icons from your pages.

How to install it on your website

  1. Unzip the file and upload all the files, except head.html, to the root of your website (where the home page is).
  2. Copy these tags, which also come in head.html, into the head tag of your pages:
<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" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
  1. If you like, enter your website’s name in name and short_name inside site.webmanifest.

Browsers cache the favicon: if you don’t see the new one straight away, do a hard refresh of the page or wait a while.

Fit or fill

All icons are square. If your image isn’t, you can fit it, so it is shown whole with transparent margins, or fill the square, cropping what is left over at the sides. For a horizontal logo with text, it usually works better to use just the logo’s symbol, cropped to a square.

The Apple icon can’t be transparent: iOS would fill the background with black. That is why we create it with the background colour you choose, which is also used as your website’s colour on Android. The other icons keep their transparency.

Tips for a good result

  • Start from a large image, at least 512 × 512 pixels, or better still an SVG: the small icons are worked out from it.
  • Keep it simple: at 16 pixels, text and fine details can’t be read. A symbol or an initial in contrasting colours works much better.

If you only need the .ico file, you can convert your PNG to ICO.

Limitations

  • One image at a time, up to 20 MB and 100 megapixels.
  • We don’t change your website: you have to upload the files and add the tags yourself, or ask whoever manages it.

Frequently asked questions

What size should the image be to create a favicon?

The bigger, the better: at least 512 × 512 pixels, or an SVG. All the icons, from 512 down to 16 pixels, are worked out from it.

Where do I upload the favicon files?

To the root of your website, the same folder as the home page. Then paste the tags from head.html into the head tag of your pages.

Why can’t I see the new favicon in my browser?

Because browsers cache the favicon. Do a hard refresh of the page, open it in a private window or wait a while for it to update.

Why does the Apple icon have a coloured background?

Because iOS doesn’t support transparency in home screen icons and would fill the background with black. We create it with the background colour you choose so it looks right.

Can I create my website’s favicon in WordPress?

WordPress has its own option, the “Site Icon” (in Appearance › Customize › Site Identity or, depending on the version and theme, in the general settings): you upload a square image and it creates the sizes itself. This tool’s package is for websites where you can upload files and edit the code.

Convert your PNG, JPG, WebP or SVG files too