KitJade
Images & DesignRuns in your browserNew

Favicon Generator

Generate PNG favicons and a multi-size ICO.

Use the Favicon Generator tool

Runs in your browserUpdated Report a problem

What this favicon generator does

Favicon Generator turns a logo or square image into the sizes browsers and devices request: 16 and 32 px tabs, 48 px shortcuts, a 180 px Apple touch icon, and 192/512 px Android icons. It can also package the small PNGs into a single .ico file.

Images are resized on a canvas in your browser. Padding and background options help small icons stay readable, because fine detail usually disappears at 16 px.

Why use it

  • Produce every common favicon size from one source image.
  • Control padding and background instead of relying on automatic cropping.
  • Download an ICO for older browsers without installing image software.

How to use it

  1. 1Choose a square PNG, JPEG, WebP or SVG image.
  2. 2Pick contain or cover fitting, add padding, and choose a transparent or solid background.
  3. 3Select the sizes you need and generate them.
  4. 4Download the individual PNGs or the ICO bundle and add the link tags to your HTML head.

Worked examples

Simple monogram

Input

A 1024 px square logo with a transparent background

Output

A crisp 32 px PNG and a multi-resolution ICO with white padding.

A little padding keeps the mark from touching the edges of the browser tab.

Photo-based mark

Input

A detailed illustration

Output

The 16 px icon is still produced, but fine details will be hard to recognise at that size.

Common mistakes

  • Using a wide logo without preparing a square version; contain fitting adds empty space but cannot invent detail.
  • Forgetting the 180 px Apple touch icon and the web app manifest icons.
  • Assuming every browser will use the ICO; modern browsers prefer the PNG or SVG links.

Frequently asked questions

Which sizes should I include?
At least 16, 32 and 180 px, plus 192 and 512 px for Android and web app manifests. A single 48 px ICO covers older shortcuts.
Can I use an SVG source?
Yes, if the browser can decode it. The SVG is rasterised through an image element; external resources inside it may not load.
Why does my icon look blurry at 16 px?
Small sizes cannot show fine detail. Use a simpler mark with strong contrast for the smallest sizes.
Where do I put the files?
Upload them to your site root and add link tags such as <link rel="icon" sizes="32x32" href="/favicon-32.png">.
All tools