Favicons

[Matthias Scharwies]

Servus! Hallo Wolfgang, @AudioBibel

Dann hast du bestimmt passende Dateinamen??? Oder wie funktioniert das dann?

die liegen im Root-Verzeichnis der Website unter dem Dateinamen favicon.ico, Beispiel: http://www.jsr-hersbruck.de**/favicon.ico**

Es macht Sinn, sie unter diesem Namen abzulegen, weil Browser sie sowieso unter diesem Namen suchen und sonst das Error-Log des Webservers voll mit 404er-Fehlermedlungen ist 😀

Statt des Zusammenkopierens würde ich den Favicon-Generator anschmeißen[^1] und den die Drecksarbeit mit den ganzen Formaten, Dateien und Deklarationen machen lassen.

Hab ich beides ins Wiki übernommen. Besonders der Favicon-Checker ist nützlich (Da muss ich auf meiner eigenen Webseite auch noch was anpassen!)

Ja, bezüglich der verschiedenen Versionen wollte ich mich auch noch mal einschalten:

Das sieht in der index.htm dann so aus:

    <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72.png" />
    <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114.png" />
    <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144.png" />
    <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180.png" />
    <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120-precomposed.png" />
    <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152-precomposed.png" />

Diese Vielzahl an Icons ist vom anderen Blog-Beitrag vorgeschlagen worden. Die ersten 4 Icons beziehen sich aber auf ältere Iphones mit <iOS7. Die haben laut caniuse aber mittlerweile keine Verbreitung mehr.

Ich habe eine kleine Testseite gebastelt, mithilfe der man herausfinden kann, welcher Browser welche Datei lädt. Ich bin mit vier Dateien ausgekommen, aber dafür sieht es auf einem Windows-Tablet (wenn man die Webseite an den Start-Bildschirm anpinnt) schlecht aus (der nimmt die normale PNG (nicht-Apple)). Ich persönlich würde diese Konfiguration für meine Anwendungen weitestgehend so lassen, allerdings vielleicht noch die Auflösungen der Pixeldateien anpassen, evtl. kann die PNG noch höher aufgelöst werden.

@Julius Da habe ich mal ne Frage zu. Muss der apple-touch-icon.png so heißen oder reicht ein png mit dem rel-Attribut:

<link rel="icon" type="image/png" href="favicon.png" sizes="192x192">
<link rel="apple-touch-icon" href="favicon.png" sizes="192x192">

Theoretisch könnte man sich so Arbeit sparen, oder?

Herzliche Grüße

Matthias Scharwies