So funktioniert’s
- 1.Zieh dein Logo auf die Seite, füge es ein oder klicke auf „Bild auswählen“. Ein quadratisches PNG oder SVG mit mindestens 512 × 512 Pixeln liefert das beste Ergebnis.
- 2.Passe den Innenabstand an und wähle eine Hintergrundfarbe und abgerundete Ecken, wenn dein Logo eine feste Fläche dahinter braucht.
- 3.Prüfe die Vorschau: Die Browser-Tabs zeigen, wie das Icon bei 16 Pixeln im hellen und im dunklen Design aussieht.
- 4.Klicke auf „favicon.zip herunterladen“, lade die Dateien ins Hauptverzeichnis deiner Website hoch und füge den HTML-Code in den head-Bereich deiner Seiten ein.
Welche Favicon-Dateien eine Website braucht
Ein kleines Set deckt heute jeden Browser und jedes Gerät ab. favicon.ico ist die klassische Datei, die Browser, Feedreader und andere Tools unter /favicon.ico abrufen, selbst wenn eine Seite sie nicht erwähnt; sie enthält Versionen mit 16, 32 und 48 Pixeln. Moderne Browser bevorzugen ein SVG-Icon (icon.svg), das in jeder Größe scharf bleibt und mit einer prefers-color-scheme-Media-Query im SVG im Dark Mode sogar die Farben wechseln kann.
apple-touch-icon.png (180 × 180) verwenden iPhones und iPads, wenn jemand deine Website zum Home-Bildschirm hinzufügt. Android und installierte Web-Apps nehmen die PNGs mit 192 und 512 Pixeln, die in site.webmanifest aufgeführt sind. Ältere Anleitungen nennen Dutzende Größen; für alles andere skalieren Browser diese wenigen Dateien.
Wohin die Dateien gehören
Lade die Dateien ins Hauptverzeichnis deiner Website hoch, sodass sie unter Adressen wie https://example.com/favicon.ico erreichbar sind, und füge die HTML-Zeilen in den <head> jeder Seite ein. Ersetze den Namen in site.webmanifest durch den Namen deiner Website.
Frameworks haben oft ihren eigenen Weg. Im Next.js App Router legst du favicon.ico, icon.svg (oder icon.png) und apple-icon.png in den Ordner app, und die Tags werden automatisch ergänzt. In WordPress lädst du unter Design → Customizer → Website-Informationen → Website-Icon ein quadratisches Bild hoch. Baukästen wie Shopify, Wix und Squarespace haben in den Website-Einstellungen ein eigenes Feld für das Favicon.
Ein Icon gestalten, das bei 16 Pixeln funktioniert
Ein Browser-Tab zeigt dein Icon mit 16 × 16 Pixeln (32 auf hochauflösenden Bildschirmen). Feine Schrift, dünne Linien und detailreiche Logos verschwimmen in dieser Größe. Nimm ein einfaches Symbol, den Anfangsbuchstaben deines Namens oder einen markanten Teil deines Logos, mit starkem Kontrast.
Prüfe beide Tab-Vorschauen: Ein dunkles Logo auf transparentem Hintergrund kann im dunklen Browser-Design verschwinden. Gib dem Icon in diesem Fall eine Hintergrundfarbe oder dem Logo eine helle Kontur.
Häufige Fragen
Wird mein Logo irgendwo hochgeladen?
Nein. Die Icons werden von deinem Browser auf deinem Gerät gezeichnet und in die ZIP-Datei gepackt. Nichts wird an nestoo oder sonst jemanden gesendet.
Wie groß sollte ein Favicon sein?
Browser-Tabs verwenden 16 × 16 und 32 × 32 Pixel, genau das enthält favicon.ico (dazu 48 × 48 für Windows-Verknüpfungen). Smartphones und Web-Apps brauchen größere Icons: 180 × 180 für das Apple Touch Icon sowie 192 × 192 und 512 × 512 für Android. Starte mit einem Bild von mindestens 512 × 512 Pixeln oder einem SVG.
Warum wird mein neues Favicon nicht angezeigt?
Browser speichern Favicons lange im Cache, manchmal sogar über ein erzwungenes Neuladen hinaus. Öffne die Icon-Datei direkt (/favicon.ico) und lade sie neu, probiere ein privates Fenster oder hänge in deinem HTML eine Version an die Links, etwa href="/favicon.ico?v=2", damit Browser die neue Datei abrufen.
Soll ich ICO oder PNG verwenden?
Beides. Lass favicon.ico im Hauptverzeichnis, weil manche Browser und Tools nur nach dieser Datei suchen. Moderne Browser verwenden die PNG- oder SVG-Icons aus deinem HTML. Die hier erstellte ICO-Datei enthält PNG-Bilder, was sie klein hält.
Kann ich ein Favicon aus einem Emoji oder Text erstellen?
Nicht direkt mit diesem Tool, aber mit SVG ist es einfach: Speichere <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">🦊</text></svg> als icon.svg und zieh die Datei hierher. Emojis sehen auf jedem Betriebssystem anders aus, deshalb zeigen die erzeugten PNG- und ICO-Dateien das Emoji so, wie dein Computer es darstellt.