Das Bild neben dem Seitentitel auf der Registerkarte Browser - wie können Sie hier ein Bild verlinken?
Das Bild neben dem Seitentitel auf der Registerkarte Browser - wie können Sie hier ein Bild verlinken?
Antworten:
Dieses Bild heißt " Favicon " und ist eine kleine quadratische .ico
Datei, die der Standarddateityp für Favicons ist. Sie könnten .png
oder .gif
auch verwenden, aber Sie sollten den Standard für eine bessere Kompatibilität befolgen.
Um eine für Ihre Website festzulegen, sollten Sie:
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 .ico
Datei um. Sie können dies auf Gimp, Photoshop (mithilfe eines Plugins ) oder einer Website wie Favicon.cc oder RealFaviconGenerator tun .
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 .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 Website sehen möchten , schreiben www.url.com/favicon.ico
Sie 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
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">
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.
<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">