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:
Die Datei werden anschließend generiert:
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/
Loading…