Julius: Headerimage mit responsivem SVG

Beitrag lesen

problematische Seite

Hallo Wolfgang, @AudioBibel

Die liegen nur im root-Verzeichnis rum. (habe die Test Seite einfach in ein Unterverzeichnis gepackt. Da eure Favicons nicht vorhanden sind, nimmt es sich das aus dem root.)

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.

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.

Man sollte sich auch die Frage nach der Relevanz stellen: Windows auf Tablets und Handys ist mangels marktanteil nicht relevant (im Browser wird das Favicon ja ordentlich angezeigt), für Androiden und iOS reicht dieses Apple-Touch-Icon in hoher Auflösung und für die Zukunftsfähigkeit eine SVG-Datei, zumal ich nicht glaube, dass es viele Leute gibt, die Webseiten auf ihrem Startbildschirm ablegen – und wenn, die relevanten Geräte sind ja bereits erschlagen.

In diesem Kontext vielleicht auch noch interessant: Favicons, Touch Icons, Tile Icons, etc. Which Do You Need?

Gruß
Julius



  1. Zusätzlich würde ich auch noch eine SVG-Datei einbinden: <link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any"> ↩︎