Hinzufügen eines Favicons zu einer statischen HTML-Seite

641

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 16 x 16 Pixel groß und befindet sich im selben Verzeichnis wie die HTML-Datei; es heißt favicon.ico) sozusagen als "Tab" -Symbol einfügen? Ich habe auf Wikipedia nachgelesen und 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 verwende 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 es 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.

html static favicon Die Legende
quelle
Wem sagst du keinem deiner Freunde, dass er es auf einem anderen System für dich überprüfen soll? Das gleiche Problem ist, dass einer meiner Kunden mein System gut anzeigt und er sich darüber beschwert, dass Favicon nicht angezeigt wird. Ich verwende meistens das erste Beispiel von dir und es ist richtig. viel Glück.
mt
3
Mögliches Duplikat von Wie füge ich ein Browser-Tab-Symbol (Favicon) für eine Website hinzu?
Michał Perłakowski
Ihr Beispiel funktioniert jetzt in Chrome.
Damjan Pavlica
Interessanterweise hat die Live-Website das Favicon einwandfrei bereitgestellt, aber wenn die Datei lokal angezeigt und nicht über einen lokalen Server bereitgestellt wurde (b / c ist es eine einfache statische Site - ja!), Wurde das Favicon nicht angezeigt. Im Nachhinein ist es sinnvoll, dass Server es automatisch bereitstellen. Durch Hinzufügen <link rel="icon" type="image/x-icon" href="favicon.ico">zu head(neben den 32, 16 und 180 Favicon-Varianten link) wurde das Problem lokal behoben. Da ich links für die größeren Symbolgrößen und das Manifest eingefügt hatte, habe ich nicht zweimal darüber nachgedacht, warum ich favicon.iconicht aufgetaucht bin! :-)
SherylHohman

Antworten:

931

Sie können ein PNG-Bild erstellen und dann eines der folgenden Snippets zwischen den <head>Tags Ihrer statischen HTML-Dokumente verwenden:

<link rel="icon" type="image/png" href="/favicon.png"/>
<link rel="icon" type="image/png" href="https://example.com/favicon.png"/>
Hazy McGee
quelle
3
Haben Sie versucht, "Verknüpfungssymbol" in rel = für Ihre ico-Links einzufügen und ein / vor favicon.ico auf beide zu setzen, nur um anzugeben, dass es sich im Webroot-Verzeichnis befindet?
Hazy McGee
1
yip hat das auch versucht .. man lol ich bewerte ich werde alles neu starten und dann versuchen
hochzufahren
5
Ich schwöre - ich hatte die gleichen Probleme nach dem Hinzufügen des Codes - es dauerte vielleicht einen Tag, bis der Browser das Symbol anstelle des grauen Kästchens anzeigte, das er normalerweise hat - versuchen Sie, den Browser-Cache-Verlauf usw. zu sichern. Und wenn Sie meinen Code kopiert haben, stellen Sie sicher, dass Sie Ändern Sie example.com in Ihre Domain lol
Hazy McGee
2
Es gibt ein redundantes / in der obersten Zeile href Argument. Sobald ich es entfernt habe, funktioniert es wie ein Zauber. Sollte sein: <link rel = "Verknüpfungssymbol" href = "favicon.png" type = "image / png">
drpawelo
4
w3.org/2005/10/howto-favicon sagt, dass ein profileAttribut in das headTag aufgenommen werden soll ... ist das notwendig?
Rakib
228

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

Normalerweise gehe ich jedoch zum zweiten Ihrer Beispiele:

<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
Codecraft
quelle
Muss es vor den Metadaten oder den Skript-Tags liegen? oder kein Problem
TheLegend
2
Solange es sich im Abschnitt <head> befindet, sollte es keine Rolle spielen - da es nicht auf etwas anderes angewiesen ist, um zu funktionieren.
Codecraft
126

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 ( faviconit.com ) erstellt, damit die Leute nicht alle diese Bilder und die richtigen Tags von Hand erstellen müssen.

Hoffe du magst es.

Eduardo Russo
quelle
6
Liebte die App, kein bs - direkt dazu, und das Bild kann bearbeitet werden, bevor alle Favoriten +1 für Sie erstellt werden, um mir ein paar Zeit zu sparen :)
SidOfc
1
Einverstanden, das ist eine tolle App. Obwohl ich nicht denke, dass all diese Bildgrößen ziemlich notwendig erscheinen, finde ich es toll, dass sie und das erforderliche Markup usw. generiert werden. Danke!
Andrhamm
In der Tat eine großartige App: +1:. Hat viel geholfen o /
Renato Gomes
1
Aber es ist proprietär.
Strg-Alt-Delor
Es funktioniert nicht, gibtWhoops, looks like something went wrong.
Daka
68

Folgendes funktioniert für mich ...

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

Konvertieren Sie Ihre Image - Datei auf Base64 - String mit einem Tool wie diese und dann die ersetzen YourBase64StringHerePlatzhalter in der unten stehenden Snippet mit der Zeichenfolge und die Zeile in Ihrem HTML - Kopfteil setzen:

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

Dies funktioniert zu 100% in Browsern.

