Icon Editing

HomeIcon EditorFootball Team Logos

Favicon And App Icon Generator

Upload an image (PNG, JPG, GIF) and generate a complete set of icons for your website: favicon.ico (multi‑size), Android Chrome icons (192×192, 512×512), Apple Touch Icon (180×180), and standard favicon PNGs (16×16, 32×32). All files are packed into a ZIP archive. 100% client‑side – your image never leaves your device.

1. Upload

Choose any PNG, JPG, or GIF image.

2. Generate

Click "Generate Icons" – we create all sizes.

3. Download

Click the "Download Icons (ZIP)" button to save the ZIP file.

100% client‑side

No uploads, no server, your image stays private.

Choose Image
Included icons: favicon.ico (16,32,48), favicon-16x16.png, favicon-32x32.png, android-chrome-192x192.png, android-chrome-512x512.png, apple-touch-icon.png (180×180). All are cropped to a centered square.

Installation Instructions

After downloading the ZIP file, extract its contents and follow the steps below to add the icons to your website.

1. Place the files in your website's root directory

The following files are included in the ZIP:

  • android-chrome-192x192.png
  • android-chrome-512x512.png
  • apple-touch-icon.png
  • favicon-16x16.png
  • favicon-32x32.png
  • favicon.ico

Note : A site.webmanifest file is not automatically generated, but you can create one manually (see example below).

2. Add the following HTML tags inside the <head> of your website

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">

3. (Optional) Create a site.webmanifest file

If you want to use a web app manifest, create a file named site.webmanifest in your root directory with content similar to this:

{
    "name": "Your App Name",
    "short_name": "App",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

4. Verify your icons

Once the files are in place and the HTML is updated, clear your browser cache and reload your site. You can use online favicon checkers to confirm that all icons are loading correctly.

Online icon design tools