Favicon Generator

A favicon (short for 'favorites icon'), also known as a website icon, a page icon or an urlicon, is an icon associated with a particular website or webpage. A web designer can create such an icon, and many recent web browsers can then make use of them. Browsers that support favicons may display them in the browser's URL bar, next to the site's name in a list of bookmarks, and next to the page's title in a tabbed document interface.

What favicons are created?

This generator will create the following favicons:

Apple favicons, that can be used with iPad, iPhone and iTouch devices.
Windows favicons, that can be used with all Windows devices.
Standard favicon.ico, which can be used with web browsers, contains 5 different icon sizes.

Drag and drop an image here or browse your device, or paste from your clipboard PNG, JPG, GIF, WebP or SVG. A square image works best.

Your website

HTML for your <head>

Favicon settings

Your icon

If the image isn’t square

Crop to squareKeeps the centre of the image Fit insideKeeps everything, adds transparent space

Website name

Windows tile colour

Your image stays in your browser. Nothing is uploaded.

How to use it

The favicon generator is a handy tool that will create different icon sizes that are required to display a favicon for your site.

Add your imageDrop in a square GIF, PNG, JPG, WebP or SVG, or browse or paste one.
Check the previewSee every size and a mock browser tab. Choose how a non-square image is handled.
Download the zipIt contains favicon.ico, the PNG icons for browsers, Apple and Windows, and a README.
Add the codeCopy the generated code into the <head> section of your webpage.
Upload the filesPut the images in your site’s root folder and your favicon should now be displayed.

Favicon tips

Keep it simple

Favicons are shown tiny. Bold shapes and few colours stay readable at 16 × 16 pixels.

Start square

A square source avoids cropping or empty space and gives the cleanest result.

Check the tab preview

The mock tab shows how the icon looks at the real size in a browser.

Frequently asked questions

Is my image uploaded anywhere?

No. The icons, the .ico file and the zip are all created in your browser, so your image never leaves your device.

What size should my source image be?

A square image of at least 512 × 512 pixels gives the sharpest results. Very small images are enlarged and can look soft, and a warning appears if yours is under 180 pixels.

My image isn’t square. What happens?

Choose Crop to square to keep the centre of the image, or Fit inside to keep the whole picture with transparent space around it. The preview updates straight away.

Where do I put the files?

Extract the zip into the root folder of your website, so that /favicon.ico loads from your domain. Then paste the generated code into the <head> of your pages.

Why do I still see the old icon?

Browsers and internet providers cache favicons, so a new one can take up to 48 hours to appear. Clearing your cache or opening the site in a private window usually helps.

Which file types can I use?

PNG, JPG, GIF, WebP and SVG. Transparent areas are kept. For animated GIFs only the first frame is used.