Favicon erstellen mit Canva: 5 einfache Schritte für WordPress

Es ist nur ein paar Pixel groß und trotzdem eines der ersten Dinge, die Besucher von deiner Website sehen: das Favicon. Es erscheint im Browser-Tab, in der Lesezeichenleiste, auf dem Smartphone-Homescreen und häufig auch neben deiner Website in den Google-Suchergebnissen.

Fehlt es, zeigt der Browser ein neutrales Standardsymbol – und deine Website geht zwischen den anderen Tabs leichter unter.

Die gute Nachricht: Wenn du ein Favicon erstellen möchtest, brauchst du kein teures Grafikprogramm. Mit Canva gestaltest du dein Website-Icon in wenigen Minuten, und WordPress erzeugt daraus anschließend automatisch mehrere kleinere Varianten und bindet die passenden Site-Icon-Tags in deiner Website ein.

In dieser Anleitung zeige ich dir Schritt für Schritt, wie du ein Favicon erstellen kannst: wie du ein Motiv auswählst, das auch in sehr kleiner Darstellung noch funktioniert, wie du dein Favicon in Canva gestaltest und herunterlädst, wie du es in WordPress einbindest und wie du anschließend kontrollierst, ob es richtig ausgeliefert wird.

Warum solltest du ein Favicon erstellen?

Ein Favicon ist das kleine Symbol, das deine Website im Browser kennzeichnet. Wer viele Tabs gleichzeitig geöffnet hat, findet deine Seite über dieses Symbol schneller wieder. Dasselbe gilt für Lesezeichen und für Verknüpfungen, die Besucher auf dem Homescreen ihres Smartphones ablegen.

Auch Google zeigt in den Suchergebnissen ein Favicon neben dem Namen deiner Website an. Ist keines hinterlegt oder kann Google es nicht abrufen, erscheint möglicherweise ein Standardsymbol. Ein eigenes Favicon sorgt vor allem für Wiedererkennung und einen professionelleren Gesamteindruck.

Ein Favicon ist kein von Google dokumentierter Rankingfaktor. Es verbessert daher nicht nachweisbar dein Ranking, unterstützt aber die Markenwirkung in Browser-Tabs, Lesezeichen und Suchergebnissen.

Welche Farben zu deinem Auftritt passen und wie du sie auch im Favicon einsetzen kannst, liest du in meinem Beitrag zur Farbkombination für deine Website.

Favicon erstellen mit Canva: die Kurzanleitung

Wenn du dein Favicon erstellen möchtest und nur die wichtigsten Schritte brauchst, reicht dieser Ablauf:

1. Motiv festlegen: Nutze eine vereinfachte Bildmarke, einen Buchstaben oder ein klares Symbol.
2. In Canva gestalten: Lege ein quadratisches Design mit 512 x 512 Pixeln an.
3. Als PNG herunterladen: Exportiere die Datei als PNG.
4. In WordPress hochladen: Hinterlege sie als Website-Icon.
5. Ergebnis prüfen: Kontrolliere Browser, Quelltext und später die Google-Suchergebnisse.

Schritt 1: Das passende Motiv festlegen

Ein Favicon wird oft sehr klein dargestellt. Im Browser-Tab sind typische Darstellungen beispielsweise 16 x 16 oder 32 x 32 Pixel groß.

Ein vollständiges Logo mit Schriftzug, Claim und feinen Linien ist in dieser Größe kaum noch zu erkennen.

Bevor du dein Favicon erstellen kannst, solltest du deshalb prüfen, welches Element deines Logos auch in sehr kleiner Darstellung funktioniert.

Diese Motive funktionieren gut

• Ein Buchstabe oder Monogramm, zum Beispiel der Anfangsbuchstabe deines Firmennamens.
• Die Bildmarke deines Logos, also nur das Symbol ohne Schriftzug.
• Eine einfache Form wie ein Kreis, ein Quadrat oder ein klares Zeichen in deiner Markenfarbe.

Darauf solltest du achten

