Favoriten in Safari

[schnobbel]

Wenn ich bei Safari die Favoritenseite aufrufe, werden mir diverse Seiten mit ihren Icons angeboten.

Ich habe eine eigene Seite am Start und habe dieser ihr Icon mit auf den Weg gegeben. Dieses sehe ich auch, wenn ich sie aufrufe. Links von der URL erscheint dieses Icon wie gewünscht.
Nicht so in den "Favoriten" bzw. "Häufig besucht". Dort ist das Icon nicht zu finden, sondern nur initial der 1. Buchstabe der URL in Großschrift in weiß auf grauem Hintergrund.

Es wäre doch schön, wenn ich doch auch meine eigene Seite deutlicher "leuchten" sehen würde.
Der Link funktioniert ja, aber das visuelle Icon mit Wiedererkennungswert fehlt mir.

So weit verstanden?
Anbei ein Beispiel


schnobbel

 

[Froyo1952]

Das funktioniert unter Safari nicht. Google Chrome kann das aber.

 

[schnobbel]

Das heißt?
Wie haben es "die anderen" gemacht, dass ihre Icons zu sehen sind?

 

[giesbert]

Natürlich kann Safari das, gerade mal mit einer meiner Seiten getestet. Nur: ich weiß nicht mehr, was ich da genau gemacht habe ;-). Aber ich hab das seinerzeit via Google gefunden …

Das wird wohl daran liegen, dass das Favicon in einer bestimmten Auflösung vorliegen muss. Ich hab das Favicon in 5 Versionen auf dem Server:

apple-touch-icon-ipad.png (72 x 72)
apple-touch-icon-iphone.png (57 x 57)
apple-touch-icon-iphone4.png (114 x 114)
apple-touch-icon.png (57 x 57)
favicon.ico (16 x 16)

Von denen ich allerdings, wie ich gerade sehe, nur 4 im Header referenziere:

    <link rel="shortcut icon" href="/inc/favicons/apple-touch-icon-iphone.png">
    <link rel="apple-touch-icon" href="/inc/favicons/apple-touch-icon-iphone.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/inc/favicons/apple-touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/inc/favicons/apple-touch-icon-iphone4.png">

Ich vermute mal, für die Favoriten-Ansicht braucht Safari das 114x114 große Icon.

 

[schnobbel]

Zunächst einmal DANKE für die wörtliche Verbesserung von Icon nach Favicon. Das ist korrekter und dabei sollte man auch bleiben.

Ich habe nun mal bei meinem WebseitenBaukasten nachgeschaut. Dort wird auf das Hinzufügen des Favicon hingewiesen. Jedoch habe ich nur die Möglichkeit zum 16x16-Format.
Das werde ich testen und bin dann mal gespannt, ob es denn tatsächlich daran gelegen hat.

 

[HäckMäc_2]

Schau mal hier:
https://www.web-design-und-so.de/webdesign/touch-icons-apple-android-windows/

Das dürfte für mehr Klarheit sorgen.

 

[giesbert]

Das ist eine ziemlich gute Site, um Favicons automatisch in allen benötigten Auflösungen generieren zu lassen, samt HTML-Code für den Header:

https://realfavicongenerator.net

Wer nicht möchte, dass die Favicon-Dateien das Root zumüllen, kann auch ein eigenes Verzeichnis angeben, in dem sie abgelegt werden.