Favicon schnell und einfach in verschiedenen Formaten für Website erstellen – Web-Tutorial
In diesem Tutorial zeige ich, wie man ein Favicon erstellen kann. Ein Favicon (Favoriten-Icon) wird schon lange nicht mehr nur in der Favoritenleiste eines Desktop-Browsers angezeigt, sondern wird auch z.B. in der Google-Suche, beim Splashscreen von Chrome, Opera, Firefox usw. oder auch als App-Shortcut auf Android und iOS angezeigt. Daher muss das Favicon in verschiedenen Größen und Formaten bereitgestellt werden.
Dieses FAQ gibt einen Überblick über verschiedene Formate: realfavicongenerator.net/faq
Um nun jede Bilddatei nicht separat händisch erstellen zu müssen, lege ich einfach ein Master-File in mind. 512 × 512 Pixel an. Ich schaue auch auf einen transparenten Hintergrund und dann gebe ich die Grafik als PNG aus.
Ich empfehle folgenden Generator: favicon.io/favicon-converter
Dieser gibt automatisch verschiedene Grafiken für Android, iOS, Browser und auch hochauflösende Displays aus (hohe Kompatibilität für verschiedene Anwendungsfälle). Nur noch Pfade anpassen und in HTML-Code Verknüpfungen einfügen.
Ich zeige hier einen einfachen Weg, wie man in max. 5 Minuten Favicons erzeugt.
Hat man eine Website, die z.B. auch als Web-App verwendet wird oder für umfangreiche Projekte, rentiert sich durchaus mehr Zeit reinzustecken.
Siehe dazu folgenden Blog-Post: applypixels.com/blog/designing-a-favicon-in-2019
In diesem Video zum Thema Favicon erstellen für Website spreche ich Deutsch. I speak german in this tutorial.
* Dies ist ein Affiliate-Link, der mit dem Partnerprogramm von Amazon zusammenhängt. Sobald du darauf geklickt hast, wird bei dir am Rechner für 24 Stunden ein Cookie gespeichert. Wenn du in diesem Zeitraum etwas bei Amazon kaufst, dann bekomme ich dafür eine kleine Provision (zwischen einem und zehn Prozent des Warenkorb-Wertes). Auf dich oder deinen Einkauf hat dies keine Auswirkungen. Vielen Dank für deine Unterstützung! 😊