• Wenige Details: Feine Linien, kleine Schrift und komplizierte Elemente verschwinden schnell.
• Starker Kontrast: Motiv und Hintergrund sollten sich deutlich voneinander abheben.
• Wenige Farben: Ein bis zwei Farben wirken in kleinen Größen häufig klarer.
• Quadratisch anlegen: Für WordPress und Google solltest du dein Favicon quadratisch gestalten.
• Nicht zu dicht am Rand: Lass rund um das Motiv etwas Luft, damit es auch in kleinen Darstellungen nicht gequetscht wirkt.

Wenn dein Logo keine Bildmarke besitzt, die sich dafür eignet, ist ein klar gesetzter Anfangsbuchstabe in deiner Hausschrift und Markenfarbe oft eine einfache Lösung.

Schritt 2: Favicon in Canva gestalten

Jetzt geht es an die eigentliche Gestaltung. Um dein Favicon erstellen zu können, brauchst du ein Canva-Konto. Die kostenlose Version reicht für die normale Gestaltung aus.

Design in der richtigen Größe anlegen

Bevor du in Canva dein Favicon erstellen kannst, legst du die richtige Größe fest. WordPress empfiehlt für das Website-Icon ein quadratisches Bild mit mindestens 512 x 512 Pixeln.

1. Klicke in Canva auf Design erstellen.
2. Wähle Benutzerdefinierte Größe.
3. Gib als Breite und Höhe jeweils 512 ein.
4. Wähle als Einheit px.
5. Klicke auf Neues Design erstellen.

WordPress erzeugt aus dieser Datei anschließend mehrere kleinere Varianten und bindet die passenden Site-Icon-Tags ein.

Motiv richtig platzieren

Wenn du ein Favicon erstellen willst, setze dein Motiv möglichst groß auf die Fläche, aber nicht bis direkt an den Rand.

Ein Rand von ungefähr zehn Prozent rundherum ist ein guter Ausgangspunkt. So bleibt das Symbol auch in kleinen Darstellungen klar und wirkt nicht gequetscht.

Ist das Motiv zu klein, bleibt im Browser-Tab möglicherweise nur ein winziger Punkt übrig.

Für einen Buchstaben fügst du ein Textfeld ein, wählst deine Hausschrift und vergrößerst den Buchstaben, bis er die Fläche gut ausfüllt. Arbeitest du mit deiner Bildmarke, lädst du sie über Uploads hoch und ziehst sie auf die Fläche.

Die Hintergrundfarbe legst du über die Farbsteuerung fest. Nutze möglichst den exakten Farbcode deiner Markenfarbe.

Gestaltung in kleiner Größe testen

Wenn du dein Favicon erstellen möchtest, solltest du es nicht nur in der großen Canva-Ansicht beurteilen. Zoome so weit heraus, dass dein Design nur noch sehr klein erscheint. Erkennst du Motiv oder Buchstaben dann noch eindeutig?

• Details entfernen
• Linien verstärken
• Kontrast erhöhen
• Farben reduzieren

Schritt 3: Favicon aus Canva herunterladen

Im nächsten Schritt schließt du das Favicon erstellen in Canva ab und exportierst dein Design als fertige Datei:

1. Klicke oben rechts auf Teilen.
2. Wähle Herunterladen.
3. Stelle als Dateityp PNG ein.
4. Klicke auf Herunterladen.

Transparenter Hintergrund: ja oder nein?

Wenn du dein Favicon erstellen möchtest, bietet Canva bei PNG-Dateien die Möglichkeit, einen transparenten Hintergrund zu verwenden. Diese Funktion ist laut der Canva-Hilfe je nach Canva-Tarif verfügbar.

Für viele Favicons kann ein farbiger Hintergrund sogar sinnvoll sein. Er sorgt dafür, dass dein Motiv sowohl auf hellen als auch auf dunklen Browser-Oberflächen klar erkennbar bleibt.

Ein transparentes Favicon mit dunklem Motiv kann beispielsweise im Dunkelmodus schlecht sichtbar sein.

Speichere die Datei unter einem eindeutigen Namen, zum Beispiel favicon-firmenname.png. Weitere Tipps zur Benennung und Optimierung von Bildern findest du in meinem Beitrag Bilder-SEO in WordPress.

Schritt 4: Favicon in WordPress einbinden

Das Favicon erstellen ist erledigt, jetzt folgt die Einbindung. WordPress nennt das Favicon Website-Icon beziehungsweise Site Icon. Du benötigst dafür kein zusätzliches Plugin.

