Favicon erstellen und in deine Website einbinden

Wähle den Weg für deine Website: In WordPress lädst du ein quadratisches Bild über die Website-Icon-Einstellung hoch; andere Baukästen haben meist ein eigenes Feld für das Website-Symbol. Bearbeitest du HTML selbst, erstelle die Symboldateien und folge der HTML-Anleitung. ZIP und Manifest kannst du überspringen, wenn dein Editor die Symbole erstellt.

Was ist ein Favicon, und wo erscheint es?

Ein Favicon kennzeichnet deine Website im Browser-Tab oder Lesezeichen. Eine größere Variante kann auf dem Smartphone-Startbildschirm erscheinen. Ein Motiv braucht deshalb oft mehrere Größen.

Bei zwölf geöffneten Tabs passt der vollständige Firmenname möglicherweise nicht mehr hinein. Ein markantes Symbol hilft trotzdem beim Wiederfinden. Gestalte es für diesen kleinen Platz.

Favicon, Logo im Seitenkopf und Vorschaubild beim Teilen sind verschiedene Bilder. Das Ändern eines Bildes ersetzt die anderen nicht automatisch. Ein breites Logo kann als winziges Quadrat unleserlich werden.

Wähle zuerst, wie du das Favicon einbauen möchtest. Dann bereitest du nur die Dateien vor, die deine Website wirklich braucht, statt das gesamte Paket als Pflicht anzusehen.

Hat dein Website-Baukasten eine eigene Einstellung für das Website-Icon, beginne dort. Die HTML-Anleitung ist für Websites gedacht, bei denen du den gemeinsamen head-Bereich bearbeiten kannst. Die Tags in einen sichtbaren Inhaltsblock einzufügen ist keine gleichwertige Installation.

Wähle ein Motiv, das bei 16 Pixeln funktioniert

Nutze den erkennbarsten Teil deiner Marke statt des vollständigen Logos. Ein kräftiger Anfangsbuchstabe, ein einfaches Symbol oder die Hauptform eines Maskottchens funktionieren oft besser als der ganze Name mit Slogan. Entferne Details, die nur in großer Darstellung verständlich sind.

Stell dir ein Bäckereilogo mit Brot, Ähren und „Bäckerei am Fluss“ vor. Für das Favicon reichen vielleicht die Brotsilhouette und ein markanter Einschnitt. Alles zusammen würde zu winzigen Flecken.

Prüfe die tatsächliche Größe. Ein großes 512-Pixel-Bild zeigt nicht, ob schmale Zwischenräume bei 16 Pixeln bleiben. Erkennst du die Hauptform ohne Vergrößerung in ein bis zwei Sekunden?

• Eine Hauptidee. Vermeide mehrere konkurrierende Motive im Quadrat.
• Klare Kanten. Dünne Linien und kleine Aussparungen können beim Verkleinern verschwinden.
• Sorge für genügend Kontrast. Ein helles Symbol auf transparentem Hintergrund kann in einer hellen Browseroberfläche kaum sichtbar sein.
• Text bewusst einsetzen. Ein kräftiger Buchstabe funktioniert eher als der ganze Firmenname.
• Prüfe die Silhouette. Vereinfache das Motiv, wenn es ohne seine kleinen Details nicht mehr erkennbar ist.

Eine eigene kleine Variante ist sinnvoll. Sie muss keine Miniatur des vollständigen Logos sein. Präzise 16-Pixel-Formen kannst du separat zeichnen; der Generator verkleinert, entscheidet aber nicht über entbehrliche Markendetails.

Das Ausgangsbild ohne Detailverlust vorbereiten

Exportiere möglichst aus dem Original. Ein quadratisches PNG mit mindestens 512 × 512 Pixeln deckt das größte erzeugte Symbol ab. Das bedeutet nicht, dass Browser-Tabs es so groß anzeigen.

Exportiere ein Vektorlogo im Grafikprogramm als quadratisches PNG. Pixilo akzeptiert JPG, PNG und WebP, nicht SVG. Bewahre die Vektordatei für spätere Änderungen auf.

Ein unscharfes Symbol von 32 auf 512 Pixel zu vergrößern bringt keine Details zurück. Nutze das beste Original, das du hast, oder zeichne eine einfachere Variante. Der Generator warnt, wenn eine Bildseite kürzer als 512 Pixel ist, weil die größeren Ausgaben dann hochskaliert werden müssen.

