DevignBee · Tools

One image, every size covered.

Upload a square image (ideally 512×512 or larger) and get every favicon size, plus the HTML to drop in your <head>.

Click to upload or drag an image here
PNG, JPG, or SVG — processed entirely in your browser
Preview background:

HTML to add


    

About this tool

A favicon is a small detail that has an outsized effect on how professional a site feels — browser tabs, bookmarks, and phone home screens all rely on it. The tricky part isn't designing the icon, it's producing the half-dozen different pixel sizes different platforms expect and wiring up the right HTML tags for each.

This tool handles that conversion work: upload one square image, and it generates every size from a 16×16 browser tab icon up to a 512×512 PWA splash icon, cropped and scaled consistently.

How to use it

  1. Upload a square image, ideally at least 512×512px with a simple, bold design.
  2. Preview how each size looks against a light or dark background using the toggle.
  3. Download individual sizes, or grab all of them at once as a ZIP.
  4. Copy the generated tags into your page's .

Why use this one

Six sizes, one upload

From a 16×16 browser tab icon to a 512×512 PWA splash icon, generated together.

Background preview toggle

Check how the icon reads against both light and dark browser themes before downloading.

Bulk ZIP download

Get every size in one file instead of downloading them one at a time.

Ready-to-paste HTML

The exact tags for every size, matched to the correct filenames.

Frequently asked questions

What image should I upload for the best results?

Use a square image at least 512×512 pixels with a simple, bold design — favicons are viewed at tiny sizes, so fine detail and small text usually disappear.

Do I need all six sizes?

At minimum, add the 32×32 favicon and the 180×180 Apple touch icon — these cover most browsers and iOS home screens. The 192×192 and 512×512 sizes matter if your site can be installed as a PWA.

Where do I upload the generated files?

Place them in your website's root folder (or wherever your favicon files currently live) and paste the generated <link> tags into your page's <head>.

Why does my favicon look blurry in the browser tab?

This usually happens when a low-resolution image is scaled up. Start with an image at least 512×512px, and keep the design simple — fine detail and small text disappear at 16×16px regardless of source quality.

Do I need a .ico file, or are PNGs enough?

Modern browsers (Chrome, Firefox, Edge, Safari) all support PNG favicons, so the .ico format is no longer strictly required. It's kept around mainly for very old browser compatibility and some Windows shortcut behavior.