795 Stimmen

Hinzufügen eines Favicons zu einer statischen HTML-Seite

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.

16voto

Rahul Desai Punkte 14518

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

Beispiel:

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

15voto

Tanveer Shaikh Punkte 1678

Wenn das Favicon ein png-Bild ist, funktioniert es in älteren Versionen von Chrome nicht. In FireFox funktioniert es jedoch einwandfrei. Vergessen Sie auch nicht, den Cache Ihres Browsers zu löschen, wenn Sie an solchen Dingen arbeiten. Oft ist der Code in Ordnung, aber der Cache ist der wahre Übeltäter.

10voto

shilovk Punkte 9225
<link rel="shortcut icon" type="image/ico" href="http://stackoverflow.com/favicon.ico"/>
<link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>
<link rel="shortcut icon" type="image/png" href="http://stackoverflow.com/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>

8voto

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

Das hat bei mir funktioniert

5voto

Timo Punkte 2416

Minimales Favicon ohne "Typ"-Attribut

<link href='favicon.png' rel='icon' />

Sie können die Anführungszeichen auch weglassen, was aber in der Produktion nicht empfohlen wird.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X