Wähle zuerst eine passende quadratische Komposition und denke danach an die Dateigröße. Einpassen erhält ein rechteckiges Bild ohne Verzerrung, kann aber viel Leerraum lassen. Der mittige Zuschnitt entfernt Bildteile. Keine der beiden Optionen macht ein breites Schriftlogo automatisch zu einem guten Favicon.

Liegt das Motiv am Rand, bereite den Ausschnitt im Bildzuschnitt-Werkzeug vor. Der Favicon-Generator schneidet mittig zu und verschiebt den Ausschnitt nicht zu einem seitlichen Gesicht oder Symbol.

Probiere PNG für Transparenz und scharfe Grafiken. Prüfe bei JPG unscharfe Kanten und Flecken am Symbol. Ein anderes Format repariert verlorene Details nicht. Der JPG-PNG-Vergleich hilft bei der Auswahl.

Favicon-Größen und Formate: Welche Dateien brauchst du?

Du brauchst nicht für jede mögliche Gerätegröße einen eigenen Upload. Beginne mit den Anforderungen deiner Website. Eine HTML-Website kann wenige verlinkte Icons nutzen; ein Content-Management-System erstellt möglicherweise eigene Varianten aus einem einzigen Bild.

ICO kann mehrere Bilder enthalten. Pixilo erzeugt eine echte ICO mit 16, 32 und 48 Pixeln. PNG in .ico umzubenennen erzeugt diese Struktur nicht. Ein PNG enthält ein einzeln prüfbares Bild.

Das 180-Pixel-Apple-Symbol hat eine andere Aufgabe als das Browser-Favicon. Apples Web-App-Dokumentation beschreibt den Link apple-touch-icon für den Startbildschirm. Ein winziges Browserbild ist dafür kein guter Ausgangspunkt.

Die ZIP enthält neun Dateien. Die separaten 32- und 48-Pixel-PNGs sind für Felder gedacht, die diese Größen verlangen; zusätzlich zu ICO und 96-Pixel-PNG müssen sie nicht verlinkt werden. Die Anleitung ist für dich, nicht zur Veröffentlichung nötig.

Transparenz und Abstand bewusst wählen

Transparente Icons liegen auf dem Hintergrund der Oberfläche. Prüfe dunkle Motive auf dunklem, helle auf hellem Grund. Nutze bei schlechter Erkennbarkeit eine kontrastierende Kontur oder einen festen Hintergrund.

Bei Pixilo gilt die Transparenz für die ICO-Datei und die PNGs mit 32, 48 und 96 Pixeln. Das Apple-Icon sowie die Bilder mit 192 und 512 Pixeln verwenden immer die gewählte einfarbige Hintergrundfarbe. Diese beeinflusst die größeren Symbole auch dann, wenn die Browser-Icons transparent bleiben.

Transparenz entfernt keinen vorhandenen Hintergrund. Weiße Pixel um dein Logo bleiben weiß. Beginne mit tatsächlich transparentem Ausgangsmaterial, wenn die Umgebung durchsichtig sein soll.

Der Abstand gilt pro Seite: 10% lassen 80% der Breite, 20% nur 60%. Bei 16 Pixeln bleiben dann etwa 10 Pixel fürs Motiv. Etwas Platz hilft; zu viel macht es zu klein.

Prüfe bereits vorhandene Ränder. Füllt das Logo nur die mittlere Hälfte des PNG, bleiben diese Ränder auch bei null Zusatzabstand. Schneide unnötigen Leerraum zuerst weg und passe dann den Abstand an.

Vergleiche den Standard mit kleineren und größeren Werten. Prüfe zuerst 16 Pixel. Der Prozentsatz betrifft die gesamte Bildfläche, nicht nur die sichtbare farbige Form darin.

Ein Favicon in WordPress hinzufügen

Nutze die integrierte Einstellung für das Website-Icon. Die WordPress-Anleitung empfiehlt ein quadratisches PNG mit mindestens 512 × 512 Pixeln. Ab WordPress 6.5 öffnest du Einstellungen → Allgemein, wählst das Bild und speicherst. In älteren Versionen kann die Einstellung unter Design → Customizer → Website-Informationen stehen.

Passende Block-Themes können Design → Editor → Identity anbieten. Bezeichnungen hängen von der Oberflächensprache ab. Siehe die Site-Editor-Identity-Dokumentation.

