Fregan zu den Touch Icons bei Firefox

[Aqua75]

Hallo,

ich verwende den Browser Firefox und wenn man ihn startet, werden die oft besuchten Seiten dort in Form von Touch Icons angezeigt.

Nun werden manche Seiten nur als selbstgebastelter Screenshot angezeigt und andere mit schönen Touch Icons bzw. Kachelgrafiken oder wie man es nennen soll.

Ein Bekannter von mir meinte nun, dass Firefox standartmäßig alle Seiten erstmal als Screenshot anzeigen würde und später erst die vorgegebene Icon-Grafik der betreffenden Seite.

Diese Beobachtung kann ich aber nicht teilen, weil z.B. von Twitter immer das korrekte Icon angezeigt wird und nie ein selbstgebastelter Screenshot.

Daher wollte ich mich hier erkundigen wie das bei Firefox genau funktioniert.

Vielen Dank im Voraus!

 

[cricru]

https://www.joomlaplates.com/forum/deutsches-forum/8143-logo-wichtige-seiten-firefox

Dort ist beschrieben wie man als Webmaster so ein Logo einbindet, wenn da keins vorhanden ist bastelt FF sich wohl selbst eins

 

[Hauro]

Es hängt von der Seite ab.

    <link rel="icon" sizes="144x144" type="image/png" href="[URL='https://www.computerbase.de/forum/view-source%3Ahttps%3A//www.wadoku.de/img/touch-icon-144x144.png']/img/touch-icon-144x144.png[/URL]"/>
    <link rel="icon" sizes="192x192" type="image/png" href="[URL='https://www.computerbase.de/forum/view-source%3Ahttps%3A//www.wadoku.de/img/touch-icon-192x192.png']/img/touch-icon-192x192.png[/URL]"/>
    <link rel="shortcut icon" type="image/png" href="[URL='https://www.computerbase.de/forum/view-source%3Ahttps%3A//www.wadoku.de/img/touch-icon-144x144.png']/img/touch-icon-144x144.png[/URL]"/>
    <link rel="apple-touch-icon" href="[URL='https://www.computerbase.de/forum/view-source%3Ahttps%3A//www.wadoku.de/img/touch-icon-144x144.png']/img/touch-icon-144x144.png[/URL]" />

Meine Startseite sieht aktuell so aus:

Bei Wadoku wird direkt das entsprechende Icon angezeigt, bei Anime no Tomodachi stimmt das Favicon nicht.

Es lässt sich auch eine andere Grafik von der Seite anzeigen.

1. Menü öffnen - die drei Punkte anklicken
2. Den Menü-Eintrag 'Bearbeiten' auswählen
3. 'Eine benutzerdefinierte Grafik verwenden...' anklicken
4. Die Adresse der Grafik von der Seite einfügen.
   Beispiel: https://www.computerbase.de/apple-touch-icon.png

 

[Aqua75]

OK, habe ich verstanden

Wie sieht das mit Vektordateien als Icongrundlage aus?
Ist dies möglich?
Dann wäre ja eigentlich nur eine Datei nötig, oder?

 

[Hauro]

Wie sieht das mit Vektordateien als Icongrundlage aus?

<link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any">

Wird nicht von allen Browsern unterstützt: SVG favicons | Can I Use ...

Siehe auch:
Favicon Standard - 2019 - svg, ico, png and dimensions? | stackoverflow

 

[2002Andreas]

Es geht dem User eigentlich nur um das Youtube Logo.

Weiteres hier:

#6

 

[Aqua75]

Es geht dem User eigentlich nur um das Youtube Logo.

Weiteres hier:

#6

Nein, sonst hätte ich hier nicht die Frage nach den Vektordateien gestellt.
Muss ich denn in beiden Foren alle Fragen gleich stellen?

 

[Aqua75]

In welchem Verzeichniss sollten die Icons abgelegt werden oder ist das egal?

 

[Hauro]

<link rel="icon" href="favicon.ico" type="image/ico">

