Hinzufügen eines Favicons zu einer statischen HTML-Seite

Question

Hinzufügen eines Favicons zu einer statischen HTML-Seite

Gefragt el 30 de Marsch, 2012: Wann wurde die Frage gestellt
1798546 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ich habe ein paar statische Seiten, die nur aus reinem HTML bestehen und die wir anzeigen, wenn der Server ausfällt. Wie kann ich ein Favicon, das ich erstellt habe (es ist 16x16px groß und liegt im selben Verzeichnis wie die HTML-Datei; es heißt favicon.ico), sozusagen als "Tab"-Symbol verwenden? Ich habe auf Wikipedia nachgelesen und mir ein paar Tutorials angesehen und habe folgendes implementiert:

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

Aber es will immer noch nicht funktionieren. Ich verwende Chrome, um die Seiten zu testen. Laut Wikipedia ist .ico das beste Bildformat, das auf allen Browsertypen läuft.

Update

Ich konnte nicht bekommen, diese lokal zu arbeiten, obwohl der Code prüft, wird es nur wirklich richtig funktionieren, wenn der Server begann die Website dienen. Versuchen Sie einfach, es auf den Server zu schieben und aktualisieren Sie Ihren Cache und es sollte gut funktionieren.

Gefragt el 30 de Marsch, 2012 von TheLegend

Answer 1

5 Antworten

Answer 2

1191voto

Hazy McGee Punkte 11972

Sie können ein .png-Bild erstellen und dann einen der folgenden Schnipsel zwischen den <head> Tags Ihrer statischen HTML-Dokumente:

<link rel="icon" type="image/png" href="http://stackoverflow.com/favicon.png"/>
<link rel="icon" type="image/png" href="https://example.com/favicon.png"/>

Beantwortet el 30 de Marsch, 2012 von Hazy McGee (11972 Punkte )

Answer 3

279voto

Codecraft Punkte 7971

Die meisten Browser erkennen favicon.ico aus dem Root-Verzeichnis der Website, ohne dass man es ihnen sagen muss; aber sie aktualisieren es nicht immer sofort mit einem neuen Verzeichnis.

Ich entscheide mich jedoch meist für das zweite Ihrer Beispiele:

<link rel='shortcut icon' type='image/x-icon' href='http://stackoverflow.com/favicon.ico' />

Beantwortet el 30 de Marsch, 2012 von Codecraft (7971 Punkte )

Answer 4

142voto

Eduardo Russo Punkte 3813

Damit Ihr Favicon in allen Browsern funktioniert, müssen Sie mehr als 10 Bilder in den richtigen Größen und Formaten haben.

Ich habe eine App erstellt ( faviconit.com ), damit die Leute nicht all diese Bilder und die richtigen Tags von Hand erstellen müssen.

Ich hoffe, es gefällt Ihnen.

Beantwortet el 16 de Januar, 2014 von Eduardo Russo (3813 Punkte )

Answer 5

69voto

ashleedawg Punkte 18497

Verwendungssyntax: _{<code>.ico</code> , <code>.gif</code> , <code>.png</code> , <code>.svg</code>}

Diese Tabelle zeigt, wie Sie die favicon in den wichtigsten Browsern. Die Standardimplementierung verwendet ein Link-Element mit einer rel Attribut im Dokument <head> um das Dateiformat und den Dateinamen/Speicherort anzugeben.

Hinweis die meisten Browser werden haben Vorrang vor einer favicon.ico Datei in der Root der Website (also Ignorieren von alle Icon-Link-Tags).

                                         Edge   Firefox   Chrome   I.E. Opera Safari  
 -------------------------------------- ------ --------- -------- ----- ----- ------ 
 <link rel="shortcut icon"               Yes    Yes       Yes      Yes   Yes     Yes
   href="http://example.com/myicon.ico">                          

 <link rel="icon"                        Yes    Yes       Yes      9     Yes     Yes
   type="image/vnd.microsoft.icon"                  
   href="http://example.com/image.ico">                        

 <link rel="icon" type="image/x-icon"    Yes    Yes       Yes      9     Yes     Yes
   href="http://example.com/image.ico">   

 <link rel="icon"                        Yes    Yes       Yes      11    Yes     Yes     
   href="http://example.com/image.ico"> 

 <link rel="icon" type="image/gif"       Yes    Yes       Yes      11    Yes     Yes
   href="http://example.com/image.gif">      

 <link rel="icon" type="image/png"       Yes    Yes       Yes      11    Yes     Yes
   href="http://example.com/image.png">     

 <link rel="icon" type="image/svg+xml"   Yes    Yes       Yes      Yes   Yes     No
   href="http://example.com/image.svg">

Unterstützung von Dateiformaten