Pixilos icon-512.png ist dafür das passende erzeugte PNG. Prüfe dessen festen Hintergrund. Alternativ erhält ein geeignetes quadratisches Original-PNG seine Transparenz.

1. PNG im Website-Icon-Feld auswählen.
2. Speichern und öffentliche Startseite sowie eine Unterseite öffnen.
3. Browser-Tab prüfen. Liefert eine andere Komponente ein altes Icon, folge der Fehlersuche.

WordPress erstellt die Verweise. Die ZIP ist kein Theme oder Plugin; HTML-Tags gehören nicht in Beitragsinhalte.

Website-Logo und Website-Icon sind getrennte Einstellungen. Ein neues breites Header-Logo ändert nicht zwangsläufig das Tab-Symbol. Speichere die zuständige Icon-Einstellung.

Mit Pixilo ein Favicon aus deinem Logo erstellen

1. Wähle ein Bild. Öffne den Favicon-Generator und wähle JPG, PNG oder WebP mit bis zu 25 MB. Das Bild darf höchstens 8000 Pixel pro Seite und insgesamt 32 Millionen Pixel haben.
2. Einpassung wählen. Einpassen erhält das ganze Bild samt Proportionen; quadratischer Zuschnitt nimmt die Mitte. Prüfe, ob wichtige Teile fehlen.
3. Stelle Abstand und Hintergrund ein. Vergleiche die Browser-Vorschauen in tatsächlicher Größe und die Apple-Vorschau. Entscheide, ob die Browser-Icons transparent sein sollen.
4. Benötigte Dateien herunterladen. ZIP liefert das ganze Paket; Einzeldownloads passen zu bestimmten Upload-Feldern.
5. Einbauen und testen. Nutze die Website-Einstellungen oder die HTML-Anleitung. Prüfe die veröffentlichte Website, nicht nur die Vorschau.

Passe die Optionen an, bis die Vorschauen stimmen, und lade dann herunter. Eine separate Schaltfläche zum Speichern ist nicht nötig: Downloads verwenden deine neuesten Einstellungen. Eine bereits gespeicherte Datei ändert sich aber nicht nachträglich. Lade sie erneut herunter, wenn du das Motiv danach anpasst.

Ausgangsbild und erzeugte Dateien bleiben auf deinem Gerät. Es wird kein Bild auf den Server von Pixilo hochgeladen. Bild und Einstellungen werden in der geöffneten Seite gehalten; lade das Ergebnis herunter, bevor du sie schließt oder neu lädst.

„Anderes Bild wählen“ zeigt die Auswahl wieder. Optionen bleiben erhalten; kontrolliere Einpassung, Abstand und Hintergrund für das neue Motiv.

Beispiel: Aus einem breiten Logo wird ein brauchbares Icon

Angenommen, eine Bäckerei hat ein Logo mit 1200 × 600 Pixeln, einem Brot und einem langen Firmennamen. Das ist ein Beispiel für den Ablauf, kein gemessener Vergleich der Bilder in diesem Artikel.

1. Symbol herauslösen. Exportiere das Brot aus dem Original als quadratisches 512 × 512 PNG, statt einen kleinen Screenshot aufzunehmen.
2. Unnötige Ränder entfernen. Erhalte die Brotkanten und gib dem Motiv genug Fläche im Quadrat.
3. Kleine Vorschauen vergleichen. Beginne mit Einpassen und Standardabstand. Verschwindet der Einschnitt bei 16 Pixeln, vereinfache das Original statt eine unscharfe Kopie zu vergrößern.
4. Hintergrund testen. Geht die dunkle Kontur unter, probiere einen kontrastierenden festen Browser-Hintergrund. Prüfe auch die Apple-Vorschau.
5. Passend herunterladen. HTML mit Browser- und Apple-Icons nutzt ICO, 96-Pixel-PNG und Apple-Bild. WordPress nutzt das 512-Pixel-PNG.

Das Symbol sollte vor dem Einbau erkennbar sein. Funktioniert nur die große Vorschau, überarbeite das Motiv. Eine korrekte Dateiendung löst keine überladene Gestaltung.

Ein Favicon in eine HTML-Website einbauen

Entpacke die ZIP-Datei und lege die gewählten Symbole in dem Ordner ab, den deine Website veröffentlicht. Mit den folgenden Pfaden muss die ICO-Datei unter einer Adresse wie https://example.com/favicon.ico erreichbar sein. Bewahre die Dateien im Quellordner oder bei den öffentlichen Ressourcen auf, die beim Erstellen der Website kopiert werden. Dateien, die du nur im erzeugten Ausgabeordner ablegst, können beim nächsten Build verschwinden.

