2013-01-15 8 views
16

Favicon Geschäft wurde in den letzten Jahren kompliziert. Neue Arten von Geräten (neu) erfunden, wie Tabletten und Smart-Smartphones. Sie verwenden Favicons auf neue Weise (z. B. als Anwendungssymbole auf Startbildschirmen) und erfordern herstellerspezifische Verknüpfungen. In ähnlicher Weise erlauben Browser jetzt das Erstellen von Desktop-Verknüpfungen für Web-Apps (die auch Favicons für Icons verwenden). Schlimmer noch, wir haben jetzt hochauflösende ("Retina") Displays sowohl in tragbaren Geräten als auch in Laptops, die Bilder mit höherer Auflösung für Icons benötigen. Schlimmer noch, verschiedene Browser (und Versionen) unterstützen unterschiedliche Bildformate für Icons und verschiedene Größen. Beginnend mit 16x16-only .ico-only IE6 und endend mit Opera, die nun .svg-Icons unterstützt.Was ist Stand der Technik von Favicons im Jahr 2013?

Was kann ich tun, um gestochen scharfe Symbole auf den meisten Geräten und Browsern von heute zu unterstützen?

Bisher ist die beste Ressource, die ich finden konnte, war html5boilerplate, die die folgenden Dateien mit empfiehlt:

apple-touch-icon-114x114-precomposed.png 
apple-touch-icon-144x144-precomposed.png 
apple-touch-icon-57x57-precomposed.png 
apple-touch-icon-72x72-precomposed.png 
apple-touch-icon-precomposed.png 
apple-touch-icon.png 
favicon.ico # 32x32 

während noch keine Links zu ihnen in <head> Tag setzen.

Edit: eine andere Überlegung ist, dass ICO-Dateien kann speichern mehrere Bilder mit unterschiedlicher Auflösung in ihnen. Ist das nützlich oder unterstützt?

Antwort

13

Es gibt einige offizielle Ratschläge unter http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html, die Ihre Liste zu bestätigen scheinen.

Idealerweise sollte die Datei favicon.ico mehrere Auflösungen in der einen Datei enthalten, da aktuelle Browser dies jetzt nutzen können und ein 16 x 16-Symbol auf einem Retina-Bildschirm nie gut aussehen wird.

Microsoft empfiehlt jetzt anscheinend die Favicon.ico-Datei mindestens 16 × 16, 24 × 24, 32 × 32 und 64 × 64 enthalten.

ich vor kurzem ein kostenloses Online-Tool, das favicons wie diese an schaffen: http://iconifier.net

finden Sie in der Readme-Seite auf der Website für weitere Links auf die neuesten Informationen Favicon.

+0

Danke für Ihr Tool, ich habe es einfach mit großem Erfolg benutzt! Eine "vorkompostierte" Option wäre jedoch großartig, so dass man die Apple-Icon-Dateien für vorkomposierte Icons nicht manuell umbenennen müsste. Prost! –

+2

Sehr hilfreiches Werkzeug. Es ist großartig. Ich denke jedoch, es ist ziemlich ironisch, dass Sie kein Favicon für das Werkzeug verwenden. – Largo

+1

@ p11y es ist nicht immer gut, die nicht "vorkompo- nierten" Symbole so zu verwenden, als ob sie es wären. Sie sollen vollständig komponierte Icons sein, die auf dem Desktop/Home-Bildschirm gut aussehen. Wenn es viel Transparenz gibt, könnte es ein bisschen falsch aussehen. Ich denke, Apple-Geräte werden nicht vorkomposierte Icons erstellen, indem sie sie auf einen abgerundeten rechteckigen Hintergrund setzen und vielleicht einen "Glanz" -Effekt hinzufügen. –

Verwandte Themen