Webdesign

FavIcon Generator

13. 08. 2016

Das Problem

Früher war alles ganz einfach – zumindest was das angezeigte Symbol einer Webseite betraf: Es gab eine Datei „favicon.ico“ mit 16×16 oder 32×32 Pixel, und zu dieser wurde wie folgt verwiesen:

<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">

Heutzutage ist das ein bisschen komplizierter: Je nach Betriebssystem (Android, Windows, iOS, OS X, …) und Browser werden nicht nur verschiedene Auflösungen benötigt, sondern es bedarf auch verschiedener Anpassungen, damit das Symbol zum jeweiligen System passt.

Die Lösung

Vor kurzem habe ich ein Webtool gefunden, das nicht nur ein Bild für die verschiedenen Plattformen aufbereitet – sondern sich auch um Hintergründe, das für Android benötigte Manifest und vieles mehr kümmert. Einfach Bild hochladen – die gewünschten Einstellungen treffen – und man erhält die verschiedenen Grafiken inklusive Quellcode zum Download.

Hier beispielsweise die Einstellungen für Windows:
Favicon 01

Die Datei werden anschließend generiert:
Favicon 03

Und man erhält den Quelltext zum Download:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#262626">
<meta name="msapplication-TileColor" content="#f7ebd1">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">

Der Link zum diesem Favicon Generator: http://realfavicongenerator.net/

image_print
1 Stern2 Sterne3 Sterne4 Sterne5 Sterne
Loading...

Author

Manuel

Ich bin Manuel Wurm, IT-Consultant und Blogger. Ich mag es, verschiedenste Dinge auszuprobieren. Vor allem mit Retro-Computern, Bierbrauen, Bogenschießen und Schlagzeug spielen verbringe ich gerne meine Zeit. Kochen zählt zu meinen größten Hobbys - das spiegelt sich auch auf wurmweb.at wieder, wo ich gerne Rezepte teile und hilfreiche Tipps für Interessierte festhalte.

Related Posts

Webdesign

Designer-Tools-Sammlung

16. 02. 2010

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne
Loading...

Webdesign

Website-Layouts

30. 08. 2010

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne
Loading...