Frage zum Wiki-Artikel „Grafik/Favicon“

[Matthias Scharwies]

Servus!

Sieht man mit Chrome 60 auf Android-Tablet Ok. Sieht man es denn auch auf einem Smartphone mit Android?

Ja, hab ein Samsung mit aktuellem Android. Dort ist es sowohl mit Chrome als auch mit Firefox zu sehen. Im Android-eigenen Browser habe ich auch bei anderen Seiten kein Favicon gesehen.

Ich hab mal einen Versuch gemacht:

neue Variante mit responsiver SVG-Grafik

Die Einstellungen sind alle mit CSS festgelegt und deshalb veränderbar.

Sieht ziemlich gut aus (Grafik gefällt mir in der Qualität sehr gut, in der Auswahl der Bildchen weniger; aber das kann man ja ändern).

Die waren auf die Schnelle aus der Wikipedia. Man könnte wie Gunnar vorgeschlagen hatte, die SVG-Grafik inline realisieren:

<header>
  <svg>
    <text>Überschrift</text>
    <image></image>
    <text 2. Zeile</text>
   <image href="2.Bild"></image>
  </svg>
</header>

Man könnte natürlich auch detailgenauere Grafiken einbinden.

Allerdings werden die Bildchen für die Kapitel- und Zip-Auswahl in meinem alten Android völlig verzerrt dargestellt (in die Höhe gezogen und sehr schmal).

Ich habe das auf die schnelle mit einem HTML-Attribut width="36" ohne Höhenangabe realisiert. Wenn man so etwas übernehmen wollte, wäre es besser dies im CSS festzulegen. Da es ja nur ein Icon ist, könnte man es auch komplett ins CSS auslagern:

a[href$= ".mp3"] {
  background-image: url(mp3.svg);
  width: 1.5em;
  height: 1.5em;
}

Der Selektor wählt alle Links auf mp3s aus und gibt ihnen dieses Hintergundbild in der gewünschten Größe, bei einer Änderung der Schriftgröße passt es sich an.

Herzliche Grüße

Matthias Scharwies