it-swarm.com.de

Hinzufügen eines Favicons zu einer statischen HTML-Seite

Ich habe ein paar statische Seiten, die nur reines HTML sind und die wir anzeigen, wenn der Server ausfällt. Wie kann ich ein von mir erstelltes Favicon (es ist 16x16px und befindet sich im selben Verzeichnis wie die HTML-Datei; es heißt favicon.ico) sozusagen als "Tab" -Symbol einfügen? Ich habe bei Wikipedia nachgelesen, mir einige Tutorials angesehen und 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 benutze Chrome, um die Websites zu testen. Laut Wikipedia ist .ico das beste Bildformat, das auf allen Browsertypen läuft.

Aktualisieren

Ich konnte dies nicht lokal zum Laufen bringen, obwohl der Code auscheckt, dass er erst dann richtig funktioniert, wenn der Server die Site bedient. Versuchen Sie einfach, es auf den Server zu schieben und Ihren Cache zu aktualisieren, und es sollte gut funktionieren.

560
TheLegend

Sie können eine 16x16-PNG-Datei erstellen und dann einen der folgenden Ausschnitte zwischen den <head> -Tags Ihrer statischen HTML-Dokumente verwenden:

<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>
822
Hazy McGee

Die meisten Browser rufen favicon.ico aus dem Stammverzeichnis der Site auf, ohne dass dies mitgeteilt werden muss. aber sie aktualisieren es nicht immer sofort mit einem neuen.

Normalerweise gehe ich jedoch zum zweiten Ihrer Beispiele über:

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

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

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

Hoffe du magst es.

115
Eduardo Russo

Folgendes funktioniert für mich ...

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

Konvertieren Sie Ihre Bilddatei in eine Base64-Zeichenfolge mit einem Tool wie this und ersetzen Sie dann den YourBase64StringHere -Platzhalter im folgenden Snippet durch Ihre 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.

34
Farshid

Verwendungssyntax: .ico, .gif, .png, .svg

In dieser Tabelle wird die Verwendung von favicon in gängigen Browsern gezeigt. Die Standardimplementierung verwendet ein Linkelement mit einem rel-Attribut im Abschnitt des Dokuments, um das Dateiformat sowie den Dateinamen und den Speicherort anzugeben.

Beachten Sie, dass die meisten Browser einer favicon.ico -Datei Vorrang einräumen, die sich im Stammverzeichnis der Website befindet (daher ignorieren beliebige 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     Yes     
   href="http://example.com/image.svg">                                                     

Dateiformat-Unterstützung

Die folgende Tabelle zeigt die Unterstützung des Bilddateiformats für 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

Die folgende Tabelle zeigt die verschiedenen Bereiche des Browsers, 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                                                      

Symboldateien können 16 × 16 , 32 × 32 , 48 × 48 oder 64 × 64 Pixel groß und 8-Bit , 24-Bit oder 32-Bit in der Farbtiefe.

Obwohl die obigen Informationen im Allgemeinen korrekt sind, gibt es in bestimmten Situationen einige Abweichungen/Ausnahmen.

Den vollständigen Artikel finden Sie unter the source auf Wikipedia.

20
ashleedawg

Wenn es sich bei dem Favicon um ein PNG-Bild handelt, funktioniert es in älteren Chrome-Versionen nicht. In FireFox funktioniert es jedoch einwandfrei. Vergessen Sie auch nicht, Ihren Browser-Cache zu leeren, während Sie an solchen Dingen arbeiten. Oft ist Code in Ordnung, aber der Cache ist der eigentliche Schuldige.

15
Tanveer Shaikh

Wie von W3.org empfohlen , können Sie das Attribut rel verwenden, um dies zu erreichen.

Beispiel:

<head>
<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">
...
14
Rahul Desai
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
 <link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>

Das hat bei mir funktioniert

7
Anand Dwivedi
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>
7
shilovk

Ich kenne seinen älteren Post, poste aber immer noch für jemanden wie mich. Das hat bei mir funktioniert

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

legen Sie Ihr Favicon-Symbol in das Stammverzeichnis.

5
Cyclotron3x3

als zusätzliche Anmerkung, die eines Tages jemandem helfen kann.

Sie können nichts auf die Seite zurücksenden, bevor:

Hello
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>

wird ico nicht laden

<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
Hello

funktioniert gut

4
bart2puck

Ich habe convert -resize 16x16 img.png favicon.ico (auf Linux-Konsole) verwendet, um mein Image zu konvertieren, und <link rel="icon" href="images/favicon.ico" type="image/png" sizes="16x16"> zu meinem Header hinzugefügt, und alles funktioniert einwandfrei.

3
dmx

Wenn Sie das Favicon in den Ordner root/images mit dem Namen favicon.ico hinzufügen, wird der Browser das Favicon automatisch verstehen und als favicon.Ich habe es getestet und funktioniert. Ihr Link muss www.website.com/images/favicon.ico lauten

Weitere Informationen finden Sie in dieser Antwort:

Muss <link rel = "icon" href = "favicon.ico" type = "image/x-icon" /> angegeben werden?

1
Sarkhan

Beachten Sie Folgendes, wenn Ihre Website als subfolder ausgeführt wird:

http://localhost/MySite/

Sie müssen dies berücksichtigen. Wenn Sie dies von einem ASP.NETApp aus tun, müssen Sie lediglich einen ~ vor der URL einfügen:

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

Versuchen Sie, den <link rel="icon" type="image/ico" href="images/favi.ico"/> zu verwenden.

0
subindas pm

Beachten Sie, dass FF ein Symbol mit einem redundanten // in einer URL wie /img//favicon.png nicht laden kann. Getestet auf FF 53. Chrome ist OK.

0
Étienne Bersac