Favicon Generator — ICO, PNG & Web Manifest

Upload any image and generate a complete favicon package — ICO, PNG for all platforms, iOS touch icon, Android chrome icons, Windows tile, web manifest, and browser config.

Drop your image here or click to browse

PNG, SVG, JPG, WEBP · 512×512 px or larger recommended

What's included in the package?

favicon.ico — Legacy multi-size ICO (16×16, 32×32, 48×48) for old browsers and Windows.
favicon-96x96.png — 96×96 PNG for modern browsers. Referenced directly in <head>.
favicon.svg — SVG favicon included when your source image is an SVG. Scales perfectly and supports dark-mode variants via CSS prefers-color-scheme.
apple-touch-icon.png — 180×180 icon used when adding your site to an iOS home screen.
android-chrome-192x192.png and android-chrome-512x512.png — Icons for Android Chrome and PWA splash screens.
favicon-16x16.png and favicon-32x32.png — Legacy PNG sizes kept for backward compatibility.
mstile-150x150.png — Windows tile image; the icon is centered at 60% size.
site.webmanifest — Web App Manifest JSON with your app name, theme color, and Android icons.
browserconfig.xml — Windows/IE browser config for the pinned site tile.

HTML <head> Code

1
Extract the downloaded ZIP to your website's root — the folder that contains your index.html.
2
Paste the generated HTML snippet into the of every page, or into your shared HTML template/partial.
3
Verify the setup: open your browser's DevTools → Network tab, reload the page, and confirm favicon.ico loads from the root.

1
Place all files in your public/ directory. Next.js serves everything in public/ at the root path.

App Router — add a metadata export in app/layout.tsx:

import type { Metadata } from 'next';

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: '/favicon-96x96.png', sizes: '96x96', type: 'image/png' },
      { url: '/favicon.svg', type: 'image/svg+xml' },
      { url: '/favicon.ico' },
    ],
    apple: '/apple-touch-icon.png',
  },
  manifest: '/site.webmanifest',
};

3
Pages Router — paste the HTML snippet into pages/_document.tsx inside (from next/document), or into your shared layout component.

Next.js App Router also supports special filenames: dropping favicon.ico directly in app/ makes it auto-detected. The metadata API approach above gives more control and works for all icon types.

1
Extract the ZIP into your project's public/ directory. Nuxt serves everything in public/ at the root URL.

Add the icons to your app.vue or a global layout using useHead():

// app.vue or layouts/default.vue
useHead({
  link: [
    { rel: 'icon', type: 'image/png', href: '/favicon-96x96.png', sizes: '96x96' },
    { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
    { rel: 'shortcut icon', href: '/favicon.ico' },
    { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
    { rel: 'manifest', href: '/site.webmanifest' },
  ],
})

Alternatively, configure icons via nuxt.config.ts using app.head:

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'icon', type: 'image/png', href: '/favicon-96x96.png', sizes: '96x96' },
        { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
        { rel: 'shortcut icon', href: '/favicon.ico' },
        { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
        { rel: 'manifest', href: '/site.webmanifest' },
      ],
    },
  },
})

The nuxt.config.ts approach applies site-wide automatically. Use useHead() when you need per-page or per-layout overrides.

1
Place all favicon files in your static assets directory (commonly public/).

Make sure static file serving is enabled in Express:

app.use(express.static(path.join(__dirname, 'public')));

3
Paste the HTML snippet into your HTML template (e.g. views/layout.ejs, views/layout.pug, or whichever templating engine you use) inside .

Tips for best results

Use a square SVG for the best result — SVG favicons scale perfectly and support dark mode via prefers-color-scheme.
If using a raster image, use at least 512×512 px so downscaled sizes stay sharp.
A transparent background works best. iOS fills transparent regions with black — use the "Add background + margins" option to avoid this.
Pick a theme color that matches your brand — it tints the browser chrome on Android and sets the PWA splash background.