Website-Icon unter Einstellungen → Allgemein

1. Gehe im Dashboard zu Einstellungen → Allgemein.
2. Suche den Bereich Website-Icon.
3. Klicke auf den Button zum Auswählen.
4. Lade deine PNG-Datei hoch oder wähle sie aus der Mediathek.
5. Ist dein Bild nicht exakt quadratisch, kann WordPress einen Zuschnitt anbieten.
6. Speichere die Änderungen.

WordPress zeigt dir anschließend eine Vorschau des Icons.

Alternative bei Block-Themes: Site Editor

Bei aktuellen Block-Themes kannst du das Website-Icon außerdem über den Site Editor verwalten. Je nach WordPress-Version findest du dort eine Identity- beziehungsweise Identitäts-Sektion mit Einstellungen für Website-Titel, Untertitel, Logo und Site Icon.

Bei älteren oder klassischen Themes kann zusätzlich weiterhin eine entsprechende Einstellung im Customizer vorhanden sein.

Du musst das Favicon nur an einer Stelle hinterlegen, da es sich um dieselbe WordPress-Einstellung handelt.

Favicon mit Divi einbinden

Auch wenn du für eine Divi-Website ein Favicon erstellen möchtest, ist die WordPress-Funktion für das Website-Icon der sauberste Weg. Hinterlege dein Favicon deshalb ebenfalls unter Einstellungen → Allgemein. So bleibt die Einstellung unabhängig vom Page Builder und wird zentral von WordPress verwaltet.

Was WordPress automatisch erledigt

Aus deiner 512-Pixel-Datei erzeugt WordPress automatisch mehrere kleinere Varianten. Dazu gehören je nach aktueller WordPress-Ausgabe unter anderem Größen für Browser-Favicons, größere App-Icons, Apple-Touch-Icons und weitere Plattform-Metadaten. Du musst diese Größen beim Favicon erstellen also nicht einzeln in Canva anlegen.

Schritt 5: Favicon prüfen

Nach dem Favicon erstellen und Hochladen folgt die Kontrolle.

Im privaten Browserfenster testen

Browser speichern Favicons häufig sehr hartnäckig im Cache.

Siehst du nach dem Hochladen noch das alte Symbol, bedeutet das deshalb nicht automatisch, dass etwas falsch eingerichtet wurde.

Öffne deine Website in einem privaten Fenster oder teste sie in einem anderen Browser. Nutzt du ein Caching-Plugin, leere zusätzlich dessen Cache.

Mehr zum Thema Cache findest du in meinem Beitrag WordPress Geschwindigkeit optimieren.

Im Quelltext kontrollieren

Rufe deine Startseite auf und öffne den Seitenquelltext. Suche anschließend mit Strg + F beziehungsweise Cmd + F nach rel="icon". Wenn du ein Website-Icon hinterlegt hast, gibt WordPress im Kopfbereich deiner Seite entsprechende Einträge aus. Zum Beispiel:

<link rel="icon" href="https://deine-domain.de/wp-content/uploads/2026/11/favicon-firmenname-32x32.png" sizes="32x32" />
<link rel="icon" href="https://deine-domain.de/wp-content/uploads/2026/11/favicon-firmenname-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://deine-domain.de/wp-content/uploads/2026/11/favicon-firmenname-180x180.png" />
<meta name="msapplication-TileImage" content="https://deine-domain.de/wp-content/uploads/2026/11/favicon-firmenname-270x270.png" />

Die Domain, das Datum im Pfad und der Dateiname sehen bei dir natürlich anders aus. Auch die genaue Ausgabe kann durch Themes oder Plugins ergänzt oder verändert werden. Wichtig ist, dass entsprechende Icon-Einträge vorhanden sind und auf deine aktuelle Datei beziehungsweise die daraus erzeugten Varianten verweisen.

Favicon in den Google-Suchergebnissen

Dein neues Favicon erscheint in den Google-Suchergebnissen nicht unbedingt sofort.

Google muss deine Startseite und die Favicon-Datei zunächst erneut crawlen. Das kann einige Tage bis mehrere Wochen dauern.

