Skip to content
Plaintools

Favicon generator

Select or drop any image file to generate multi-resolution favicon.ico containers, standard PNG icons (16×16, 32×32, 48×48), Apple Touch icons (180×180), Android Chrome icons (192×192, 512×512), and web manifest files. All rendering and ZIP packaging happen client-side in Canvas and memory.

Runs 100% locally in this tab · Files are never uploaded

Ready to download

Current source: logo.png

Browser Tab Preview

My Site — Home×

iOS Home Screen Preview

My Site

apple-touch-icon.png (180×180)

Displays on iPhone & iPad homescreens

Generated Icon Formats (1 files)

PNG & multi-res ICO

favicon.ico

Multi-resolution container (16×16, 32×32, 48×48 PNGs)

<!-- Favicon and App Icons -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

Copy these tags into your HTML page's <head> tag.

{
  "name": "My Site",
  "short_name": "My Site",
  "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"
}

Example

Brand logo to full icon package

Upload a 512×512 PNG emblem. The generator produces a multi-size favicon.ico, individual PNGs for all standard devices, a site.webmanifest file, and HTML head tags with one-click ZIP download.

Related: UTM generator, Slug generator, Open Graph generator

FAQ

Are my uploaded logo files sent to a server?
No. Images are read directly in the browser using the HTML5 File and Canvas APIs. No bytes leave your machine, and nothing is uploaded or stored on any server.
Why does a website still need a favicon.ico file?
While modern browsers support PNG favicons, browsers, feed readers, and search engine crawlers still request /favicon.ico at the domain root by default. Providing a multi-resolution favicon.ico (16×16, 32×32, 48×48) prevents 404 errors in server logs and guarantees crisp display across legacy and modern platforms.
What favicon sizes are included in the downloadable ZIP pack?
The generated ZIP package contains favicon.ico (embedding 16×16, 32×32, and 48×48), favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest, and a README.txt.
How do I install the generated favicons on my website?
Place all generated icon files in your website's root public directory (e.g. /public or /htdocs) and add the provided <link rel="icon">, <link rel="apple-touch-icon">, and <link rel="manifest"> tags into the <head> of your HTML template.
How do I generate favicon link tags without this page?
In the <head> tag of your HTML pages, add: <link rel="icon" type="image/x-icon" href="/favicon.ico">, <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">, <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">, <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">, and <link rel="manifest" href="/site.webmanifest">.