Farshid
quelle
3
Ich habe ein anderes Tool gefunden, das die Konvertierung in JavaScript durchführt, ohne Daten auf den Server zu übertragen: jpillora.com/base64-encoder Außerdem werden mehrere Dateien per Drag & Drop verarbeitet. Speichern Sie die Seite, um sie lokal zu verwenden.
behandeln
1
imho, beste Lösung, weil es die "statische HTML" -Seite berücksichtigt und vollständig in sich geschlossen im Dokument ist.
Buffalo Rabor
1
Beste Lösung. Funktioniert auch mit PNG-Dateien. <link href = "data: image / png; base64, YourBase64StringHere" rel = "icon" type = "image / png" />
Rolf von Sachsen
1
Dadurch wird jeder Seite eine lange Zeichenfolge hinzugefügt. Verwenden Sie inline base64 für kleine Bilder, die selten an den Benutzer gesendet werden.
frodeborli
Auf diese Weise wird Ihr Favicon nie zwischengespeichert. Sie senden jedes Mal die gesamte Zeichenfolge an den Client. IHMHO verwendet eine URL, und daher fühlt sich der Browser-Cache "sauberer / besser" an
Michiel,
34

Verwendung Syntax: .ico, .gif, .png,.svg

Diese Tabelle zeigt, wie Sie die faviconin den wichtigsten Browsern verwenden. Die Standardimplementierung verwendet ein Verknüpfungselement 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.icoDatei im Stammverzeichnis der Website Vorrang einräumen (daher werden alle Symbol-Link-Tags ignoriert ).

                                           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">

Unterstützung für Dateiformate

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 eine Größe von 16 × 16 , 32 × 32 , 48 × 48 oder 64 × 64 Pixel und eine Farbtiefe von 8 Bit , 24 Bit oder 32 Bit haben .

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

img Den vollständigen Artikel finden Sie an der Quelle auf Wikipedia.

Update: ("mehr Infos")

ashleedawg
quelle
15

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.

Tanveer Shaikh
quelle
1
Das ist gut; Es ist sowieso sehr schwer, eine alte Version von Chrome zu installieren / zu behalten
Ben Leggiero
14

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

Beispiel:

<head>
<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">
...
Rahul Desai
quelle
8 
<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"/>
shilovk
quelle
7 
<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

Anand Dwivedi
quelle
4
Während dies möglicherweise funktioniert, können Sie image / png nicht als MIME-Typ verwenden - da dies falsch ist, wenn Sie .ico
zanderwar
5

Ich kenne seinen älteren Beitrag, 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 im Stammverzeichnis ab.

Cyclotron3x3
quelle
4

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

Sie können der Seite vorher nichts wiedergeben:

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

lädt ico nicht

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

funktioniert gut

bart2puck
quelle
3
Dies liegt daran, dass es sich im Kopfbereich eines HTML-Dokuments befinden soll und von den meisten Browsern ignoriert wird, wenn dies nicht der Fall ist.
Eric Sebasta
Ja, ich wollte das hier nur einfügen, falls jemand auf ein Problem stößt. Mein Problem war, dass "Hallo" ein Debug-Code war und mich ein bisschen ratlos machte.
Bart2puck
3

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

dmx
quelle
2

Beachten Sie, dass, wenn Ihre Site wie folgt ausgeführt wird subfolder:

http://localhost/MySite/

Sie müssen dies berücksichtigen. Wenn Sie dies über eine ASP.NETApp tun, müssen Sie lediglich ein ~vor der URL einfügen:

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

Gemäß dem OP-Update wurde es nicht lokal angezeigt, aber gemäß dem OP-Update war es in Ordnung, nachdem ich es auf den Server hochgeladen hatte.

Da dies eine einfache, statische HTML-Website ist, habe ich den Luxus, daran zu arbeiten, ohne einen lokalen Webserver zu betreiben.
Ein Webserver stellt das Favicon, falls vorhanden, standardmäßig automatisch bereit.

Wenn jedoch kein Webserver ausgeführt wird, liest der Browser selbst nicht nur das Verzeichnis, in dem nach zusätzlichen Dateien gesucht wird, z. B. favicon.ico, es sei denn, es ist im HTML-Dokument aufgeführt.

Also, während ich die folgenden Elemente im headTag hatte: 

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">

Ich habe auch keine Referenz für plain 'ol beigefügt favicon.ico.
Obwohl die favicon.icoDatei zusätzlich zu den oben aufgeführten Bildern enthalten war.

Einmal habe ich folgende Zeile hinzugefügt: 

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

Es wurde auch in meinem Browser angezeigt, wenn ich die lokale Datei anzeigte, auch wenn sie nicht über einen lokalen Server bereitgestellt wurde.

Das Symbol wurde also gut angezeigt, wenn es auf dem Live-Server ausgeführt wurde, jedoch nicht lokal.

Ich erwähne dies ausdrücklich, weil der von mir verwendete Favicon-Generator freundlicherweise den Code, die Symbole, das Manifest und die Anweisungen zur Verfügung gestellt hat. Obwohl das favicon.icoBild enthalten war, enthielt es kein <link>Code für diese Datei im Code, der dem htmlDokument hinzugefügt werden sollte .
Ich vermute, dass Dienstannahmen favicon.icostandardmäßig automatisch von allen Browsern bereitgestellt und verwendet werden, sodass nur die "alternativen" Versionen explizit zum Head-Tag hinzugefügt werden mussten.
Offensichtlich denken sie nicht daran, dass wir beim lokalen Anzeigen von Dateien (auch bekannt als nicht lokale Bereitstellung) nicht daran interessiert sind, das Favicon zu sehen?

SherylHohman
quelle
0

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

Étienne Bersac
quelle
Das ist nicht wirklich eine Antwort, sondern ein Kommentar . (Siehe " Wie man
antwortet
0

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

subindas pm
quelle
-2

Ich habe gerade ein PNG verwendet. Stellen Sie sicher, dass Sie keinen weißen Hintergrund entfernen. sorgt für eine bessere Ikone

Tom
quelle