Füge die ersten beiden Tags für die Browser-Icons in den <head> der Seite ein. Der dritte ergänzt ein Apple-Startbildschirm-Symbol. Wenn deine Seiten eine gemeinsame Head-Vorlage verwenden, füge die Tags dort ein, damit Startseite und Unterseiten dieselben Dateien referenzieren.

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

href nennt den Speicherort und sizes die Abmessungen. Welches Icon der Browser auswählt, kann von Format, Größe und weiteren Angaben abhängen. Der erste Tag wird nicht immer bevorzugt. Siehe die MDN-Referenz zu rel="icon".

Im Ordner /icons/ ändere alle drei Pfade: /icons/favicon.ico, /icons/favicon-96x96.png und /icons/apple-touch-icon.png. Dateiposition und Verweis müssen zusammenpassen.

Ein führendes / beginnt am Domain-Stamm. Liegt die Website unter /portfolio/, verwende die tatsächlichen Veröffentlichungspfade. Öffne die URLs nach dem Deployment direkt.

Suche vor dem Einbau vorhandene Favicon- und Manifest-Tags. Ersetze veraltete Angaben. Bleibt das alte Theme-Icon neben dem neuen, wird die Browser-Auswahl schwer nachvollziehbar.

Optional: Web-App-Manifest hinzufügen oder aktualisieren

Überspringe dies für reine Browser-Icons. Das Manifest ist separat und für das Tab-Symbol nicht erforderlich.

Ein Web-App-Manifest ist eine JSON-Datei, die eine App samt ihrer Symbole beschreibt. Pixilos site.webmanifest enthält nur Icon-Einträge. Hast du schon ein Manifest, füge die neuen Icons dort ein, ohne App-Name, Startadresse oder Anzeigemodus zu ersetzen. Der web.dev-Manifest-Leitfaden erklärt diese Felder.

{
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}

Für ein neues Icon-Manifest ergänze den folgenden Head-Verweis. Verlinkt die Website schon ein Manifest, aktualisiere dieses statt eines konkurrierenden Verweises.

<link rel="manifest" href="/site.webmanifest">

Unter /icons/ lautet der Link href="/icons/site.webmanifest". Ändere die JSON-Bildpfade ebenfalls zu /icons/icon-192.png und /icons/icon-512.png: Der führende Schrägstrich meint die Domain-Wurzel, nicht den Manifest-Ordner.

Die erzeugten Icons verwenden purpose: "any". Sie sind keine maskierbaren Icons: Deren wichtige Details müssen auch erhalten bleiben, wenn ein Gerät sie kreisförmig oder anders zuschneidet. Ein einfarbiger Hintergrund allein genügt nicht. Ändere den Zweck erst, nachdem du eine geeignete Gestaltung vorbereitet und getestet hast. Die MDN-Referenz zum Icon-Zweck erklärt den Unterschied.

Die Datei enthält weiterhin nur Icons, keine vollständige App-Konfiguration. Sie allein macht die Website nicht installierbar.

Was bringt ein Favicon für die Google-Suche?

Ein markantes Symbol hilft beim Wiedererkennen. Es unterstützt Marke und Bedienbarkeit, garantiert aber weder bessere Rankings noch mehr Klicks.

Googles Favicon-Richtlinien verlangen ein quadratisches Bild von mindestens 8 × 8 Pixeln und empfehlen mehr als 48 × 48. Das 96-Pixel-PNG aus dem Paket ist eine praktische Wahl. Verlinke es auf der Startseite und halte die URL stabil. Googlebot muss die Startseite und Googlebot-Image das Icon abrufen können.

Google verwendet ein Favicon pro Hostname, etwa example.com. Ein Bereich unter example.com/blog/ bekommt kein separates Symbol in der Suche. Die Anzeige ist nicht garantiert. Erneutes Crawlen und Verarbeiten kann Tage bis Wochen dauern; eine Indexierungsanfrage in Search Console erzwingt kein sofortiges Update.

Wenn dein Browser das neue Icon zeigt, Google aber noch das alte, prüfe zuerst die öffentlichen Dateien und die Tags auf der Startseite. Häufiges Umgestalten während der Wartezeit erschwert es, die verarbeitete Version nachzuvollziehen.

