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

98

Das Bild neben dem Seitentitel auf der Registerkarte Browser - wie können Sie hier ein Bild verlinken?

html favicon Jay
quelle
2
Schlüsselwörter ist favicon.ico
user956584
en.wikipedia.org/wiki/Favicon
Ry-

Antworten:

174

Dieses Bild heißt " Favicon " und ist eine kleine quadratische .icoDatei, die der Standarddateityp für Favicons ist. Sie könnten .pngoder .gifauch verwenden, aber Sie sollten den Standard für eine bessere Kompatibilität befolgen.

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

  1. Erstellen Sie ein quadratisches Bild Ihres Logos (vorzugsweise 32 x 32 oder 16 x 16 Pixel, soweit ich weiß, gibt es keine maximale Größe *) und wandeln Sie es in eine .icoDatei um. Sie können dies auf Gimp, Photoshop (mithilfe eines Plugins ) oder einer Website wie Favicon.cc oder RealFaviconGenerator tun .

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

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

    oder

    B) Verknüpfen Sie es zwischen den <head></head>Tags jeder .htmlDatei auf Ihrer Site wie folgt:

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

Wenn Sie das faviconvon einer Website sehen möchten , schreiben www.url.com/favicon.icoSie einfach und Sie werden es (wahrscheinlich) sehen. Das Favicon von Stackoverflow ist 16x16 Pixel und Wikipedia ist 32x32.

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

LasagneAndroid
quelle
18

Es heißt " Favicon " und Sie müssen den folgenden Code zum Header- Bereich Ihrer Website hinzufügen .

Fügen Sie dies einfach dem <head>Abschnitt hinzu.

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

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

zB von W3C

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

Plus natürlich die Bilddatei an der entsprechenden Stelle.

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

oder Sie können diese verwenden

<link rel="shortcut icon" sizes="114x114" href="${resource(dir: 'images', file: 'favicon.ico')}"
type="image/x-icon">
user3680001
quelle
Apple-Touch-Symbol ist für iOS WebApps
LasagneAndroid
1

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

Mike Fulton
quelle
Denken Sie daran, es muss genau 16x16 px sein.
uınbɐɥs
3
Nein, das tut es nicht, es muss quadratisch sein und jede Größe, das Laden
dauert