Ich habe ein paar für mich ungeklärte Punkte zum Favicon:
1. MUSS das Favicon über einen "link"-Tag eingebunden werden, wenn es als .ico-Datei im Wurzelverzeichnis abgelegt ist?
Hier steht: "Automatisch erkannt wird das Favicon, wenn es unter dem festen Dateinamen favicon.ico im Wurzelverzeichnis einer Domäne liegt." 3 Zeilen weiter unten heißt es dann: "Liegt das Favicon im Wurzelverzeichnis, ist es wie oben angeführt via /favicon.ico zu referenzieren.".
Das widerspricht sich doch!?
2. auf der gleichen Seite im Abschnitt "Favicons für mobile Geräte" steht, dass ich für die verschiedenen Geräte/Browser insgesamt 4 verschiedene Icons benötige:
- favicon.ico (ältere Browser)
- favicon.png (aktuelle Desktop-Browser)
- apple-touch-icon.png (heißt zwar "apple" ist aber anscheinend für sämtliche mobilen (Touch?)-Browser gedacht)
- mstile.png (Icon-Kachel auf Win8/Win10)
Was mich verwirrt - es ist immer die rede von MUSS/SOLLTE im Rootverzeichnis liegen obwohl alle Angaben doch per "href" oder "content" auf den Speicherplatz der Favicon-Datei verweisen. Nach meinem Verständnis kann ich die Datei dann doch beliebig ablegen, solange die Pfadangabe korrekt verweist...?
3. eine weitere Frage habe ich zu den zahlreich vorhandenen Favicon-Generatoren. Wenn ich ein favicon generiere, kommt dabei teilweise sowas raus:
Insgesamt sind in diesem Fall 25 favicon-Dateien vom Generator erstellt worden.
Ist dieser Umfang wirklich notwendig oder skalieren die Browser nicht benötigte Auflösungen einfach herunter, so dass die Maximalauflösungen ausreichen sollten - so ist es in DIESEM ARTIKEL beschrieben. (einziger Nachteil wäre dann ja, dass sich ggf. die Ladezeit der Seite etwas erhöht?)
Hier steht auch, dass das Generieren über so einen Generator eigentlich nicht notwendig ist. Es wird empfohlen eine 32x32 große png-Grafik in einem Grafikprogramm zu erstellen und über einen Konverter ins .ico-Format zu konvertieren.
Damit hätte ich doch aber (siehe oben, Punkt 2) keine Lösung für mobile Browser, oder?
Wie macht ihr das mit den Favicons? Komplette Bandbreite oder kurz und knapp?
Danke im voraus, für Hinweise und Tipps!!
1. MUSS das Favicon über einen "link"-Tag eingebunden werden, wenn es als .ico-Datei im Wurzelverzeichnis abgelegt ist?
Hier steht: "Automatisch erkannt wird das Favicon, wenn es unter dem festen Dateinamen favicon.ico im Wurzelverzeichnis einer Domäne liegt." 3 Zeilen weiter unten heißt es dann: "Liegt das Favicon im Wurzelverzeichnis, ist es wie oben angeführt via /favicon.ico zu referenzieren.".
Das widerspricht sich doch!?
2. auf der gleichen Seite im Abschnitt "Favicons für mobile Geräte" steht, dass ich für die verschiedenen Geräte/Browser insgesamt 4 verschiedene Icons benötige:
- favicon.ico (ältere Browser)
- favicon.png (aktuelle Desktop-Browser)
- apple-touch-icon.png (heißt zwar "apple" ist aber anscheinend für sämtliche mobilen (Touch?)-Browser gedacht)
- mstile.png (Icon-Kachel auf Win8/Win10)
Was mich verwirrt - es ist immer die rede von MUSS/SOLLTE im Rootverzeichnis liegen obwohl alle Angaben doch per "href" oder "content" auf den Speicherplatz der Favicon-Datei verweisen. Nach meinem Verständnis kann ich die Datei dann doch beliebig ablegen, solange die Pfadangabe korrekt verweist...?
3. eine weitere Frage habe ich zu den zahlreich vorhandenen Favicon-Generatoren. Wenn ich ein favicon generiere, kommt dabei teilweise sowas raus:
HTML:
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">Insgesamt sind in diesem Fall 25 favicon-Dateien vom Generator erstellt worden.
Ist dieser Umfang wirklich notwendig oder skalieren die Browser nicht benötigte Auflösungen einfach herunter, so dass die Maximalauflösungen ausreichen sollten - so ist es in DIESEM ARTIKEL beschrieben. (einziger Nachteil wäre dann ja, dass sich ggf. die Ladezeit der Seite etwas erhöht?)
Hier steht auch, dass das Generieren über so einen Generator eigentlich nicht notwendig ist. Es wird empfohlen eine 32x32 große png-Grafik in einem Grafikprogramm zu erstellen und über einen Konverter ins .ico-Format zu konvertieren.
Damit hätte ich doch aber (siehe oben, Punkt 2) keine Lösung für mobile Browser, oder?
Wie macht ihr das mit den Favicons? Komplette Bandbreite oder kurz und knapp?
Danke im voraus, für Hinweise und Tipps!!
