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 hin zu einem Symbol skaliert werden, das so klein wie 16 x 16 Pixel 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 unverwechselbaren vierfarbigen Text., Und es ist immer noch so erkennbar, wenn es auf das winzige vierfarbige “ G “ geschrumpft ist, das in einer Adressleiste des Webbrowsers zu sehen ist.
Das Favicon kann auch als Shortcut-Symbol, ein Tab-Symbol oder ein Lesezeichen-Symbol zu sehen, so muss es das Teil aussehen. Um Favicon-Designs zu sehen, die funktionieren, sehen Sie sich unsere Zusammenfassung der Logo-Design-Inspiration an und schauen Sie sich diese atemberaubende Sammlung von iOS-App-Symbolen an, die es genau richtig machen.
In diesem Artikel werden wir den Prozess durchlaufen, wie man das perfekte Favicon entwirft., Wir geben spezifische Tipps zum Erstellen eines Favicon für Apple-Geräte, Android, Chrome, Opera und Safari. Plus eine praktische Anleitung zu den verschiedenen Favicon-Größen und-Formaten, die Sie kennen müssen. Verwenden Sie die Quick Links (rechts), um direkt zu dem gewünschten Abschnitt zu springen.
- auf der Suche für eine andere Art von Symbol? Siehe unseren Leitfaden zu den besten kostenlosen Symbolsätzen
In den frühen Tagen des Webs 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. Das Erstellen eines richtigen Favicon ist eine Wissenschaft.
Wir werden also mit einigen Top-Tipps beginnen, wie Ihr Favicon aussehen soll, und dann zu spezifischen Ratschlägen übergehen, wie Sie ein Favicon für verschiedene Kontexte erstellen. Wir verwenden die für Apply Pixels verfügbare Vorlage, um auf einfache Weise die verschiedenen erforderlichen Favicon-Größen und das Favicon aus Apply Pixels als Beispiel zu generieren.,
Favicon-Designregeln
Machen es erkennbar
Das erste, was beim Entwerfen eines Favicon zu beachten ist, ist, was auf der Leinwand dargestellt werden muss. Denken Sie daran, dass Ihr Favicon dem Benutzer nur angezeigt wird, wenn er sich bereits auf Ihrer Website befindet oder ein Lesezeichen gesetzt hat. Sie müssen also nicht versuchen, den Benutzer mit Ihrem Favicon anzulocken.
Verwenden Sie Ihr Logo
Betrachten Sie Favicons als nüchterne Wegweiser, die Benutzern helfen, Ihre Website beim Durchsuchen ihrer Lesezeichenlisten und Homescreens zu erkennen., Daher möchten Sie Ihr Logo oder das Symbol verwenden, mit dem der Benutzer Ihre Website am einfachsten erkennen kann. Wenn Sie kein Logomark haben, das zur quadratischen Leinwand passt, verwenden Sie den am besten erkennbaren Teil Ihres Logos.
Halten Sie es klar
Es gibt auch ein paar Dinge, die Sie vermeiden sollten. Verwenden Sie das Favicon nicht als Marketing-Tool-das bedeutet keine Preisschilder, „neue“ oder „aktualisierte“ Banner und so weiter. Tatsächlich möchten Sie überhaupt keinen Text in das Favicon einfügen. Text skaliert nicht gut und die Chancen stehen gut, dass er trotzdem unleserlich wird., Verwenden Sie schließlich kein Foto – es wird schlammig und in der Größe nicht wiederzuerkennen sein, in der es erscheinen wird.
Erstellen Sie zwei Versionen
Als Favicons erstmals in Internet Explorer 5 eingeführt wurden, wurden sie in der URL-Leiste und in der Lesezeichenliste angezeigt. Heute werden Favicons in vielen anderen Kontexten angezeigt, einschließlich Lesezeichenlisten, Verknüpfungsmenü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 bereitstellen:
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 Solid fill
Diese Version wird in rasterartigen Lesezeichen und Shortcut-Menüs verwendet, wo der Browser oder das Gerät den Hintergrund maskiert, um ein einheitliches Aussehen im Kontext zu erreichen.
Favicon size cheatsheet
Wie bereits erwähnt, erfordern unterschiedliche Kontexte unterschiedlich große Favicons. Nachfolgend finden Sie eine Kurzanleitung zu den verschiedenen Formaten und Abmessungen, die Sie bereitstellen müssen, um alle Hauptanwendungsfälle abzudecken.
Zuvor mussten Favicons im ICO-Format bereitgestellt werden., Heute ist es in Ordnung, die Dateien im PNG-Format bereitzustellen (mit Ausnahme des Safari-angehefteten Registerkartensymbols, das als SVG bereitgestellt werden sollte).
Wenn Sie eine einfache Möglichkeit zum Entwerfen und Exportieren aller Favicon-Größen wünschen, schauen Sie sich die Favicon-Vorlage unter Pixel anwenden an.
Schauen wir uns nun die spezifischen Anforderungen verschiedener Anwendungsfälle genauer an.,
Desktop-Browser favicons
So erstellen Sie einen Desktop-Browser favicon
Beginnen wir mit dem einfachsten Favicon, das Sie erstellen müssen: ein klassisches 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 werden.,
Sie werden müssen bieten diese art von favicon in drei größen, alle in PNG format mit einem transparenten hintergrund.,
- 16×16
- 32×32
- 48×48
Apple
So erstellen Sie Apple Touch Favicons
Apples iOS verwendet Apple Touch-Symbole, um Websites darzustellen, die als Lesezeichen auf dem iOS-Startbildschirm gespeichert wurden. Dies bedeutet, dass das Apple Touch-Symbol auf die Squircle-Maske der iOS-App-Symbole gerundet wird.
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 einen Hintergrundstil mit fester Füllung haben.,
Apple Favicons sollten im PNG-Format geliefert werden. Sie können mit der Bereitstellung eines 180×180 Apple Touch-Symbols davonkommen, das automatisch für die verschiedenen iPhone-und iPad-Größen skaliert wird. Dies wird in den meisten Fällen gut funktionieren.,
Wenn nicht, können Sie zusätzliche Größen für die verschiedenen Apple-Geräte bereitstellen:
- 60×60
- 76×76
- 120×120
- 152×152
- 180×180
Android, Chrome und Opera
So erstellen Sie ein Favicon für Android, Chrome und Opera
Android, Chrome und Opera verwenden die android-chrome-192×192.png android-chrome-512×512.png, das Google empfiehlt.,
Seit der Einführung adaptiver Symbole in Android maskieren Websites, die dem Android-Homescreen hinzugefügt wurden, das 192×192-Design, sodass das Symbol nach dem bevorzugten Maskierungsstil des Benutzers Gestalt annimmt. Dies kann eine Squircle -, Ellipse -, Rechteck -, abgerundete Rechteck-oder Tropfenform sein.
Sie müssen ein PNG-Favicon mit festem Hintergrund mit 192×192 und 512×512 erstellen.,
Implementieren Sie diese Favicons, indem Sie ein Manifest hinzufügen.json-Datei zu Ihrer Site und Verlinkung innerhalb der Tags:
<link rel="manifest" href="/manifest.json">Hier ist der Code für das Manifest.json-Datei:
Safari
So erstellen Sie ein Favicon für die angeheftete Registerkarte von Safari
Dies ist das ungerade, und es ist das einzige Favicon, das im Vektorformat als SVG-Datei bereitgestellt werden muss. Es wird als Miniaturbildsymbol angezeigt, wenn ein Benutzer eine Registerkarte an das Safari-Browserfenster anschließt.,
Dieses Favicon muss eine 100% schwarze SVG-Datei mit transparentem Hintergrund sein. Die SVG kann nur eine Ebene sein, und Safari erfordert, dass das viewBox Attribut der SVG auf „0 0 16 16″gesetzt wird.
<link rel="mask-icon" href="your_icon.svg">Andere Favicon-Typen
Es gibt einige Favicon-Dimensionen und-Formate, die in diesem Artikel nicht enthalten waren, z., Google TV Chrome-Web-Store und pre-iOS 7 Apple Touch Icons. 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 es einfach keinen Sinn. Wenn Sie jedoch eine vollständigere Liste der Favicon-Bilder sehen möchten, sollten Sie sich diesen Favicon-Spickzettel auf GitHub ansehen.,
- Die besten Designtrends für 2020
- 15 professionelle Schriftarten für Designer
- 27 beste Sätze kostenloser Symbole
