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


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


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

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.


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

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.


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
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.