Skip to main content
PNGful

Generate a complete favicon package from one image

Drop in one square image and download everything a modern site needs: favicon.ico, PNG favicons, Apple touch icon, PWA icons, a maskable variant, plus the manifest and HTML tags to paste in — generated entirely in your browser.

0%
Background

Use a square image (SVG or ≥512 px PNG) for the sharpest results. The maskable icon automatically gets extra safe-zone padding.

or drag & drop an image here, or paste from your clipboard

PNG, SVG, WebP or JPG — square images work best.

Your images are processed on your device and are not uploaded to PNGful.

How it works

  1. 1

    Add one square image

    A 512 × 512 px or larger PNG or SVG of your logo or mark works best. The tool handles every size from this single source.

  2. 2

    Adjust padding and background

    Add breathing room around the mark and pick a background color — or keep transparency. The maskable icon gets safe-zone padding automatically.

  3. 3

    Check the previews

    See your icon in a browser tab and on a phone home screen, in both light and dark modes, before committing.

  4. 4

    Download the ZIP

    One ZIP contains every file plus a manifest example, the HTML tags, and a Next.js metadata snippet ready to paste into your project.

Common uses

  • Launching a new website or product with correct icons everywhere
  • Adding PWA install icons to an existing web app
  • Fixing a favicon that looks blurry or wrong in browser tabs
  • Making a dark logo visible against dark browser themes
  • Replacing an outdated favicon.ico with a full modern set
  • Generating icons for a client site without installing anything

What's in the package

The ZIP contains favicon.ico with 16, 32 and 48 px versions embedded (as PNG-compressed entries), standalone PNG favicons for browsers that prefer them, a 180 px apple-touch-icon for iOS home screens, and 192 px and 512 px PWA icons referenced from a web app manifest.

It also includes a 512 px maskable icon with safe-zone padding. Android devices crop maskable icons into shapes like circles and squircles, so the important artwork must sit inside the central safe zone — the tool applies that padding for you so nothing gets clipped.

Alongside the images you get a manifest.webmanifest example, the exact <link> tags for a plain HTML site, and a metadata snippet for Next.js App Router projects, so wiring everything up is a copy-paste job rather than a documentation hunt.

Previews in light and dark

A favicon that looks crisp on a white tab bar can vanish against a dark theme, and vice versa. The tab and home-screen previews render your icon in both modes so you catch contrast problems before shipping.

If your mark disappears in one mode, add a background color or padding rather than redrawing the logo — a subtle background disc is the standard fix and the controls here make it a one-click experiment.

Good to know

  • Non-square source images are center-cropped to a square; for precise control, crop the image to a square first.
  • Small sources upscale poorly — a 512 px or larger original keeps the 512 px PWA icon sharp. Icons render fine at small sizes either way.
  • The generated .ico embeds PNG-compressed images, which every modern browser and Windows version reads; extremely old software expecting uncompressed BMP entries may not.
  • Highly detailed logos become unreadable at 16 px — simplifying the mark matters more than any generator setting.

Your images stay private

Your images are processed on your device and are not uploaded to PNGful.All processing happens locally using your browser's own image engine — there is no upload step, no server-side queue, and nothing to delete afterwards. Read more in our privacy policy.

Frequently asked questions

Is favicon.ico still needed?

Yes. Browsers and crawlers still request /favicon.ico directly as a fallback — for the address bar, bookmarks, and contexts where your HTML tags aren't parsed. Modern PNG and SVG favicons take priority when declared, but shipping the .ico costs nothing and covers the legacy paths.

What is a maskable icon?

A PWA icon designed to survive being cropped into different shapes. Android launchers cut icons into circles, squircles or rounded squares, keeping only a central safe zone. A maskable icon fills the whole canvas with background and keeps the artwork inside that safe zone, which the tool's automatic padding handles for you.

Should I use an SVG favicon instead?

SVG favicons are great where supported — one crisp file at any size, with the ability to adapt to dark mode via embedded CSS. But support isn't universal (notably Safari), and PWA manifest icons still require PNG. The practical answer is both: an SVG plus this PNG/ICO package as the baseline.

Why do you recommend a 512 px source image?

Because 512 × 512 is the largest icon in the package (the PWA and maskable icons), and downscaling from 512 keeps every smaller size sharp. A smaller source has to be upscaled to reach 512 px, which introduces blur exactly where install screens show your icon largest.

Does my logo get uploaded to generate the icons?

No. Resizing, ICO packing, ZIP assembly and previews all run in your browser. Your artwork never leaves your device.

Was this tool helpful?