Die folgende Tabelle veranschaulicht die Unterstützung der Bilddateiformate für die favicon :

                                         Animated                                
  Browser             ICO   PNG    GIF    GIF's   JPEG   APNG   SVG   
 ------------------- ----- ------ ------ ------- ------ ------ ------ 
  Edge                Yes   Yes    Yes    No      ?      ?      ?     
  Firefox             1.0   1.0    1.0    Yes     Yes    3.0    41.0  
  Google Chrome       Yes   Yes    4      No      4      No     No    
  Internet Explorer   5.0   11.0   11.0   No      No     No     No    
  Safari              Yes   4      4      No      4      No     No    
  Opera               7.0   7.0    7.0    7.0     7.0    9.5    44.0

Browser-Implementierung

In der nachstehenden Tabelle sind die verschiedenen Bereiche des Browsers aufgeführt, in denen Favicons angezeigt werden:

                      Address     Address bar 'Links'                       Drag to  
  Browser             Bar         drop-down     bar       Bookmarks   Tabs   desktop  
 ------------------- ------------ ----------- --------- ----------- ------ --------- 
  Edge                No            Yes         Yes       Yes         Yes    Yes      
  Firefox             until v12     Yes         Yes       Yes         Yes    Yes      
  Google Chrome       No            No          Yes       Yes         1.0    No       
  Internet Explorer   7.0           No          5.0       5.0         7.0    5.0      
  Safari              Yes           Yes         No        Yes         12     No       
  Opera               v7–12: Yes    No          7.0       7.0         7.0    7.0      
                      > v14: No

Icon-Dateien können sein 16×16 , 32×32 , 48×48 , oder 64×64 Pixel groß, und 8-Bit , 24-Bit , oder 32-Bit en Farbtiefe .

Die obigen Angaben sind zwar im Allgemeinen richtig, doch gibt es in bestimmten Situationen Abweichungen/Ausnahmen.

_{_{<img src="https://i.stack.imgur.com/KQJPC.png" alt="img">}} Ausführlichere Informationen finden Sie an der Quelle unter Wikipedia .

Aktualisierung: _{("mehr Infos")}

Siehe die "neuen" (2019) Kriterien von Google für Definieren Sie ein Favicon, das in den Suchergebnissen angezeigt wird .
Sie können (programmatisch oder manuell) abrufen Googles zwischengespeichertes Favicon para jede Domain mit einer URL wie z.B.: https://www.google.com/s2/favicons?domain=stackoverflow.com

Wenn Sie die obige URL direkt in einer <img> Tag zurück: " ".
Ich habe die realfavicongenerator.net Es ist sehr gründlich und generiert/anpasst jede mögliche Favicon-Variante, die Sie für maximale Kompatibilität benötigen könnten. (Wenn Sie jedoch ein einzeln Favicon-Bild, das ist vielleicht pas das richtige Werkzeug für Sie sein!) Für einfache Dateikonvertierung (z. B., PNG zu ICO usw.) Ich mag online-umwandlungsfrei.de .

Beantwortet el 15 de Dezember, 2018 von ashleedawg (18497 Punkte )

Answer 6

60voto

Farshid Punkte 4896

Konvertieren Sie Ihre Bilddatei in Base64-String mit einem Tool wie こん und ersetzen dann die YourBase64StringHere Platzhalter im untenstehenden Schnipsel mit Ihrer Zeichenfolge und fügen Sie die Zeile in Ihren HTML-Kopfabschnitt ein:

<link href="data:image/x-icon;base64,YourBase64StringHere" rel="icon" type="image/x-icon" />

Dies funktioniert zu 100 % in Browsern.

Beantwortet el 9 de Januar, 2016 von Farshid (4896 Punkte )

Hinzufügen eines Favicons zu einer statischen HTML-Seite

Update

Antworten

Verwendungssyntax: _{<sup><code>.ico</code> , <code>.gif</code> , <code>.png</code> , <code>.svg</code></sup>}

Unterstützung von Dateiformaten

Browser-Implementierung

Aktualisierung: _{<sup><em>("mehr Infos")</em></sup>}

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Hinzufügen eines Favicons zu einer statischen HTML-Seite

Update

Antworten

Verwendungssyntax: <sup><code>.ico</code> , <code>.gif</code> , <code>.png</code> , <code>.svg</code></sup>

Unterstützung von Dateiformaten

Browser-Implementierung

Aktualisierung: <sup><em>("mehr Infos")</em></sup>

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Verwendungssyntax: _{<sup><code>.ico</code> , <code>.gif</code> , <code>.png</code> , <code>.svg</code></sup>}

Aktualisierung: _{<sup><em>("mehr Infos")</em></sup>}