Icons für HiDPI Displays
Ende April verkündete Mozilla den Support von Icons, die mehrere Bilder enthalten. Bekanntestes Einsatzgebiet: Favicons.
Irgendwie sind Favicons ein lästiges Überbleibsel aus längst vergangen Zeiten (wurde von Microsoft mit dem Internet Explorer 5 eingeführt). Dennoch ist es das erste, was der User sieht, wenn er auf die Adresszeile schaut. Darum sollten Favicons auch für HiDPI/Retina Displays optimiert werden.
Der Workflow ist schnell erklärt:
- Icons im Grafikprogramm seiner Wahl erstellen.
- PNG Dateien in den Formaten 16×16 px und 32×32 px exportieren (Sketch hat eine tolle Export-Funktion, die automatisch für die doppelte Auflösung exportiert).
- Danach müssen die PNG Dateien in ein Icon gepackt werden, beispielsweise mit der HTML5 App X-Icon Editor. Dort, beide PNGs importieren und als Icon exportieren.
Et voilà: fertig ist das Favicon.
Kontrollieren kann man das Ergebnis in der Preview.app, dort sind dann alle Varianten des Icons zu sehen.
Show all articles