FavTouch-Icon für die Website
FavTouch, What?!
Favicon gibt es schon laaaange. Laut Wikipedia (standartisiert durch das W3C ) seit 1999 im 'Internet Explorer 5'. Das sind die kleinen Icons (16x16px großen Grafiken) im Browser-Tab/Reiter links vom Title der Website.
Durch die Mobilen Geräte sind sie zu Touch-Icons avanciert. Letzen Endes sind es einfach Icons für die Favoriten des Besuchers die man nun auch 'touchen' kann. Hier und da wird es auch App Icon benannt, da das Nutzererlebnis einer App gleich kommen soll/kann/darf.
Die Erstellung eines FavTouch-Icons
Mit Inkscape eine 1024x1024px große Vector-Grafik erstellen und diese im Original als SVG speichern. Anschließend noch als PNG exportieren, mit dieser Datei werden die Generatoren gefüttert.
Nun kann man händisch dahergehen und für alle neuen und alten Nutzeroberflächen die passende Grafik herstellen oder man bedient sich eines Online-Generators und lässt die Arbeit erledigen.
Benötigt man nur ein favicon.ico.
Hochladen. Umwandeln lassen. Downloaden. Fertig.
Möchte man für FAST alle Oberflächen gewappnet sein.
Man erhält direkt sein Icon-Set zum downloaden und den folgenden HTML-Code zum einbinden:
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">Es genügt meist aber das relativ komplette Set.
Nachdem man alle gewünschten Einstellungen vorgenommen hat erhält man ein Icon-Set zum downloaden und den folgenden HTML-Code:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="194x194" href="/favicon-194x194.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#444444">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="msapplication-config" content="/browserconfig.xml"><meta name="theme-color" content="#ffffff">Wie man sieht muß man nicht mehr alle Icons direkt in der 'index.html / index.php' verlinken und den <head> überfrachten. manifest.json, site.webmanifest und browserconfig.xml werden eingelesen und verweisen auf die Pfade wohin Icons abgelegt wurden.
Für die Photoshop-User auf Windows & Mac.
Meines Wissens gibt es Plugins für Photoshop mit dem man unterschiedliche Größen der Grafik exportieren kann.
Warum eine solch große SVG-Grafik für ein Icon anfertigen?
Favicon / Touchicons sind nicht die einzigen minimalistischen Darstellungen Ihrer Unternehmung. Twitter, Facebook und Co. freuen sich ebenso über ein Profilbild und für diese verschiedenen Größen ist es einfacher und sauberer eine Grafik ausgehend von einem großen Format herunterrechnen/exportieren zu lassen. Und nur für den Fall das mal eines der Icons im App Store landet, Apple fordert dort 1024x1024px.
Typische Frage: Ist es überhaupt wichtig ein Favicon zu haben?
Ich sage JA. Wenn sie mit Bookmarks auf Ihren Oberflächen arbeiten, hilft das Favicon den entsprechenden Link visuell schneller zu erfassen.
Ausserdem praktisch, entfernen Sie den Namen eines Bookmarks. Sie wissen immer noch zu welcher Website das Favicon gehört. ... naja meistens jedenfalls ;-)
20201225 #Update
Beitrag im Netz
