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:

1. Icons im Grafikprogramm seiner Wahl erstellen.
2. 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).
3. 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.