Favicon Guide 2026: Alle Größen, Formate und Generierung

Favicons sind die kleinen Symbole, die in Browser-Tabs, Lesezeichen, Startbildschirmen und App-Umschaltern erscheinen. Trotz ihrer geringen Groesse haben sie einen grossen Einfluss auf Markenerkennung und Benutzererfahrung. Dieser vollstaendige Favicon-Leitfaden erklaert genau, was Sie 2026 brauchen, warum und wie Sie Favicons generieren.

Minimales Favicon-Setup: Nur 3 Dateien benoetigt

In 2026 benoetigen Sie nur drei Dateien, um alle modernen Browser, Geraete und Plattformen abzudecken:

Optional koennen Sie ein SVG-Favicon fuer unbegrenzte Skalierbarkeit und Dark-Mode-Unterstuetzung hinzufuegen. Aber diese drei Dateien allein bieten vollstaendige Abdeckung.

<!-- The minimal favicon setup for 2026 -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

Vollstaendige Favicon-Groessen-Referenz

Hier ist die definitive Referenztabelle fuer jede Favicon-Groesse, ihren Zweck und ihre Verwendung:

Die am haeufigsten angeforderten Groessen sind 32x32 (Browser-Tabs), 180x180 (Apple-Geraete) und 512x512 (PWA-Startbildschirme). Nur diese drei decken ueber 99% der Anwendungsfaelle ab.

Formatvergleich: ICO vs PNG vs SVG

Die Wahl des richtigen Favicon-Formats ist wichtig. Jedes Format hat unterschiedliche Vorteile und Kompromisse:

Empfehlung: Verwenden Sie ICO fuer den /favicon.ico-Fallback, PNG fuer Apple Touch Icon und Manifest-Icons, und optional SVG fuer moderne Browser.

Schritt fuer Schritt: Favicons Erstellen

Aus Figma

Programmatisch mit Sharp (Node.js)

Automatisieren Sie die Favicon-Generierung aus einem hochaufloesenden Quellbild mit der sharp-Bibliothek:

import sharp from 'sharp';

// Generate multiple sizes from a single source
const sizes = [16, 32, 48, 180, 192, 512];

async function generateFavicons(sourceFile: string) {
  for (const size of sizes) {
    await sharp(sourceFile)
      .resize(size, size, {
        fit: 'contain',
        background: { r: 0, g: 0, b: 0, alpha: 0 },
      })
      .png({ quality: 90, compressionLevel: 9 })
      .toFile(`favicon-${size}x${size}.png`);

    console.log(`Generated favicon-${size}x${size}.png`);
  }
}

generateFavicons('icon-source.png');

Fuer die ICO-Generierung verwenden Sie das png-to-ico-Paket:

import pngToIco from 'png-to-ico';
import { writeFileSync } from 'fs';

async function generateIco() {
  // Include 16x16, 32x32, and 48x48 in a single ICO file
  const icoBuffer = await pngToIco([
    'favicon-16x16.png',
    'favicon-32x32.png',
    'favicon-48x48.png',
  ]);
  writeFileSync('favicon.ico', icoBuffer);
  console.log('Generated favicon.ico');
}

generateIco();

Vollstaendiges Build-Skript

Hier ist ein vollstaendiges Node.js-Skript, das alle erforderlichen Favicon-Dateien aus einem einzelnen Quell-PNG generiert:

#!/usr/bin/env node
// generate-favicons.mjs
// Usage: node generate-favicons.mjs icon-source.png

import sharp from 'sharp';
import pngToIco from 'png-to-ico';
import { writeFileSync, mkdirSync } from 'fs';

const SOURCE = process.argv[2] || 'icon-source.png';
const OUT_DIR = './public';

mkdirSync(OUT_DIR, { recursive: true });

async function main() {
  // 1. Generate PNG sizes
  const pngSizes = [
    { size: 16, name: 'favicon-16x16.png' },
    { size: 32, name: 'favicon-32x32.png' },
    { size: 48, name: 'favicon-48x48.png' },
    { size: 180, name: 'apple-touch-icon.png' },
    { size: 192, name: 'icon-192x192.png' },
    { size: 512, name: 'icon-512x512.png' },
  ];

  for (const { size, name } of pngSizes) {
    await sharp(SOURCE)
      .resize(size, size, {
        fit: 'contain',
        background: { r: 0, g: 0, b: 0, alpha: 0 },
      })
      .png({ compressionLevel: 9 })
      .toFile(`${OUT_DIR}/${name}`);
    console.log(`  Created ${name}`);
  }

  // 2. Generate ICO (combines 16, 32, 48)
  const icoBuffer = await pngToIco([
    `${OUT_DIR}/favicon-16x16.png`,
    `${OUT_DIR}/favicon-32x32.png`,
    `${OUT_DIR}/favicon-48x48.png`,
  ]);
  writeFileSync(`${OUT_DIR}/favicon.ico`, icoBuffer);
  console.log('  Created favicon.ico');

  // 3. Generate manifest.webmanifest
  const manifest = {
    name: 'Your App Name',
    short_name: 'App',
    icons: [
      { src: '/icon-192x192.png', sizes: '192x192', type: 'image/png' },
      { src: '/icon-512x512.png', sizes: '512x512', type: 'image/png', purpose: 'any maskable' },
    ],
    theme_color: '#ffffff',
    background_color: '#ffffff',
    display: 'standalone',
  };
  writeFileSync(
    `${OUT_DIR}/manifest.webmanifest`,
    JSON.stringify(manifest, null, 2)
  );
  console.log('  Created manifest.webmanifest');

  console.log('\nDone! All favicon files generated.');
}

