Wie erstelle ich ein Favicon?

Das Favicon ist das kleine Bild im Browser-Tab (neben deinem Webseitennamen). Dieses Bild kann dort auf verschiedenste Arten eingesetzt werden. Mit der WordPress Version 5.4 wurde aber einiges geändert. Ich zeige dir in diesem Beitrag, wie du ein solches Favicon erstellen und richtig einfügen kannst. Denn bei einem Favicon handelt es sich um ein «.ico» File und nicht um die Dateiformate wie PNG, JPG oder sonst etwas! Mehr zu den verschiedenen Dateiformaten findest du hier: https://sutersoftware.ch/das-richtige-bildformat-fuer-deine-webseite/

Beachte das wir in dieser Anleitung nur die «Classic, Desktop Browser Version» verwenden! Favicons für Android, Windwos, iOS, etc. beachten wir nicht. Dabei handelt es sich um Shortcuts oder App-Symbole! Wir wollen in diesem Beitrag aber nur, dass das kleine Favicon im Browser-Tab richtig angezeigt wird.

1. Stelle sicher das dein Logo quadratisch ist! Das heisst, dass es ein Seitenverhältnis von 1:1 hat. Zum Beispiel 300 x 300 Pixel. Falls das nicht der Fall ist, passe den Logo an!

2. Stelle sicher das dein Logo im Dateiformat PNG ist. Dan wird es auch auf Geräten im «Dark Mode» schön angezeigt. Da der Hintergrund bei PNG’s meist transparent ist. Kontrolliere das vorher!

3. Besuche die Webseite „https://realfavicongenerator.net/„.

4. Wähle „Select your Favicon image”, suche dein Logo und lade es hoch.

5. Auf der neu geladenen Seite kannst du das Icon noch bearbeiten. Wenn du Schritt 1 und 2 gemacht hast, musst du hier nichts mehr machen und kannst auf dieser Seite weiter unten auf „Generate your Favicons and HTML code“ klicken. Wenn dein Logo keinen transparenten Hintergrund hat siehst du es spätestens hier und zwar im „Dark theme / Incognito“ Bereich.

6. Nachdem die Seite neu geladen wurde, klickst du auf „Favicon package“.

7. Nun wird eine „.zip“ File heruntergeladen, dass du entpacken musst. Darin befindet sich ein Dokument namens „favicon.ico“. Dieses Dokument brauchen wir. Die restlichen Dokumente kannst du löschen.

8. Melde dich an deinem Hosting-Service an. (Nicht an deiner Webseite!) Der Hosting Service ist bei mir PLESK. Öffne danach den „File-Explorer“ oder „File Manager“. Wenn du dir nicht sicher bist was PLESK ist, kannst du das hier nachlesen >> https://sutersoftware.ch/was-ist-plesk/

9. In diesem „File Manager“ oder Explorer findest du ein Verzeichnis «httpdocs». (Mit grosser Wahrscheinlichkeit befindest du dich auch gerade in diesem Verzeichnis.) Lade das favicon.ico nun in dieses Verzeichnis hoch.

10. Gratulation! Wenn du deine WordPress-Webseite nun neu lädst, wird dein oben erstelltes Favicon richtig angezeigt!

Preise für Webseiten

Die Frage: «Was kostet eine Webseite», kann erst dann beantwortet werden, wenn der Umfang und damit der Aufwand geklärt ist. Lese hier nach, was das genau bedeutet.

Wordpress Logo

Servicepläne

Deine Investition schützt du durch Pflege und Sicherheit. Damit du aber mehr Zeit für dein Unternehmen hast, nehme ich dir diese Aufgaben gerne ab. Lese hier nach, was ich dir bieten kann.

Notebook-Arbeitsplatz mit Text

SEO-Deinstleistungen

SEO bedeutet Content Marketing. Und Content Marketing erreicht man mit Zeit oder Geld. Hier findest du alle Angaben, wie ich dich bei deinem SEO-Ziel unterstützen kann.

Ähnlich Artikel

Verwenden der SharePoint-Freigabe von Suter Software

Bei Webdesign-Arbeiten kommt es immer wieder mal vor das grosse Datenmengen ausgetauscht werden müssen. Da ich keine Lust habe alles per E-Mail zu erledigen und E-Mails meist auch noch grössenbeschränkt sind, unterhalte ich eine Business SharePoint-Instanz. Hier zeige...

Alles über Anker-Links

Nachdem ich dir in diesem Beitrag hier: https://sutersoftware.ch/das-1x1-der-wordpress-navigation/ gezeigt habe, wie du die WordPress-Navigation bearbeiten kannst, möchte ich dir nun zeigen, was Anker-Links sind und wie du sie verwenden kannst. Wenn man von...