Favicons für Websites erstellen

Aktuell nutze ich PNG Icons in den folgenden Auflösungen, es sind aber noch einige Icons für andere Endgeräte möglich, welche hier nicht aufgelistet werden.

Auflösung und Bildformat Details
32x32x Pixel ICO Standard Browser Icon. Wird mit dem Dateinamen favicon.ico im Root-Verzeichnis einer abgelegt und in den Meta Daten verlinkt.
32x32 Pixel PNG Für Geräte die anstatt eine ICO lieber eine PNG Datei nutzen möchten. Dieses Favicon sollte in den Meta Daten und Manifest.json verlinkt werden.
72x72 Pixel PNG Wird von vielen Android Geräten genutzt. Dieses Favicon sollte in den Meta Daten und Manifest.json verlinkt werden.
192x192 Pixel PNG Wird von vielen Android Geräten genutzt. Dieses Favicon sollte in den Meta Daten und Manifest.json verlinkt werden.
512x512 Pixel PNG Wird von vielen Android Geräten genutzt, insbesondere als "Splash-Screen". Dieses Favicon sollte in den Meta Daten und Manifest.json verlinkt werden.
72x72 Pixel PNG Ein weiteres in 72x72 Pixel für Apple Geräte als rel="apple-touch-icon". Dieses Favicon sollte eine Hintergrundfarbe haben, da dies von Apple empfohlen wird. Mit Abständen, Ecken und Runden Kanten habe ich mich noch nicht versucht.
180x180 Pixel PNG Ebenfalls für Apple Geräte, also mit Hintergrundfarbe und rel="apple-touch-icon"

Man sieht sehr oft sehr unscharfe Favicons, viele Websites haben gar keines. Das war vor einigen Jahren kein Problem, als das Icon nur als winzige Grafik im Browser-Tag angezeigt wurde. Für Smartphones ist die oben genannte oder eine ähnliche Konfiguration erforderlich, um gute Resultate zu erzielen.
 

Favicons mit einer möglichst guten Qualität und Kompression erstellen

Bei der Erstellung der Website-Favicons muss insbesondere darauf geachtet werden, dass jeder Pixel richtig sitzt. Ein Logo ohne Fachkenntnisse auf die passenden Maße zu vergrößern oder zu verkleinern, ohne dass es zu einer unscharfen Pixel-Suppe kommt, ist kaum möglich. Daher ist es empfehlenswert, die Favicons Pixel für Pixel zu setzen, was zwar viel Handarbeit bedeutet, sich aber durchaus sehen lassen kann. Letztendlich geht es ja auch darum, dass das Favicon auch in Suchmaschinen angezeigt wird, speziell mit dem Smartphone und Tablet.

Denkt auch daran die neuen Favicons ordentlich zu komprimieren. Wer sich etwas auskennt, kann dies mit Bildbearbeitungs-Programmen hinbekommen. Allen anderen kann man dann einen Online PNG Kompressions-Dienst empfehlen, siehe hier.
 

Favicon Generator(en)

https://realfavicongenerator.net/