Image tools

Favicon Generator

Create a complete favicon package from an image, text or emoji. Preview every size and keep your files on this device.

Icon editor

Icon source
Drop an image here or choose a filePNG, JPG/JPEG, WebP or safe SVG · one image · processed locally

Background

Device previews

Adds safe padding for round and rounded masks.

Live preview

Position · Safe area guide

16×16 favicon previewExample site · Light tab
32×32 favicon previewExample site · Dark tab

Browser tab preview

180×180 Apple Touch Icon preview
Apple Touch Icon
192×192 Android icon preview
Android / PWA
Round mask preview
Round mask
Rounded mask preview
Rounded mask

Apple Touch Icons often look more consistent with an opaque background; transparent output is still allowed.

Device previews

16×16 favicon preview
16×16 browser16×16
32×32 favicon preview
32×32 browser32×32
48×48 favicon preview
48×48 browser48×48
180×180 favicon preview
180×180 Apple180×180
192×192 favicon preview
192×192 Android192×192
512×512 favicon preview
512×512 Android512×512

Website manifest

Processed locally in your browser. Your content never leaves this device.

How to use

  1. Choose an image, text or emoji source.
  2. Adjust fit, position, scale, background, padding and corners while previewing the result.
  3. Generate the package, then download individual files, copy the HTML or download the ZIP.

Great for

  • Website browser tabs
  • Apple Touch Icons
  • Android and installable PWA icons

How to create a favicon

Choose an image, a short text mark or an emoji, then keep the important detail inside the safe area. Preview the small browser sizes before generating the package so the icon remains recognizable at 16 pixels.

What favicon sizes are needed?

Most sites use 16×16 and 32×32 PNG icons, while 48×48 is a useful desktop fallback. Apple Touch Icons use 180×180, and installable PWAs commonly use 192×192 and 512×512.

How to convert PNG to ICO

Generate the favicon package, then use the real favicon.ico supplied by BrightTools. It is an ICO container with separate transparent PNG images for 16×16, 32×32 and 48×48, rather than a PNG renamed with an ICO extension.

What is favicon.ico?

favicon.ico is a compatibility icon file that can contain several resolutions. Browsers can select the closest entry for a tab, bookmark or legacy integration.

How to add a favicon to a website

Upload the generated files to the website root and paste the HTML snippet into the document <head>. Add the manifest link when you want Android or PWA installation metadata.

What is an Apple Touch Icon?

An Apple Touch Icon is the 180×180 PNG shown when a visitor saves a site to an iPhone or iPad home screen. A solid background is often more predictable, though transparent output remains available.

What are PWA and maskable icons?

PWA icons are declared in a web manifest. A maskable icon keeps its important content inside a central safe area so the operating system can apply a circle or rounded mask without cutting it off.

Are uploaded images sent to a server?

No. The image is decoded and rendered with browser APIs. The source image, text, emoji, generated blobs and manifest stay on this device.

Good to know

Rendering uses your browser Canvas and installed fonts. Emoji artwork can differ slightly between operating systems, and very old browsers may not support every image codec.

Frequently asked questions

What size should a favicon be?

The package includes 16, 32 and 48 pixel browser icons, a 180 pixel Apple Touch Icon, and 192 and 512 pixel Android/PWA icons.

Do I still need favicon.ico?

It is still a useful compatibility fallback. This tool creates a real ICO container with 16×16, 32×32 and 48×48 PNG images.

Can I create a favicon from a PNG?

Yes. PNG, JPEG, WebP and safe SVG images can be loaded locally and rendered to every output size.

Can I use an emoji as a favicon?

Yes. Enter one emoji grapheme, including joined or skin-tone emoji. The current browser rendering is rasterized into PNG pixels.

What files are included in the ZIP?

The ZIP contains all six PNG sizes, favicon.ico, site.webmanifest and bilingual installation instructions. Your source image is never included.

How do I install the favicon on my website?

Upload the files to your website root and paste the generated link tags inside your HTML head.

Are my images uploaded?

No. Files, text and emoji are decoded and rendered entirely in your browser and are not sent to a server.

Why does my favicon look blurry?

Use a simple high-contrast source, keep important details inside the safe area, and start with an image at least 512×512 pixels.

You may also like