2014-12-22 7 views
16

Ich bin verwirrt darüber, was ist der einfachste Weg, um Favicons arbeiten auf den meisten Handys und Browsern zu bekommen.Minimale lebensfähige Favicon Code

1) Some sites legen nahe, dass es genug ist, zu verwenden:

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-180x180.png"> 

, die für iOS 8 funktionieren wird, und sollte von Android, Blackberry, Windows usw.

2) Other sites abgeholt werden darauf bestehen, dass explizit angegeben werden jede einzelne mögliche Favicon Muss:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> 
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"> 
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"> 
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"> 
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> 
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> 
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> 
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> 
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> 
<link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192"> 
<link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160"> 
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"> 
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> 
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> 
<meta name="msapplication-TileColor" content="#000000"> 
<meta name="msapplication-TileImage" content="/mstile-144x144.png"> 

3) This answer sagt, dass Sie gerade brauchen:

<!-- For IE 9 and below. ICO should be 32x32 pixels in size --> 
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]--> 

<!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. --> 
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"> 

<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. --> 
<link rel="icon" href="path/to/favicon.png"> 

Welche der von oben wird die meisten Browser/Handys mit dem Minimum an Aufwand decken?

+0

Für weitere Informationen auf Wikipedia: https://en.wikipedia.org/wiki/Favicon –

+5

Ich bin der Autor von RealFaviconGenerator, die "Lösung 2" in Ihrer Frage. RFG gibt nicht vor, dass Sie * all diese Symbole und HTML-Code benutzen müssen. Seine Rationalität ist: wenn Sie so viele Plattformen wie möglich unterstützen möchten und alles automatisch für Sie generiert wird (schließlich der Zweck von RFG), dann können Sie einfach alles auf Ihrer Site kopieren und einfügen. Komm schon, es ist schon voller JavaScript und CSS! :) Aber du bist nicht der erste, der bei so vielen Zeilen die Stirn runzelt. Eines Tages wird RFG ein leichteres Paket anbieten. –

Antwort

13

Der Code in Lösung 3 ist korrekt, aber veraltet. Precomposed Touch icons were deprecated in iOS 7 und Android Chrome does not support 196x196 icons anymore, but 192x192 (it really won't use anything above 192x192; vollständige Offenlegung: Ich bin der Autor dieses Artikels).

So:

<!-- For IE 9 and below. ICO should be 32x32 pixels in size --> 
<!--[if IE]><link rel="shortcut icon" href="/path/to/favicon.ico"><![endif]--> 

<!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. --> 
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png"> 

<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 192x192 pixels in size. --> 
<link rel="icon" href="/path/to/favicon.png"> 

Wenn Sie favicon.ico in der Wurzel der Website platzieren können, können Sie sogar seine Erklärung überspringen, da IE für /favicon.ico vereinbarungs sieht.

+1

Ausgezeichnet - und vielen Dank für RFG :-) –

+2

Dito auf das Dankeschön für RFG. Ein fantastisches Werkzeug. Ich stimme allerdings zu, es wäre noch besser, wenn es Möglichkeiten gäbe, leichtere Pakete zu erzeugen. Ich bin kein Fan davon, das Stammverzeichnis mit 30 Dateien zu verschwenden, nur um eine Randunterstützung für das zu bieten, was schließlich ein völlig unwesentlicher Aspekt der Seite ist. – Kal

+0

@Kal Danke! Ich gebe zu, ich mag es auch nicht, mein Root-Verzeichnis zu plündern. Die Entscheidung, Dateien in ein Unterverzeichnis zu schreiben, ist ein guter Kompromiss. –