Favicon-Generator

Laden Sie ein beliebiges Bild hoch und erstellen Sie ein vollständiges Favicon-Paket — ICO, PNG für alle Plattformen, iOS-Touch-Icon, Android-Chrome-Icons, Windows-Kachel, Web-Manifest und Browser-Konfiguration.

Bild hier ablegen oder klicken zum Durchsuchen

PNG, SVG, JPG, WEBP · 512×512 px oder größer empfohlen

Was ist im Paket enthalten?

favicon.ico — Legacy-Mehrgröße-ICO (16×16, 32×32, 48×48) für alte Browser und Windows.
favicon-96x96.png — 96×96 PNG für moderne Browser. Direkt im <head> referenziert.
favicon.svg — SVG-Favicon, wenn das Quellbild ein SVG ist. Perfekt skalierbar mit Unterstützung für Dark-Mode.
apple-touch-icon.png — 180×180-Icon für das Hinzufügen zur iOS-Startseite.
android-chrome-192x192.png und android-chrome-512x512.png — Icons für Android Chrome und PWA.
favicon-16x16.png und favicon-32x32.png — Legacy-PNG-Größen für Abwärtskompatibilität.
mstile-150x150.png — Windows-Kachelbild; das Icon wird bei 60 % Größe zentriert.
site.webmanifest — Web-App-Manifest JSON mit App-Name, Themenfarbe und Android-Icons.
browserconfig.xml — Windows/IE-Browser-Konfiguration für die angeheftete Site-Kachel.

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 .

Tipps für beste Ergebnisse

Verwende ein quadratisches SVG für das beste Ergebnis — SVG-Favicons skalieren perfekt und unterstützen Dark-Mode.
Bei Rastergrafiken mindestens 512×512 px verwenden, damit verkleinerte Größen scharf bleiben.
Ein transparenter Hintergrund funktioniert am besten. iOS füllt transparente Bereiche mit Schwarz — die Option "Hintergrund + Ränder hinzufügen" verwenden.
Eine Themenfarbe wählen, die zur Marke passt — sie färbt die Browser-Chrome auf Android und setzt den PWA-Splash-Hintergrund.