So entwerfen Sie ein Favicon: Die ultimative Anleitung
- Favicon Designregeln
- Favicon Größe Cheatsheet
- Desktop-Browser-Favoriten
- Apfel
- Android, Chrome und Opera
- Safari
- Andere Favicon-Typen
Favicon Design ist wichtiger als Sie vielleicht denken. Größe spielt hier wirklich eine Rolle, da ein gut gestaltetes Logo in jeder Größe erkennbar sein muss. Es muss von massiven Bildschirmen bis zu einem Symbol skaliert werden, das bis zu 16 x 16 Pixel groß sein kann und als Favicon bezeichnet wird. Ein gutes Beispiel für Favicon-Design ist das Google-Logo. Es funktioniert perfekt für größere Bildschirme mit seinem großen 'G' und dem unverwechselbaren vierfarbigen Text. Und es ist immer noch genauso erkennbar, wenn es auf das winzige vierfarbige 'G' in der Adressleiste eines Webbrowsers verkleinert wird.
Das Favicon kann auch als Verknüpfungssymbol, Registerkartensymbol oder Lesezeichensymbol angezeigt werden, sodass das Teil angezeigt werden muss. Informationen zu funktionierenden Favicon-Designs finden Sie in unserer Zusammenfassung von Inspiration für das Logo-Design und schauen Sie sich diese atemberaubende Sammlung von iOS App Symbole das macht es genau richtig.
In diesem Artikel werden wir den Prozess des Entwurfs des perfekten Favicons durchlaufen. Wir enthalten spezielle Tipps zum Erstellen eines Favicons für Apple-Geräte, Android, Chrome, Opera und Safari. Außerdem eine praktische Anleitung zu den verschiedenen Favicon-Größen und -Formaten, die Sie kennen müssen. Verwenden Sie die Quick Links (rechts), um direkt zum gewünschten Abschnitt zu springen.
Favicon Design: Quick Links- - Favicon Designregeln
- - Favicon Größen Cheatsheet
- - Desktop-Browser-Favoriten
- - Apple Touch-Favoriten
- - Android, Chrome und Opera
- - Die angeheftete Registerkarte von Safari
- Suchen Sie nach einer anderen Art von Symbol? Siehe unseren Leitfaden zum beste kostenlose Icon-Sets
In den frühen Tagen des Web war ein Favicon einfach eine 16x16px-Symboldatei, aber heutzutage ist es etwas komplizierter. Es gibt verschiedene Favicon-Größen und -Prozesse für verschiedene Kontexte. Ein richtiges Favicon zu erstellen ist eine Wissenschaft.
Wir werden also mit einigen Top-Tipps beginnen, wie Ihr Favicon aussehen soll, und dann mit spezifischen Ratschlägen zum Erstellen eines Favicons für verschiedene Kontexte fortfahren. Wir werden das benutzen Vorlage verfügbar unter Pixel anwenden um auf einfache Weise die verschiedenen erforderlichen Favicon-Größen zu generieren, und das Favicon aus Pixel anwenden als Beispiel.
Favicon Designregeln
01. Mach es erkennbar
Das erste, was beim Entwerfen eines Favicons berücksichtigt werden muss, ist, was auf der Leinwand dargestellt werden muss. Denken Sie daran, dass Ihr Favicon dem Benutzer nur angezeigt wird, wenn es bereits vorhanden ist auf Ihrer Website oder haben es mit einem Lesezeichen versehen. Sie müssen also nicht versuchen, den Benutzer mit Ihrem Favicon anzulocken.
02. Verwenden Sie Ihr Logo
Betrachten Sie Favoriten als nüchterne Wegweiser, die Benutzern das Erkennen Ihrer Website beim Durchsuchen ihrer Lesezeichenlisten und Startbildschirme erleichtern. Daher möchten Sie Ihr Logo verwenden oder das Symbol, mit dem der Benutzer Ihre Website am einfachsten erkennt. Wenn Sie kein Logomark haben, das zur quadratischen Leinwand passt, verwenden Sie den erkennbarsten Teil Ihres Logos.
03. Halte es klar
Es gibt auch einige Dinge, die Sie vermeiden sollten. Verwenden Sie das Favicon nicht als Marketing-Tool - das bedeutet, dass es keine Preisschilder, 'neuen' oder 'aktualisierten' Banner usw. gibt. Tatsächlich möchten Sie überhaupt keinen Text in das Favicon einfügen. Text lässt sich nicht gut skalieren und es besteht die Möglichkeit, dass er ohnehin unleserlich wird. Verwenden Sie zum Schluss kein Foto - es ist schlammig und in der Größe, in der es erscheinen wird, nicht wiederzuerkennen.
04. Erstellen Sie zwei Versionen
Als Favicons zum ersten Mal in Internet Explorer 5 eingeführt wurden, wurden sie in der URL-Leiste und in der Lesezeichenliste angezeigt. Heutzutage werden Favoriten in vielen anderen Kontexten angezeigt, einschließlich Lesezeichenlisten, Kontextmenüs und sogar Mobil- und TV-Homescreens. Dies macht es schwierig vorherzusagen, wie Ihr Favicon dem Endbenutzer angezeigt wird.
Um sicherzustellen, dass Ihr Favicon in den vielen verschiedenen Kontexten, in denen es angezeigt wird, gut aussieht, sollten Sie idealerweise zwei Favicon-Stile angeben:
Logo auf transparentem Hintergrund
Diese Version wird in der URL-Leiste, in Lesezeichenlisten und an anderen Stellen angezeigt, an denen das Favicon neben der URL oder dem Namen Ihrer Website angezeigt wird.
Logo auf fester Füllung
Diese Version wird in gitterartigen Lesezeichen und Kontextmenüs verwendet, in denen der Browser oder das Gerät den Hintergrund maskiert, um ein einheitliches Erscheinungsbild im Kontext zu erzielen.
Favicon Größe Cheatsheet
Wie bereits erwähnt, erfordern unterschiedliche Kontexte Favicons unterschiedlicher Größe. Im Folgenden finden Sie eine Kurzanleitung zu den verschiedenen Formaten und Abmessungen, die Sie bereitstellen müssen, um alle Hauptanwendungsfälle abzudecken.
Bisher mussten Favicons im ICO-Format bereitgestellt werden. Heute ist es in Ordnung, die Dateien im PNG-Format bereitzustellen (mit Ausnahme des Symbols 'Safari Pinned Tab', das als SVG bereitgestellt werden sollte).
Wenn Sie auf einfache Weise alle Favicon-Größen entwerfen und exportieren möchten, schauen Sie sich die an Favicon Vorlage drüben bei Pixel anwenden.
Schauen wir uns nun die spezifischen Anforderungen verschiedener Anwendungsfälle genauer an.
Desktop-Browser-Favoriten
So erstellen Sie ein Desktop-Browser-Favicon
Beginnen wir mit dem einfachsten Favicon, das Sie erstellen müssen: einem klassischen Favicon für die klassischen Desktop-Browser. Diese Art von Favicon funktioniert am besten auf transparenten Hintergründen, da sie häufig in der URL-Leiste und in Lesezeichenlisten angezeigt wird.
Sie müssen diese Art von Favicon in drei Größen bereitstellen, alle in PNG-Format mit einer transparenter Hintergrund .
- 16x16
- 32x32
- 48x48
Apfel
So erstellen Sie Apple Touch-Favoriten
Apples iOS verwendet Apple Touch Icons um Websites darzustellen, die auf dem iOS-Startbildschirm als Lesezeichen gespeichert wurden. Dies bedeutet, dass das Apple Touch-Symbol auf das abgerundet wird Kreis Maske der iOS-App-Symbole.
Es wird auch vor dem Hintergrund angezeigt, den der Benutzer für seinen Homescreen ausgewählt hat. In diesem Sinne sollte Ihr Apple Touch-Symbol eine haben fester Füllhintergrund Stil.
Apple Favicons sollten in a geliefert werden PNG-Format . Sie können mit der Bereitstellung eines davonkommen 180x180 Apple Touch Icon, das automatisch für die verschiedenen iPhone- und iPad-Größen skaliert wird. Dies funktioniert in den meisten Fällen einwandfrei.
Wenn nicht, können Sie zusätzliche Größen für die verschiedenen Apple-Geräte angeben:
- 60x60
- 76 x 76
- 120 x 120
- 152 x 152
- 180x180
Android, Chrome und Opera
So erstellen Sie ein Favicon für Android, Chrome und Opera
Android, Chrome und Opera nutzen die android-chrome-192x192.png und android-chrome-512x512.png Das Google empfiehlt .
Seit der Einführung adaptiver Symbole in Android maskieren Websites, die dem Android-Startbildschirm hinzugefügt wurden, das 192x192-Design, sodass das Symbol nach dem vom Benutzer bevorzugten Maskierungsstil Gestalt annimmt. Dies kann ein Kreis, eine Ellipse, ein Rechteck, ein abgerundetes Rechteck oder eine Tropfenform sein.
Sie müssen eine erstellen PNG Favicon mit fester Hintergrund , beim 192x192 und 512 x 512 .
Implementieren Sie diese Favoriten, indem Sie a hinzufügen manifest.json Datei auf Ihre Site und Verlinkung innerhalb der Tags:
Hier ist der Code für die manifest.json Datei:
{ 'name': '', 'short_name': '', 'icons': [ { 'src': '/android-chrome- 192x192.png', 'sizes': '192x192', 'type': 'image/png' }, { 'src': '/android- chrome-512x512.png', 'sizes': '512x512', 'type': 'image/png' } ], 'theme_color': '#ffffff', 'background_color': '#ffffff', 'display': 'standalone' }Safari
So erstellen Sie ein Favicon für die angeheftete Registerkarte von Safari
Dies ist das ungerade Ergebnis, und es ist das einzige Favicon, das bereitgestellt werden muss Vektorformat als SVG-Datei . Es wird als Miniaturbild angezeigt, wenn ein Benutzer eine Registerkarte an das Safari-Browserfenster anheftet.
Dieses Favicon muss eine 100% schwarze SVG-Datei mit einem sein transparenter Hintergrund . Die SVG kann nur eine Schicht sein, und Safari erfordert die viewBox Attribut der SVG, die auf 'gesetzt werden soll 0 0 16 16 ' .
Andere Favicon-Typen
Es gibt einige Favicon-Dimensionen und -Formate, die in diesem Artikel nicht enthalten waren, z. Google TV, Chrome Web Store und Apple Touch-Symbole vor iOS 7. Warum? Weil sie veraltet sind oder weil sie für den durchschnittlichen Webentwickler selten relevant sind.
Im Allgemeinen sollten Entwickler und Designer sich bemühen, eine möglichst breite Palette von Geräten und Betriebssystemen zu unterstützen, aber manchmal macht dies einfach keinen Sinn. Wenn Sie jedoch eine vollständigere Liste der Favicon-Bilder anzeigen möchten, sollten Sie sich diese ansehen Favicon Spickzettel auf GitHub.
Weiterlesen:
