Was ist ein Favicon und wofür ist es?
Ein Favicon ist ein Abzeichen (Symbol), das in Browser-Registerkarten, Lesezeichen und Ausschnitten von Suchergebnissen angezeigt wird.
Favicon spielt eine wichtige Rolle in Webanwendungen. Es kann das Erscheinungsbild der Website in den Suchergebnissen verbessern, die Erkennung Ihrer Website verbessern und dem Benutzer helfen, die gewünschte Seite in Lesezeichen und Registerkarten schnell zu finden.
Darüber hinaus kann der Benutzer eine Seite Ihrer Website zum Startbildschirm des Telefons hinzufügen oder als Webanwendung speichern. In diesem Fall können Sie mit Favicon schnell eine Site unter einer Vielzahl anderer Anwendungen finden.
Welches Format soll für Favicon verwendet werden?
Zuvor wurde ICO als Hauptformat verwendet. Die Besonderheit dieses Formats ist seine Mehrdimensionalität. Diese Datei kann mehrere Symbolgrößen speichern. Das ICO wurde durch das PNG-Format ersetzt. ICOs werden weiterhin unterstützt, aber die meisten modernen Browser entscheiden sich für das PNG-Symbolformat, das leichter ist. Einige Browser können das richtige Symbol in der ICO-Datei nicht auswählen, was zu einem Missbrauch des Symbols mit niedriger Auflösung führt.
Welche Plattformen werden in diesem Artikel behandelt?
- Klassische Desktop-Browser
- Android Chrome
- iOS Safari Webclip
- Mac OS
- Windows
Klassische Desktop-Browser
Beginnen wir mit dem klassischen Desktop.
Wie bereits erwähnt, ist das ICO-Format heute veraltet. Dies bedeutet jedoch nicht, dass Sie es vergessen müssen. Das ICO-Format kann in einigen Fällen Ihr Symbol speichern und das Favicon korrekt anzeigen. Vor IE 11 wird beispielsweise das PNG-Format nicht unterstützt. Daher müssen Sie für IE10 und niedrigere Versionen das alte ICO-Format verwenden. In diesem Fall ist es ratsam, die folgende Kombination von ICO- und PNG-Formaten zu verwenden:
<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" sizes="16x16" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" sizes="32x32" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" sizes="96x96" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" sizes="120x120" rel="icon" href="…/favicon-120x120.png">Um ein ICO-Symbol mit mehreren Größen zu erstellen, können Sie den Dienst icoconvert converter verwenden . Wählen Sie beim Generieren eines Symbols die folgenden Abmessungen aus: 16 x 16, 32 x 32, 48 x 48 (Symbol mit der höchsten Auflösung).
PNG-Symbole haben die folgenden Größen: 16 x 16, 32 x 32, 96 x 96, 120 x 120. Warum ein 120x120 Symbol? Die Yandex-Hilfe informiert Sie darüber, dass ein Symbol dieser Größe verwendet werden kann.
Wenn wir auf den Wert von rel (Ressourcentyp) achten, wird das Symbol von den meisten Browsern und das Verknüpfungssymbol vom IE-Browser berücksichtigt.
Android Chrome
Android erwartet ein 192x192 PNG-Symbol, Alphakanal (Transparenz) wird empfohlen.
<link type="image/png" sizes="192x192" rel="icon" href="…/android-icon-192x192.png">Android Chrome stützt sich auf das Web-App-Manifest. Jede Site kann das Manifest verwenden, um auf einige der Symbole zu verlinken.
Die Manifestdatei selbst ist im JSON- Format und wird mit der folgenden Zeile deklariert:
<link rel="manifest" href="…/manifest.json">Die Manifestdatei für Android Chrome kann mit dem RealFaviconGenerator- Dienst generiert werden .
{
"name": "My Application",
"short_name": "App",
"description": "Application OK",
"lang": "ru-Ru",
"start_url": "/",
"scope": "/",
"display": "standalone",
"theme_color": "#ffffff",
"background_color": "#ffffff",
"icons": [
{
"src": "\/res\/img\/icons\/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/res\/img\/icons\/android-icon -96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/res\/img\/icons\/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/res\/img\/icons\/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
},
{
"src": "\/res\/img\/icons\/android-icon-512x512.png",
"sizes": "512x512",
"type": "image\/png"
}
]
}Symbole sollten die folgenden Größen haben: 72 x 72, 96 x 96, 144 x 144, 192 x 192, 512 x 512 im PNG-Format. Transparenz wird empfohlen. Da das Symbol einen transparenten Hintergrund haben kann, kann die Farbe im Manifest mit background_color angegeben werden .
Es lohnt sich abzubrechen, dass der Benutzer auf dem Telefon die Möglichkeit hat, die Browserseite auf dem Startbildschirm zu speichern. Es wird einfach ein Link zu einer Seite auf Ihrer Site sein, ein Symbol mit dem Namen android-icon-192x192.png wird aufgerufen , das in Ihrem Code deklariert ist.
Wenn Sie ein Manifest mit der Site verbinden, wird der Benutzer beim Öffnen der Seite möglicherweise aufgefordert, die Site als Anwendung zu speichern. In diesem Fall können Sie dasselbe Symbol visuell deklarieren ( android-icon-192x192.png)) oder gestalten Sie das Symbol für die Anwendung neu, um es Ihren Anforderungen anzupassen, und deklarieren Sie es im Manifest mit den entsprechenden Abmessungen.
iOS Safari Webclip
iOS Safari erwartet ein Apple Touch-Symbol . Dies ist ein 180x180 PNG-Symbol, kein Alphakanal (keine Transparenz). Die Ecken des Symbols werden automatisch abgerundet, sodass Sie leichter ein Apple Touch-Symbol erstellen können .
IOS-Benutzer können dem Startbildschirm auch eine Site hinzufügen, die wie eine App aussieht. Ein solcher Link wird als Symbol angezeigt und als Webclip bezeichnet.
Die folgenden Symbolgrößen unterstützen verschiedene Geräte wie iPhone und iPad:
<link sizes="57x57" rel="apple-touch-icon" href="…/apple-touch-icon-57x57.png">
<link sizes="60x60" rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link sizes="72x72" rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link sizes="76x76" rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link sizes="114x114" rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link sizes="120x120" rel="apple-touch-icon" href="…/apple-touch-icon-120x120.png">
<link sizes="144x144" rel="apple-touch-icon" href="…/apple-touch-icon-144x144.png">
<link sizes="152x152" rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link sizes="180x180" rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">Fügen Sie im Code das Attribut rel = "apple-touch-icon" hinzu und geben Sie die Größe mithilfe von Größen an.
Wenn auf der Site kein Symbol vorhanden ist, dessen Größe der empfohlenen Größe für das Gerät entspricht, wird das nächstgrößere Symbol verwendet. Das Haupt- Apple-Touch-Symbol ist ein 180x180-Symbol. Andere Geräte können das Symbol mischen.
Vergessen Sie beim Erstellen eines Symbols nicht das Auffüllen. Sie müssen auf allen Seiten mindestens 4 Pixel groß sein. Dies soll verhindern, dass Ihr Symbol abgeschnitten wird, da das iOS-App-Symbol abgerundete Ecken hat.
Es ist zu beachten, dass iOS-Geräte nicht die einzigen sind, die nach einem Apple Touch-Symbol suchen... Einige Browser, wie z. B. Android Chrome, verwenden möglicherweise Apple Touch-Symbole, da diese häufiger verwendet werden als andere hochauflösende PNG-Symbole.
Mac OS
Unter Mac OS sieht das völlig anders aus. Wenn der Benutzer versucht, die Site auf dem Desktop zu speichern, wird anstelle des Site-Symbols ein Screenshot der Seite mit dem HTML-Code angezeigt.
Um ein Symbol hinzuzufügen, müssen Sie das SVG-Format verwenden, mit dem Sie eine Symbolmaske erstellen können. Dieses Symbol wird angezeigt, wenn Sie eine Registerkarte in Safari anheften.
<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">Sie müssen Ihrem Code das Attribut rel = "mask-icon" hinzufügen . Das SVG-Symbol selbst muss schwarz sein. Die Farbe des Symbols wird im Attribut color = "# e52037" festgelegt .
Das SVG-Symbol wird in einer angehefteten Registerkarte (ohne Fokus) in Schwarzweiß verwendet. Beim Hover (angehefteter Tabulator - Fokus) wird das Symbol in der Farbe mit dem Attribut " Farbe " gezeichnet . Die Farbe des Attributs " Farbe " wird ebenfalls an die Touch-Leiste übergeben .
Wenn Sie ein Symbol erstellen, müssen Sie alle vorhandenen Schatten entfernen, es flach und einfach gestalten. Mit den Operationen "Union" und "Flatten" können Sie ein Symbol für ein einzelnes Objekt vereinfachen. Diese Operationen sind in Figma einfach anzuwenden.
Wenn Sie die Augen schließen, um ein Maskensymbol zu erstellen, zeigt der Browser einfach den ersten Buchstaben der Domain Ihrer Site an.
Windows
Unter Windows ist ein wenig Fummelei erforderlich, um gute Ergebnisse zu erzielen.
Für IE10 und niedrigere Versionen muss das ICO-Format verwendet werden, da PNG vor IE11 nicht unterstützt wurde.
Mit dem Aufkommen von IE11 und Windows 8.1 wurde es möglich, Websites als Live-Kacheln zu pinnen. Für kleine Kacheln wird das Standardfavicon verwendet, und für große und breite Kacheln müssen Sie ein Bild mit einer bestimmten Größe festlegen. Dies kann durch Hinzufügen von Metadaten-Tags zum Site-Markup oder durch Erstellen einer browserconfig.xml (Browserkonfigurationsdatei) erfolgen.
Ein Beispiel für das Hinzufügen von Metadaten-Tags zu einem Website-Markup für große Kacheln:
<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">Mit dieser Linie geben wir die Hintergrundfarbe der Kachel an:
<meta name="msapplication-TileColor" content="#2b5797">Sie können den Namen Ihrer Website angeben:
<meta name="application-name" content="My Application">Was ist browserconfig ? Es ist ein XML-Dokument, in dem verschiedene Symbole aufgelistet sind, die der Metro-Benutzeroberfläche entsprechen.
Fügen Sie dem Kopf die folgende Zeile hinzu, um die browserconfig-Datei in das Markup aufzunehmen :
<meta name="msapplication-config" content="…/browserconfig.xml">Die Datei selbst sieht folgendermaßen aus:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="…/mstile-70x70.png"/>
<square150x150logo src="…/mstile-150x150.png"/>
<square310x310logo src="…/mstile-310x310.png"/>
<wide310x150logo src="…/mstile-310x150.png"/>
<TileColor>#ffc40d</TileColor>
</tile>
</msapplication>
</browserconfig>Die browserconfig- Datei definiert Bilder für verschiedene Kachelgrößen.
Microsoft empfiehlt die Verwendung einer größeren Bildgröße, um Bildschirme mit hoher Pixeldichte zu unterstützen.
Die folgende Liste enthält einige Richtlinien für die Verwendung unterschiedlicher Größen:
- Klein - 70 x 70 (empfohlene Größe: 128 x 128)
- Mittel - 150 x 150 (empfohlene Größe: 270 x 270)
- Breit - 310 x 150 (empfohlene Größe: 558 x 270)
- Groß - 310 x 310 (empfohlene Größe: 558 x 558)
Für ein 70 x 70-Bild beträgt die empfohlene Größe beispielsweise 128 x 128. Dies bedeutet, dass Sie ein 128x128-Bild mit einem transparenten Hintergrund erstellen müssen, dessen Name mstile-70x70 lautet . Machen Sie dasselbe mit den restlichen Abmessungen.
Favicons vorbereiten
Bevor Sie Ihre Symbole zum Stammordner der Site hinzufügen, müssen Sie sie vorbereiten. Die Originalgrößen der Symbole sind nicht sehr groß, können jedoch mit dem geringsten Qualitätsverlust komprimiert werden.
In meinem Fall betrug das Gewicht aller Bilder beispielsweise 200 KB, nach der Komprimierung 50 KB. Die Qualität der Bilder hat sich kaum verändert. Sie können jeden bequemen Bildkomprimierungsdienst verwenden. Ich habe iloveimg benutzt .
Fazit
Verbindungsreihenfolge im Markup der Website:
<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" sizes="16x16" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" sizes="32x32" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" sizes="96x96" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" sizes="120x120" rel="icon" href="…/favicon-120x120.png">
<link type="image/png" sizes="192x192" rel="icon" href="…/android-icon-192x192.png">
<link sizes="57x57" rel="apple-touch-icon" href="…/apple-touch-icon-57x57.png">
<link sizes="60x60" rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link sizes="72x72" rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link sizes="76x76" rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link sizes="114x114" rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link sizes="120x120" rel="apple-touch-icon" href="…/apple-touch-icon-120x120.png">
<link sizes="144x144" rel="apple-touch-icon" href="…/apple-touch-icon-144x144.png">
<link sizes="152x152" rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link sizes="180x180" rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">
<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">
<meta name="application-name" content="My Application">
<meta name="msapplication-config" content="…/browserconfig.xml">
<link rel="manifest" href="…/manifest.json">
<meta name="theme-color" content="#ffffff">Mit der letzten Codezeile " Themenfarbe " können Sie die Adressleiste und die Benachrichtigungsleiste in einer beliebigen Farbe malen. Der Inhaltswert legt die Farbe fest.
Verwenden Sie RealFaviconGenerator , um die Symbole Ihrer Website zu überprüfen . Dieser Dienst zeigt Ihnen, wie Ihre Symbole auf verschiedenen Plattformen angezeigt werden, wo und welche Probleme auftreten können.
Darüber hinaus kann dieser Dienst die erforderlichen Größen, Symbolformate und den Code generieren. Es ist jedoch erforderlich, die Quellen auf das Vorhandensein aller empfohlenen Größen zu überprüfen, um eine korrekte Anzeige auf verschiedenen Geräten zu gewährleisten.