Moin.

Hier soll es nur um das Bereitstellen eines Favicons für aktuelle Browser auf den verschiedenen Plattformen gehen (Windows, Linux, macOS, iOS, Android).

In typischen Texten zum Thema werden umfangreiche Varianten zum Bereitstellen beschrieben.

Beispiel: https://wiki.selfhtml.org/wiki/Grafik/Favicon

Ich wollte mal ausprobieren, wie weit man allein mit folgender Zeile kommt (@protonenbeschleuniger wird mir bestimmt wieder "Mikrooptimierung!" vorwerfen

Auf
FF (macOS)
GC (macOS)
SA (iOS) (Hier habe ich zum Prüfen "Hinzufügen > Lesezeichen" gewählt)
funktioniert es.

Hat jemand von euch schonmal Ähnliches getestet oder kennt eine Seite, die sich einem systematischen Test widmet?

Der nächste Testschritt wäre, ein SVG statt des PNG einzubinden, weil SVG natürlich das überlegene Format ist.

Und gerade bei textuellen Logos wäre es auch praktisch, weil man keine Pfade, sondern direkt die Buchstaben angeben kann.

Aber ich tue mich mit der Handhabung von SVG für diesen Zweck leider noch schwer, vor allem wg. der diversen Wege Boxgrößen anzugeben (Attribut viewBox, Attribut width/height, CSS-Regeln, ...).

Und eine Hintergrundfarbe geht bei dem Element text auch nicht so einfach, weil es die Eigenschaft "background-color" nicht gibt. Ich weiß nicht, ob es bessere Wege gibt, eine Hintergrundfarbe zu realisieren, als die hier skizzierte.

Ein minimales Text-Logo-SVG wäre also ein weiteres Thema

https://codepen.io/fermion/pen/OvQxjr


Am Rande:
Weiß jemand wie man die in Safari für iOS die im Cache befindlichen Favicons löscht?

"Einstellungen > Safari > [x] Verlauf und Websitedaten löschen" hilft nicht.

In einem passenden Thread auf Stackoverflow gab es keine Antwort:
https://discussions.apple.com/thread/7721420

Auch die auf Force Refresh Favicon on Safari - Nurkholis Madjid genannte Lösung "Aufrufen der Seite im privaten Modus" wirkt leider nicht.

__________________

Ich habe noch nie mehr gemacht als das. Ich wüßte auch nicht warum ich ein Favicon für Smartphone ausliefern sollte.

Aber wenn man das wollte, hat das nichts mit Mikrooptimierung zu tun. Das ist dann der Fall, wenn die Einsparungen keinen Effekt haben, aber eine minimale Einsparung verursachen sollen.

@protonenbeschleuniger

Ich finde es sinnvoll, den extrem hoch auflösenden Smartphones ein hochaufgelöstes Icon bereitzustellen, welches angezeigt wird, wenn ein Nutzer ein Lesezeichen anlegt. Oder wenn er einen Homescreen-Eintrag einer Webadresse anlegt.

Zur Einsparung:

Du betrachtest offenbar vorrangig Dateigrößen oder Performance.

Ich nicht.

Ich halte sinnvolle Minimierung von Markup für ein gutes Mittel, eine Site besser wartbar (Fehlersuche, Ergänzung, Veränderung, etc.) zu machen.

Wenn ich Dich richtig verstehe, interessiert Dich das nicht mehr, seitdem Du ein CMS verwendest.

Da mit mit CMS noch Erfahrung fehlt, kann ich nicht beurteilen, wie stark sich auch bei CMS eine prägnanter Code auf die Wartbarkeit auswirkt.

__________________

Macht so etwas jemand?

Naja, mir sind die Geräte fremd und ich hab nicht den Eindruck, dass der Nutzer dort so etwas erwartet. Ich wusste bis jetzt nicht, dass es überhaupt möglich Lesezeichen anzulegen und kenne auch kaum Leute die so etwas bewußt auf dem Desktop machen (ausser wenn sie mal ein zwei Tage nicht Wissen, ob sie ein Produkt bei Amazon kaufen sollen und dafür ein Lesezeichen anlegen). Aber für so einen extremen Speziallfall das Markup aufzublähen um eine hochauflösendes Icon auszuliefern halte ich für überflüssig.

Nein, betrachte ich nicht, sondern das ist das was du erreichtst mit dem was du anderswo propagiert hast. Etwas kleinere Dateien und vielleicht ein paar Mikrosekunden beim Code, aber ansonsten hat es keinen positiven Effekt.
und das machst du eben nicht.

Wenn es so wäre würdest du nicht ständig behaupten dies oder jenes wäre aufgebläht oder enthielte unötiges. Weil aus genau dem Grund, ist dieses zusätzliches Markup i.d.R. vorhanden. Du hast aber an anderen Stellen wegen einem HTML Tag debatiert. Das hat alles nichts mit wartbar zu tun, das ist Mikrooptimierng auf Kosten der Wartbarkeit.

Absolut nicht und ich verstehe auch nicht, wie du so eine Schlußfolgerung ziehst. Wenn mich Code nicht halbwegs überzeugt benutze ich ihn nicht. Daher verwende ich auch ein CMS wo ich sehr viel selbst schrauben kann.

Was ist denn ein "prägnanter" Code? Ich dachte er soll wartbar sein.

@protonenbeschleuniger

Ich kann Dir keine Statistik über die Häufigkeit des Anlegens von Lesezeichen als Beweis liefern.
Aber allein schon die weltweiten Nutzungszahlen von Mobilgeräten versus Desktopgeräten, die in der Maxime "Mobile first" münden, genügen mir als Anlass.

Zur Wartbarkeit von Markup:

Du hast mich in einem anderen Thread bei einem konkreten Fall (Array) überzeugt, dass man Verkürzung von Code kritisch betrachten muss.

Hier im Thread geht es um eine Verkürzung von Code in Form von
mehreren Zeilen im head versus einer einzigen Zeile.

Möchtest Du also für die mehreren Zeilen argumentieren?

versus
Zum Vergleich der Wartbarkeit von 2 Codevarianten sollten wir in Zukunft dabei bleiben über konkrete Fälle zu sprechen.

Danke für die Aufklärung zu Deiner persönlichen Sicht auf Markup. Ich hatte Dich dann tatsächlich falsch verstanden. Ich dachte bisher, dass Du absolut nichts übrig hast für eine Verbesserung des von Wordpress ausgegebenen Markups, weil Du es als Zeitverschwendung betrachtest.

__________________

Nein. Im gegenteil ich nutze nur die:
Alles andere halte ich für Überflüssig. Es sei denn, du hast so ein tolles Icon das unbedingt überall toll aussehen muss.

Wie ich dir auch schon anderswo mehrfach erklärt habe, ich bin ein grosser Freund des kurzen Code. Aber ich kenne die Gefahr der Mikrooptimierung.

Mit welchen Browser kann man das überhaupt machen?

Ich hab mir das mal genauer auf meinem Samsunggerät angeschaut. Dort nutze ich normalerweise den Yandexbrowser. Da gibt es Lesezeichen, aber die Icons sind Winzigklein. Im Opera finde ich das nicht, es scheint keine Lesezeichen zu geben. Und bei "Internet" (irgendeine Samsung Software) gibt es zwar eine, die benutzt aber nicht das Icon. Im Chrome müsste ich mich erst mit meinem google Account anmelden, daher habe ich es nicht ausprobiert. Alles in allem glaube ich nicht das viele das benutzen.

Was aber alle Browser gemeinsam haben, sie zeigen beim normalen surfen kein favicon an. Nur einige tun das in manchen Situationen (wenn man die Tabsansicht aktiviert).

Daher besteht für mich keinerlei Notwendigkeit hier aktiv zu werden

Ich habe mir das Anlegen von Lesezeichen auf dem iPhone mit Safari jetzt auch mal genau angeschaut.

Habe mich leider irre leiten lassen.
Bisher hatte ich das Anlegen nur begonnen aber nicht vollendet.

Wenn man es das Anlegen beginnt, wir das Favicon angezeigt. Daher ging ich fest davon aus, dass es nach dem Anlegen auch in der Lesezeichenliste erscheint.

Dem ist nicht so.
Deine Skepsis war also berechtigt.

Bei Chrome auf dem iPhone jedoch wird das Favicon in der Lesezeichenliste angzeigt.

__________________