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?

Es wird empfohlen, in allen Browsern zu arbeiten .ico, da für die Größe 32 x 32 am häufigsten verwendet wird und 16 x 16 ebenfalls funktioniert (dies ist die tatsächliche Größe, die im Browser an den meisten Stellen verwendet wird).

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

Es kann erwähnenswert sein, wenn Sie vorhaben, dass iWelche Benutzer Ihre Site mit einem Lesezeichen versehen, das <link>für das Image separat ist , z. B. StackOverflows:

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

Welches ist:

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

Wenn Sie danach Ihre Datei benennen favicon.icound sie im Stammverzeichnis Ihrer Website ablegen, erhalten die meisten Webbrowser sie automatisch.

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 zu verwenden ico, verwenden Sie verschiedene Favoriten auf verschiedenen Seiten, platzieren Sie Ihr Favoritensymbol an einer anderen Stelle, verwenden Sie einen anderen Namen als faviconusw.

http://en.wikipedia.org/wiki/Favicon

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

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

Standardbildformat:

• .ico
• 16 x 16 Pixel

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

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.

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