Im oberen Beispiel im Ordner wo sich auch die Seite befindet.

<link rel="icon" sizes="144x144" type="image/png" href="/img/touch-icon-144x144.png"/>
<link rel="icon" sizes="192x192" type="image/png" href="/img/touch-icon-192x192.png"/>
<link rel="shortcut icon" type="image/png" href="/img/touch-icon-144x144.png"/>
<link rel="apple-touch-icon" href="/img/touch-icon-144x144.png" />

Hier unter 'img' der Seite.

Das href-Attribut gibt die URL der verlinkten Ressource an. Eine URL kann absolut oder relativ sein. von daher ist der Ablage-Ort egal.

 

[Aqua75]

OK, verstehe.

Schau mal, kannst Du in diesem Code einen Fehler entdecken?:

<link rel="icon" type="image/png" sizes="16x16" href="/resources/dist/img/icons/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/resources/dist/img/icons/favicon-32x32.png">
<link rel="icon" type='image/png' sizes='256x256' href="/resources/dist/img/icons/android-chrome-256x256.png"/>

<link rel="icon" href="/resources/dist/img/icons/favicon.svg" type="image/svg+xml" />
<link rel="shortcut icon" href="/resources/dist/img/icons/favicon.svg" type="image/svg+xml" />

<link rel="manifest" href="/resources/dist/img/icons/site.webmanifest">
<link rel="mask-icon" href="/resources/dist/img/icons/safari-pinned-tab.svg" color="#5bbad5">

 

[Hauro]

Nach dem href-Attribute müsste die Ordner-Struktur so sein:
resources > dist > img > icons

Wird das Icon angezeigt, wenn die URL (.../resources/dist/img/icons//favicon-16x16.png) direkt aufgerufen wird?

Wenn die URL (zum Beispiel: https://www.wadoku.de/img/touch-icon-144x144.png) direkt aufgerufen wird, muss das Icon angezeigt werden. Falls nicht stimmt etwas nicht.

 

[Aqua75]

Wird das Icon angezeigt, wenn die URL (.../resources/dist/img/icons//favicon-16x16.png) direkt aufgerufen wird?

Ja.

Wenn die URL (zum Beispiel: https://www.wadoku.de/img/touch-icon-144x144.png) direkt aufgerufen wird, muss das Icon angezeigt werden. Falls nicht stimmt etwas nicht.

Es wird zwar angezeigt aber es erscheint nicht in der Website und wird vom Browser auch nicht erfasst.

 

[Hauro]

Habe es gerade mal lokal getestet. Es wird immer das kleinste Icon genommen. Auch das SVG-Image von ComputerBase wurde als Favicon der Seite angezeigt:

<link rel="icon" type="image/svg+xml" color="#2C5B9C" href="https://www.computerbase.de/img/mask-icon.svg" />

'shortcut' wird ignoriert.

Übrigens fehlt bei '.../favicon-16x16.png">', '.../favicon-32x32.png">', '... color="#5bbad5 >' und '...
site.webmanifest' 'der Slash (/>).

 

[Aqua75]

Ich habe inzwischen mal einen neuen Quellcode zusammengebastelt und glaube der funktioniert und enthält alles was nötig ist:

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" href="/favicon.png" sizes="96x96">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

Was meinst Du dazu?
Muss ja nicht immer so lang sein.

Die SVG-Icons werden nicht von allen Browsern unterstützt, daher habe ich sie weggelassen.

 

[Hauro]

Passt. ComputerBase hat auch nicht mehr:

    <link rel="icon" type="image/png" href="/favicon.png">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <link rel="mask-icon" href="/img/mask-icon.svg" color="#2c5b9c">

 

[Aqua75]

Ich dachte das shortcut icon ist auch notwendig für die Favicon-Anzeige Oben im Browser-Tab.

 

[Hauro]

Link types | MDN Web Docs

The shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore.

Bin mir nicht sicher, aber nur noch der Internet Explorer verwendet 'shortcut icon'.

Favicon Generator. For real. > Check your favicon