Wie bekomme ich meinen Seitentitel mit einem Symbol?

73

Ich möchte, dass das Logo meiner Site im Symbolbereich des Titels und nicht im weißen Standarddokument angezeigt wird. Genau so, wie es der Stapelüberlauf hat.

html icons littlechris
quelle

Antworten:

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

Fügen Sie dies Ihrem HTML-Kopf hinzu. Natürlich muss die Datei "favicon.ico" existieren. Ich denke, 16x16 oder 32x32 Pixel Dateien sind am besten.

NiklasMM
quelle
4
Für den Code denke ich, dass Wikipedia eine bessere Erklärung und eine bessere Cross-Browser-Kompatibilität hat. en.wikipedia.org/wiki/Favicon
Andy Li
Vielen Dank! Habe gerade diese Codeline von meiner Website genommen und da sie funktioniert, dachte ich, dass es nicht zu falsch sein kann. ;-)
NiklasMM
Danke Nick! Kust musste mein Bild in ein ico konvertieren, damit es im IE funktioniert. <link rel = "Verknüpfungssymbol" href = "/ Content / images / MyIcon.ico" />
littlechris
Bei Verwendung in Rubinschienen<link rel="icon" type="image/png" href="<%= asset_path('icon_name.jpg')%>">
Sunil Kumar
21

Dies ist eine interessante Frage. Lassen Sie sie also überprüfen, ob Sie ein Bild zur Verwendung als Website-Symbol haben

Fügen Sie dies Ihrem Skript hinzu 

   <link rel="icon" type="image/gif" href="animated_favicon1.gif" />

Andernfalls haben Sie ein Symbol für Ihr Website-Symbol ausgewählt 

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

Ich benutze immer http://www.iconspedia.com/ für mehr Symbole

Wenn meine Antwort Ihr Problem gelöst hat, geben Sie mir eine Stimme

Gemeinschaft
quelle
8

Sie werden Favicons genannt und sind recht einfach herzustellen / zu verwenden. Lesen Sie http://www.favicon.com/ um Hilfe.

Paul McLean
quelle
8

Anscheinend können Sie diesen Trick verwenden. 

<title>📈 My title</title>

Dieses Symbol ist eigentlich ein Text.

devXen
quelle
4
Wo finden Sie diese?
Max Rose-Collins
Bei diesem Ansatz gibt es ein kleines Problem .
Amir A. Shabani
7

Die akzeptierte Antwort funktioniert einwandfrei. Ich möchte nur ein kleines Problem mit der Antwort erwähnen, die devXen gegeben hat .

Wenn Sie das Symbol folgendermaßen einstellen:

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

Das Symbol funktioniert wie erwartet:

Geben Sie hier die Bildbeschreibung ein

Wenn Sie es jedoch so einstellen devXen vorgeschlagen hat:

<title>🧐 Amir A. Shabani</title>

Der Titel der Seite wird beim Aktualisieren verschoben:

Geben Sie hier die Bildbeschreibung ein

Daher würde ich empfehlen, <link>stattdessen zu verwenden.

Amir A. Shabani
quelle
2

Laut w3school :

<link rel="icon" href="your_icon"/>
CA Gavin Lee
quelle
2

Dieser Code wird trotzig funktionieren. In einem Kommentar habe ich gesehen, dass sie ejs syntex verwenden, das nicht für jedermann geeignet ist, nur für diejenigen, die mit express.js arbeiten

<link rel="icon" href="demo_icon.gif" sizes="16x16">
<title> Reddit</title>

Sie können auch PNG und JPG hinzufügen

MD SHAYON
quelle
1

Verwenden Sie bei Verwendung in Rubinschienen den folgenden Code.

Zur Berechnung des Dateipfads wird die Funktion "Asset_Path" verwendet, um das Bild zu finden, das wir innerhalb des eingebetteten Rails-Codes verwenden <%= code %>

<link rel="icon" type="image/png" href="<%= asset_path('icon_name.jpg')%>">
Sunil Kumar
quelle
1

Wenn Sie nur eine URL verwenden möchten, können Sie diesen Code verwenden.

<link rel="shortcut icon" type="image/x-icon" href="https://..." />
behdad setoodegan
quelle