it-swarm.com.de

"/favicon.ico" vs <link rel = "Verknüpfungssymbol" />

Frage

  • Was ist die beste Vorgehensweise, um ein favicon auf einer Website zu erstellen?
  • und ist eine .ico -Datei mit sowohl 16x16- als auch 32x32-Bildern besser als eine .png -Datei mit nur 16x16?
  • Könnte die heute bevorzugte Methode nicht in recht alten Browsern funktionieren?

Methode 1

Das Platzieren einer Datei mit dem Namen favicon.ico im Hauptverzeichnis ist eine Möglichkeit. Der Browser fordert diese Datei immer an. Sie können das in den Apache-Protokolldateien sehen.

Methode 2

HTML-Tag im Abschnitt <head>:

<link rel="shortcut icon" href="/images/favicon.png (or ico?)" type="image/x-icon" />
76
bytecode77

Es gibt verschiedene Möglichkeiten, ein Favicon zu erstellen. Der beste Weg für Sie hängt von verschiedenen Faktoren ab:

  • Die Zeit, die Sie für diese Aufgabe verwenden können. Für viele Menschen ist dies "so schnell wie möglich".
  • Die Anstrengungen, die Sie tun möchten. Sie können beispielsweise ein 16x16-Symbol von Hand zeichnen, um bessere Ergebnisse zu erzielen.
  • Spezifische Einschränkungen, z. B. die Unterstützung eines bestimmten Browsers mit ungeraden Spezifikationen.

Erste Methode: Verwenden Sie einen Favicon-Generator

Wenn Sie die Arbeit gut und schnell erledigen möchten, können Sie einen favicon-Generator verwenden. Dieser erstellt die Bilder und den HTML-Code für alle gängigen Desktop- und Mobile-Browser. Vollständige Offenlegung: Ich bin der Autor dieser Website.

Vorteile einer solchen Lösung: Sie ist schnell und alle Überlegungen zur Kompatibilität wurden bereits für Sie angesprochen.

Zweite Methode: Erstellen Sie eine favicon.ico (nur Desktop-Browser).

Wie Sie vorschlagen, können Sie eine favicon.ico-Datei erstellen, die 16x16- und 32x32-Bilder enthält (beachten Sie, dass Microsoft empfiehlt 16x16, 32x32 und 48x48 ).

Dann deklarieren Sie es in Ihrem HTML-Code:

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">

Diese Methode funktioniert mit allen alten und neuen Desktop-Browsern. Die meisten mobilen Browser werden das Favicon jedoch ignorieren.

Ihr Vorschlag, die favicon.ico-Datei im Stammverzeichnis zu platzieren und nicht zu deklarieren: Vorsicht, obwohl diese Technik für die meisten Browser geeignet ist, ist sie nicht zu 100% zuverlässig. Beispielsweise kann Windows Safari es nicht finden (vorausgesetzt: Dieser Browser ist unter Windows irgendwie veraltet, aber Sie bekommen den Punkt). Diese Technik ist nützlich, wenn sie mit PNG-Symbolen kombiniert wird (für moderne Browser).

Dritte Methode: Erstellen Sie ein favicon.ico, ein PNG-Symbol und ein Apple Touch-Symbol (alle Browser).

In Ihrer Frage erwähnen Sie nicht die mobilen Browser. Die meisten von ihnen ignorieren die favicon.ico-Datei. Obwohl Ihre Website für Desktop-Browser vorgesehen ist, besteht die Möglichkeit, dass Sie mobile Browser nicht gänzlich ignorieren möchten.

Sie erreichen eine gute Kompatibilität mit:

  • favicon.ico, siehe oben.
  • Ein 192x192-PNG-Symbol für Android Chrome
  • Ein 180 x 180-Apple-Touch-Symbol (für iPhone 6 Plus; jedes andere Gerät wird es bei Bedarf verkleinern).

Erkläre sie mit 

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png" sizes="192x192">
<link rel="Apple-touch-icon" sizes="180x180" href="/path/to/icons/Apple-touch-icon-180x180.png">

Dies ist nicht die ganze Geschichte, aber in den meisten Fällen gut genug.

124
philippe_b

Ich benutzte https://iconifier.net Ich lud mein Image hoch, lud die Zip-Datei herunter, fügte Bilder zu meinem Server hinzu, folgte den Anweisungen auf der Website und fügte die Links zu meiner index.html hinzu und es funktionierte . Mein Favicon wird jetzt auf meinem iPhone in Safari angezeigt, wenn "Zum Startbildschirm hinzufügen"

3
Hblegg
  1. sie können mit dieser Website für Generate favin.ico arbeiten.
  2. Ich empfehle das .ico-Format, da das png mit Methode 1 nicht funktioniert und ico mehr Details haben könnte!
  3. beide Methoden funktionieren mit allen Browsern, aber wenn es automatisch funktioniert, geben Sie einen Code dafür ein? Ich denke, Methode 1 ist besser.
3
amir2h

Ich denke, alles, was am wichtigsten ist, wurde bereits gesagt ... Ich möchte nur hinzufügen, dass Sie mit dieser Deklaration ein bewegliches GIF anstelle von favicon setzen können:

<link rel="shortcut icon" href="img/icon.gif" />

Dies geschieht auf einigen Seiten . Durch die Wirkung des moving-Favicons hebt sich die Karte dieser Website von den anderen Karten ..__ ab. Leider wird dieses Verhalten und diese Eigenschaft von keinem der Browser garantiert. Sogar Firefox, an dem ich es eines Tages beobachtete, zeigte am zweiten Tag ein standard leeres Symbol anstelle einer GIF für dieselbe Seite an.

0
simhumileco