Warum fehlt das Favicon oder bleibt das alte Bild?

Trenne Installationsfehler von alten Cache-Kopien. Eine nicht funktionierende Icon-URL wird durch Seitenaktualisierung nicht repariert. Ist die URL korrekt, prüfe Tags und Cache.

Öffne die genaue Icon-URL in einem neuen Tab. Sie sollte das Bild anzeigen, nicht die Startseite, eine Anmeldung oder eine Fehlermeldung. Für eine genauere Prüfung öffnest du die Entwicklerwerkzeuge, wählst den Netzwerkbereich und lädst neu. Status 200 reicht nicht aus, wenn die Antwort HTML statt eines Bildes enthält.

Prüfe den veröffentlichten Head auf Start- und Unterseite. Änderungen könnten im Build fehlen oder eine Komponente alte Tags hinzufügen. Verfolge deine Dateinamen und Pfade.

Favicons können unabhängig von der Seite gecacht werden. Tab schließen und öffnen, frisches Profil oder anderen Browser testen. Normales Neuladen ersetzt sie nicht immer sofort; die Prüfungen garantieren keine gleichzeitige Aktualisierung aller Browser oder Suchergebnisse.

Bei CDN oder Service Worker prüfe alte Icon- oder Seitenantworten und aktualisiere den passenden Cache. Ändere eine Sache, kontrolliere das Ergebnis und mache nur bei weiterem Fehler weiter.

Vor dem Abschluss prüfen

• Das Motiv ist ohne Zoom bei 16 und 32 Pixeln erkennbar.
• Kanten und Farben funktionieren auf hellen und dunklen Hintergründen.
• Downloads entsprechen der endgültigen Einpassung, dem Abstand und Hintergrund.
• Jede Icon-URL öffnet nach Veröffentlichung die korrekte Datei.
• Der gemeinsame Head hat korrekte Verweise ohne veraltete Duplikate.
• Apple- und Manifest-Verweise zeigen auf veröffentlichte Dateien.
• Andere Einstellungen eines bestehenden App-Manifests bleiben erhalten.
• Google darf Homepage und Icon crawlen, wenn Suchanzeige gewünscht ist.

Bewahre Original und fertiges Paket zusammen auf. Notiere, ob HTML-Vorlage, WordPress oder Baukasten das Icon steuert. Das erleichtert spätere Markenänderungen.

Häufige Fragen

Welche Favicon-Größe ist am besten?

Nutze eine klare, quadratische Grafik, die groß genug für die gewünschten Ausgaben ist. 512 × 512 deckt die größte Datei im Paket ab, ist aber nicht allein für ein kleines Tab-Symbol erforderlich. Die Größentabelle erklärt die Abmessungen und ihre Verwendung.

Brauche ich ICO und PNG?

Nicht immer. Pixilos HTML-Beispiel nutzt eine ICO mit kleinen Bildern und ein größeres PNG. Ein CMS kann eigene Varianten erzeugen. Folge den Anforderungen deiner Einstellung.

Darf ein Favicon transparent sein?

Ja, Browser-Icons können Transparenz erhalten. Prüfe verschiedene Hintergründe. Startbildschirm-Icons erhalten eine feste Hintergrundfarbe; vorhandene Quellhintergründe werden nicht entfernt.

Warum wird mein Logo unscharf?

Das Ausgangsbild kann unscharf sein oder mehr Details enthalten, als ein winziges Icon zeigen kann. Vergrößern löst keines der Probleme. Nutze ein klares Original, vereinfache feine Details und prüfe die Vorschauen in tatsächlicher Größe, bevor du den Abstand anpasst.

Lade ich ZIP direkt in WordPress hoch?

Nein. Entpacke sie und wähle ein quadratisches PNG wie icon-512.png im Website-Icon-Feld. Das Paket ist kein Theme oder Plugin.

Verbessert ein Favicon die Suchmaschinenoptimierung?

Es unterstützt eine erkennbare, einheitliche Marke. Erwarte keine Ranking-Steigerung. Erfülle Googles Anforderungen und warte auf Verarbeitung; Berechtigung garantiert keine Anzeige.

Zusammenfassen mitChatGPT (öffnet sich in einem neuen Tab)Grok (öffnet sich in einem neuen Tab)Google (öffnet sich in einem neuen Tab)Perplexity (öffnet sich in einem neuen Tab)Claude (öffnet sich in einem neuen Tab)