it-swarm.com.de

Wie füge ich meiner Website ein Favicon hinzu?

Welches Markup ist der moderne Standard für das Hinzufügen eines Favicons zu meiner Site? Was ist das Standardbildformat und die Standardgröße?

20
Moshe

Um in allen Browsern zu arbeiten, wird .ico bevorzugt, da für die Größe 32x32 am häufigsten verwendet wird und 16x16 ebenfalls funktioniert (dies ist die tatsächliche Größe, die in den meisten Browsern verwendet wird).

Ebenfalls nicht in Ihrer Frage, sie sollten 8 oder 24 Bit Farbtiefe haben.

Es kann erwähnenswert sein, wenn Sie vorhaben, dass iWhatever-Benutzer Ihre Site mit einem Lesezeichen versehen, dass ein separates <link> für das Bild ist, zum Beispiel StackOverflows:

<link rel="Apple-touch-icon" href="https://cdn.sstatic.net/Sites/stackoverflow/img/Apple-touch-icon.png">

Welches ist:
SO Touch Icon

8
Nick Craver

Sie können ein Tool wie http://www.favicon.cc/ verwenden, um ein Bild zu importieren und in ein Favicon zu konvertieren oder es einfach von Grund auf neu zu erstellen.

Wenn Sie danach Ihre Datei favicon.ico benennen und im Stammverzeichnis Ihrer Website ablegen, wird sie von den meisten Webbrowsern automatisch abgerufen.

Sie können es aber auch explizit in Ihren HTML-Dateien wie folgt deklarieren:

<link rel="shortcut icon" type="image/png" href="path/to/your/favicon.png" />

Mit den Vorteilen, ein anderes Format als ico zu verwenden, verwenden Sie verschiedene Favoriten auf verschiedenen Seiten, platzieren Sie Ihr Favicon an einer anderen Stelle, verwenden Sie einen anderen Namen als favicon usw.

6
Pascal Qyy
4
Maksim Vi.

Markup mit vollem Domain-http-Pfad für IE und behalte das Favicon im Dokumentenordner:

<link rel="shortcut icon" href="http://www.your-site-domain/favicon.ico">

Standardbildformat:

  • .ico
  • 16 x 16 Pixel
2
Marco Demaio

Für verschiedene Geräte, Browser und Betriebssysteme können Sie verschiedene Symbole verwenden. Im Folgenden finden Sie beispielsweise eine Liste, die Sie inspirieren könnte. Korrigieren/bearbeiten Sie die Liste auf jeden Fall im Laufe der Zeit.

<link rel="icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="icon" type="image/png" sizes="96x96" href="/images/icons/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png" />
<link rel="shortcut icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="Apple-touch-icon" sizes="57x57" href="/images/icons/Apple-touch-icon-57x57.png" />
<link rel="Apple-touch-icon" sizes="60x60" href="/images/icons/Apple-touch-icon-60x60.png" />
<link rel="Apple-touch-icon" sizes="72x72" href="/images/icons/Apple-touch-icon-72x72.png" />
<link rel="Apple-touch-icon" sizes="76x76" href="/images/icons/Apple-touch-icon-76x76.png" />
<link rel="Apple-touch-icon" sizes="114x114" href="/images/icons/Apple-touch-icon-114x114.png" />
<link rel="Apple-touch-icon" sizes="120x120" href="/images/icons/Apple-touch-icon-120x120.png" />
<link rel="Apple-touch-icon" sizes="144x144" href="/images/icons/Apple-touch-icon-144x144.png" />
<link rel="Apple-touch-icon" sizes="152x152" href="/images/icons/Apple-touch-icon-152x152.png" />
<link rel="Apple-touch-icon" sizes="180x180" href="/images/icons/Apple-touch-icon.png" />
<link rel="icon" type="image/png" href="/images/icons/Android-chrome-192x192.png" sizes="192x192" />
<link rel="mask-icon" href="/images/icons/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-TileImage" content="/images/icons/mstile-144x144.png" />
<meta name="msapplication-config" content="/browserconfig.xml" />
<meta name="theme-color" content="#282B34" />
1
dankilev

Sie brauchen keinen Link mehr, aber es ist nützlich. Solange Sie die Datei mit dem Namen favicon.ico (und es ist ein ico) in Ihrem Stammverzeichnis belassen, wird sie stattdessen als Favicon verwendet.

0
dkuntz2

Ich hatte ein kleines Problem beim Erstellen meiner ICO-Datei mit GIMP, aber dieser Beitrag gibt detaillierte Anweisungen. Der Trick scheint darin zu bestehen, zuerst im GIF-Format zu speichern, um in eine indizierte Farbtabelle zu konvertieren, und diese dann in das ICO-Format zu konvertieren.

0
Don Kirkby