main().catch(console.error);

HTML-Markup: Exakte Link-Tags und Manifest

Fuegen Sie diese Tags in den <head> jeder Seite Ihrer Website ein:

<head>
  <!-- Favicon: ICO fallback for legacy browsers -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">

  <!-- Favicon: SVG for modern browsers (scalable + dark mode) -->
  <link rel="icon" href="/icon.svg" type="image/svg+xml">

  <!-- Apple Touch Icon: iOS home screen -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- Web App Manifest: Android + PWA -->
  <link rel="manifest" href="/manifest.webmanifest">

  <!-- Optional: theme color for browser chrome -->
  <meta name="theme-color" content="#ffffff"
        media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#1a1a2e"
        media="(prefers-color-scheme: dark)">
</head>

Erstellen Sie eine manifest.webmanifest in Ihrem Stammverzeichnis:

{
  "name": "Your Application Name",
  "short_name": "AppName",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/"
}

Die Manifest-Datei teilt Android- und PWA-Umgebungen mit, welche Icons verwendet werden sollen. Der Wert "purpose": "any maskable" stellt sicher, dass das Icon sowohl als regulaeres Icon als auch innerhalb der adaptiven Icon-Maske von Android funktioniert.

Dark-Mode-Favicons mit SVG

Eine der leistungsfaehigsten Funktionen von SVG-Favicons ist die Faehigkeit, sich ueber CSS prefers-color-scheme innerhalb des SVG an das Farbschema des Benutzers anzupassen:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
  <style>
    /* Light mode (default) */
    .icon-bg { fill: #1a1a2e; }
    .icon-fg { fill: #ffffff; }

    /* Dark mode override */
    @media (prefers-color-scheme: dark) {
      .icon-bg { fill: #e0e0e0; }
      .icon-fg { fill: #1a1a2e; }
    }
  </style>

  <!-- Background circle -->
  <circle class="icon-bg" cx="64" cy="64" r="60" />

  <!-- Foreground shape (your logo/icon) -->
  <path class="icon-fg"
        d="M44 40 h40 v12 H56 v8 h24 v12 H56 v16 H44 V40z" />
</svg>

Dieses SVG-Favicon wechselt automatisch zwischen dunkler und heller Version basierend auf den Systemeinstellungen. Kein JavaScript erforderlich. Funktioniert in Chrome, Firefox und Edge.

Reference this SVG in your HTML:

<!-- SVG favicon with automatic dark mode -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">

<!-- ICO fallback for browsers that don't support SVG favicons -->
<link rel="icon" href="/favicon.ico" sizes="32x32">

Favicons auf Allen Plattformen Testen

Testen Sie nach der Generierung Ihre Favicons auf allen Plattformen:

Quick checklist for verifying your favicon setup:

# Verify all favicon files exist and are accessible
curl -s -o /dev/null -w "%{http_code}" https://yoursite.com/favicon.ico
# Expected: 200

curl -s -o /dev/null -w "%{http_code}" https://yoursite.com/icon.svg
# Expected: 200

curl -s -o /dev/null -w "%{http_code}" https://yoursite.com/apple-touch-icon.png
# Expected: 200

curl -s -o /dev/null -w "%{http_code}" https://yoursite.com/manifest.webmanifest
# Expected: 200

# Validate manifest JSON
curl -s https://yoursite.com/manifest.webmanifest | python3 -m json.tool
# Should output formatted JSON without errors

Haeufig Gestellte Fragen

Wie viele Favicon-Dateien brauche ich mindestens?

Sie benoetigen mindestens drei Dateien: favicon.ico (32x32), apple-touch-icon.png (180x180) und ein 512x512 PNG in Ihrem manifest.webmanifest. Diese drei Dateien decken 2026 ueber 99% der Geraete ab.

Soll ich SVG oder PNG fuer mein Favicon verwenden?

Verwenden Sie beides. PNG ist erforderlich fuer Apple Touch Icons und Manifest-Icons. SVG ist hervorragend fuer Browser-Tabs, da es perfekt skaliert und Dark Mode ueber CSS unterstuetzt.

Beeinflusst die Favicon-Groesse die Ladegeschwindigkeit?

Favicon-Dateien sind normalerweise sehr klein (unter 15 KB) und werden aggressiv vom Browser gecacht. Der Einfluss auf die Ladegeschwindigkeit ist vernachlaessigbar.

Wie aendere ich mein Favicon im Dark Mode?

Verwenden Sie ein SVG-Favicon mit einem eingebetteten <style>-Block mit @media (prefers-color-scheme: dark)-Abfrage. Funktioniert in Chrome, Firefox und Edge.

Wozu dienen maskable Icons im Web-Manifest?

Maskable Icons sind fuer Androids adaptives Icon-System konzipiert, bei dem das OS das Icon in verschiedene Formen zuschneidet. Das maskable Icon enthaelt zusaetzlichen Abstand, damit wichtige Teile nicht abgeschnitten werden.

Brauche ich 2026 noch eine favicon.ico-Datei?

Ja. Obwohl moderne Browser PNG und SVG unterstuetzen, fordern viele Tools automatisch /favicon.ico an. Das Einbinden kostet fast nichts und vermeidet 404-Fehler.