Zero Uploads · Complete Privacy

Favicon Generator

Generate standard web favicons, genuine multi-resolution favicon.ico, site.webmanifest, live mockups, and placement guides for all major frameworks.

Select or Drag & Drop Square Image / LogoGenerates genuine favicon.ico, 6 PNG resolutions, site.webmanifest, and platform placement guides.

Live Browser Tab Mockup

My Awesome Website

Mobile Home Screen App Icon

My App

Exportable Icons & Formats:

favicon.icoMulti (16, 32, 48px)

16 × 16 pxfavicon-16x16.png

32 × 32 pxfavicon-32x32.png

48 × 48 pxfavicon-48x48.png

180 × 180 pxapple-touch-icon.png

192 × 192 pxandroid-chrome-192x192.png

512 × 512 pxandroid-chrome-512x512.png

Framework Code & Placement Guides

Select your tech stack for exact placement and embed code

Target File Placement:web-root/ (public_html or root /)

Place favicon.ico, all PNGs, and site.webmanifest in your website root folder.

Implementation Code:

<!-- Standard Favicon & Touch Icons -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Web Manifest & Theme Color -->
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

site.webmanifest (PWA & Android Web App Manifest)

{
  "name": "My Awesome Website",
  "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"
}