One image. Every screen.

PNG to ICO Converter

Small icons. A lasting impression.

Convert a PNG into a multi-size ICO. Preserve transparency, check small previews and download the actual icon files locally.

PNG ICO PWA

Create your icon pack

Turn your image into favicons, app icons and more.

1Upload
2Adjust
3Download

Waiting for an image

Drop your image here

PNG · Up to 5 MB

Your image is processed in your browser. It never leaves your device.

16 × 16

32 × 32

48 × 48

180 × 180

192 × 192

512 × 512

Adjust your icon

Fine-tune the look for every screen.

Image fit

Background

Transparent

Solid

#FFFFFF

Padding6%

Corner radius0%

ICO sizes (select multiples)

256

Maskable icons

See it in context(upload to preview your icon)

Browser tab

https://example.com

iOS home screen

Your icon here

PWA / Android

Your icon here

How to make a favicon in 3 steps

From one image to a complete set of icons.

1Upload your image

Convert a PNG into a multi-size ICO. Preserve transparency, check small previews and download the actual icon files locally.

2Adjust and preview

Choose the fit, background and padding. Check the result at small sizes.

3Download and add to your site

Export your icon pack, upload the files, and add the icon links to your HTML.

One logo, ready for every screen

See where the generated files are used.

Website favicon

My Site×

16 × 16

32 × 32

16 × 16 and 32 × 32 icons help visitors recognize your site in tabs and bookmarks.

iPhone & iPad

My Site

180 × 180

Use a 180 × 180 apple-touch icon when your site is added to the home screen.

PWA & Android

Install app

192 × 192

512 × 512

192 × 192 and 512 × 512 images are common sizes used by web app manifests.

What’s in your icon pack?

A ready-to-use set of icons for all platforms.

favicon.ico16 × 16, 32 × 32, 48 × 48, 256 × 256
apple-touch-icon.png180 × 180
icon-192.png192 × 192
icon-512.png512 × 512
site.webmanifestWeb app manifest

Add icons to your website

Place these links in your HTML <head>.

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Unzip the icon pack into public/ at the root of your Nuxt project. Keep the filenames and place site.webmanifest beside favicon.ico, not inside app/.
Add this code inside the script setup block in app/app.vue. Replace existing icon links that point to older files, then rebuild and publish your project.

useHead({
  "link": [
    {
      "rel": "icon",
      "type": "image/x-icon",
      "href": "/favicon.ico"
    },
    {
      "rel": "apple-touch-icon",
      "sizes": "180x180",
      "href": "/apple-touch-icon.png"
    },
    {
      "rel": "manifest",
      "href": "/site.webmanifest"
    }
  ]
})

Open /favicon.ico, /apple-touch-icon.png and /site.webmanifest on your own site. Check successful responses and actual image or JSON content; a 200 response containing an HTML error page is still a wrong path. Check every icon URL inside the manifest too.

If an old icon remains, check the page head for duplicate links, disable cache in browser developer tools and reload. Review CDN and service worker caches if used. Compare the actual 16 and 32 pixel previews: simplify tiny text and thin lines instead of relying on the large preview.

These files provide icons and manifest metadata. They do not by themselves make a website an installable PWA. This recipe assumes deployment at the domain root; adjust every link and manifest icon path for a subdirectory.

Nuxt 4 · public/ · Nuxt 4 · useHead