Google verlangt laut seinen Richtlinien für Favicons in der Google-Suche unter anderem ein quadratisches Seitenverhältnis, eine erreichbare Favicon-Datei, eine stabile beziehungsweise nicht ständig wechselnde URL und ein Motiv, das zur Website beziehungsweise Marke passt.

Google empfiehlt außerdem eine Größe von mehr als 48 x 48 Pixeln. Mit einer quadratischen 512 x 512 Pixel großen Datei erfüllst du die Größenanforderung problemlos.

Wichtig: Auch wenn alle Richtlinien eingehalten werden, garantiert Google nicht, dass dein Favicon tatsächlich in den Suchergebnissen angezeigt wird.

Wenn du die Google Search Console nutzt, kannst du deine Startseite über die URL-Prüfung erneut zur Indexierung einreichen. Das kann eine erneute Prüfung anstoßen, garantiert aber keinen festen Zeitpunkt.

Sonderfälle: Wenn das Favicon nicht richtig angezeigt wird

Auch wenn du beim Favicon erstellen alles richtig gemacht hast, kann es zu Anzeigeproblemen kommen.

Das alte Favicon erscheint weiterhin

In den meisten Fällen liegt das am Browser-Cache oder am Cache deines Caching-Plugins. Teste deine Website in einem privaten Browserfenster und leere bei Bedarf den Plugin-Cache. Erscheint das alte Symbol weiterhin, prüfe im Quelltext, ob die Einträge mit rel="icon" auf die neue Datei verweisen. Wenn Theme oder Plugin zusätzlich ein eigenes Favicon ausgeben, können mehrere unterschiedliche Einträge vorhanden sein.

Das Favicon ist im Dunkelmodus kaum zu sehen

Ein transparentes Favicon mit dunklem Motiv kann auf einer dunklen Browser-Oberfläche schnell untergehen. Eine einfache Lösung ist eine farbige Hintergrundfläche in Canva, beispielsweise in deiner Markenfarbe. Alternativ verwendest du eine Motivfarbe, die sowohl auf hellen als auch auf dunklen Flächen ausreichend Kontrast bietet. Denke deshalb schon beim Favicon erstellen an den Dunkelmodus.

Das Bild wird beim Hochladen falsch zugeschnitten

WordPress kann einen Zuschnitt anbieten, wenn dein Bild nicht exakt quadratisch ist. Wenn du beim Favicon erstellen in Canva bereits 512 x 512 Pixel gewählt hast, sollte kein problematischer Zuschnitt notwendig sein.

Google zeigt kein oder ein falsches Favicon

Prüfe zuerst, ob das Favicon auf deiner Startseite im Quelltext eingebunden ist. Google berücksichtigt für die Darstellung in den Suchergebnissen das Favicon der Website beziehungsweise Startseite. Außerdem müssen sowohl die Startseite als auch die Favicon-Datei für Google erreichbar sein und dürfen nicht durch entsprechende technische Regeln blockiert werden. Danach musst du warten, bis Google die Seite erneut crawlt.

Fazit: Favicon erstellen und sauber in WordPress einbinden

Wenn du ein Favicon erstellen möchtest, brauchst du im Grunde nur drei Dinge:

• ein klares, einfaches Motiv
• eine quadratische Canva-Datei mit mindestens 512 x 512 Pixeln
• die Website-Icon-Funktion von WordPress

Den technischen Rest übernimmt WordPress weitgehend selbst. Aus deiner Ausgangsdatei erzeugt es mehrere Größen und bindet die entsprechenden Site-Icon-Tags in den Quelltext ein.

Entscheidend ist vor allem das Motiv: Je einfacher, kontrastreicher und klarer es aufgebaut ist, desto besser funktioniert es in kleinen Browser-Tabs.

Teste dein Favicon nach dem Hochladen im privaten Browserfenster und kontrolliere bei Bedarf den Quelltext. Bis das neue Favicon auch in den Google-Suchergebnissen erscheint, kann es etwas dauern.

Häufige Fragen zum Favicon erstellen

Kostenlose ChecklisteWie gut ist deine Website wirklich?15 Punkte in 5 Bereichen – zum Ankreuzen, mit Auswertung. Checkliste herunterladen