web-dev-qa-db-de.com

Wie setze ich das Logo meiner Website als Symbol in Browser-Registerkarten ein?

Das Bild neben dem Seitentitel im Browser-Tab - wie können Sie hier ein Bild verlinken?

86
jay

Dieses Bild heißt ' favicon ' und ist eine kleine quadratische .ico - Datei, die der Standard ist Dateityp für Favoriten. Sie können auch .png Oder .gif Verwenden, aber Sie sollten den Standard befolgen, um die Kompatibilität zu verbessern.

Um einen für Ihre Website festzulegen, sollten Sie:

  1. Erstellen Sie ein quadratisches Bild Ihres Logos (nach meinem Kenntnisstand 32 x 32 oder 16 x 16 Pixel) und wandeln Sie es in eine .ico - Datei um. Sie können dies auf Gimp, Photoshop (mit Hilfe eines Plugin ) oder einer Website wie Favicon.cc oder RealFaviconGenerator tun.

  2. Dann haben Sie zwei Möglichkeiten, es einzurichten:

    A) Platzieren Sie es im Stammverzeichnis/Verzeichnis Ihrer Website (neben index.html) Mit dem Namen favicon.ico. .

    oder

    B) Verknüpfen Sie die <head></head> - Tags jeder .html - Datei auf Ihrer Site wie folgt:

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

Wenn Sie das favicon von einer beliebigen Website aus sehen möchten, schreiben Sie einfach www.url.com/favicon.ico Und Sie werden es (wahrscheinlich) sehen. Stackoverflow's Favicon ist 16x16 Pixel und Wikipedia ist 32x32.

*: Es gibt sogar ein Browserproblem ohne Dateigrößenbeschränkung. Sie könnten leicht einen Browser mit einem sehr großen Favicon zum Absturz bringen, mehr Info hier

153
LasagnaAndroid

Es heißt 'favicon' und Sie müssen den folgenden Code zum Abschnitt header Ihrer Website hinzufügen.

Fügen Sie dies einfach zum <head> Sektion.

<link rel="icon" href="/your_path_to_image/favicon.jpg">
13
Dulith De Costa

Dies ist das Favicon und wird im Link erklärt.

z.B. von W3C

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

Dazu natürlich die Bilddatei an der entsprechenden Stelle.

7
<link rel="Apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file: 
'Apple-touch-icon-retina.png')}">

oder Sie können diesen verwenden

<link rel="shortcut icon" sizes="114x114" href="${resource(dir: 'images', file: 'favicon.ico')}"
type="image/x-icon">
2
user3680001

Fügen Sie eine Symboldatei mit dem Namen "favicon.ico" zum Stammverzeichnis Ihrer Website hinzu.

1
Mike Fulton