Ein Favoriten-Symbol (Favicon), was ist das? Sehen Sie dieses Symbol oben, wenn Sie eine Webseite oder Website besuchen. Dieses kleine Symbol? Ja, das ist ein Favicon. Sie finden sie oben auf einem Webbrowser-Tab (z. B. Google Chrome, Apple Safari), typischerweise 16x16 Pixel groß und repräsentieren eine Website/Webseite. Sie finden Favicons auch auf mobilen Startbildschirmen, in der Lesezeichenleiste eines Browsers und in Suchergebnissen.
Obwohl es in der Größe "mini" ist, trägt es viel Verantwortung: Es kann Ihre Marke sofort erkennbar machen, die Benutzererfahrung verbessern und die Markenidentität stärken.
Es spielt also eine wichtige Rolle im Branding (Konsistenz, Erkennung und Wiedererkennung). Im Folgenden werden wir den Prozess der Erstellung eines Favoriten-Symbols aus Ihrem Logo teilen. Klingt technisch? Wir werden Ihnen beweisen, dass es nicht ist.
Wir werden Ihnen sogar beibringen, wie Sie es schnell erstellen können - auch ohne Design-Erfahrung - und Möglichkeiten, es zu optimieren und in Ihre Website zu integrieren. Lassen Sie uns anfangen.
Verständnis von Favicons
Wie bereits erwähnt, handelt es sich um ein winziges Bild, das Ihre Website direkt repräsentiert (Ihr Zuhause im WWW). Wie eine visuelle Abkürzung oder ein Zeichen ermöglicht es Benutzern, es schnell zu identifizieren, auch wenn sie mindestens sieben Browser gleichzeitig geöffnet haben.
Standardformate
- .png: Benutzerfreundlich. Die Erstellung erfordert keine speziellen Grafikdesign-Tools.
- .ico: Microsoft hat das ICO entwickelt, das ursprüngliche Favicon-Dateiformat. Dieses Format ermöglicht mehrere kleine Bilder in derselben Datei und wird von allen Browser-Typen unterstützt. (Von den meisten Browsern am weitesten unterstützt)
- .svg: Leichtgewichtig und hoch skalierbar, hat derzeit jedoch keine ausgezeichnete Browserunterstützung. Es beeinträchtigt jedoch nicht die Ladezeiten. (Nur Opera, Firefox und Chrome unterstützen es)
Dies sind die gängigsten, obwohl zusätzliche Formate für spezifische Geräte oder Browser verfügbar sein können.
Empfohlene Größen (in Pixel)
PNG (*Browser akzeptieren jedes quadratische Bild)
16x16
32x32
ICO
16x16
32x32
48x48
Beachten Sie jedoch. Einige Websites erfordern möglicherweise höhere Auflösungen (z. B. 64x64, 128x128 oder 512x512 für Mobilgeräte und Retina-Displays).
Wie man Ihr Logo für ein Favicon vorbereitet
Zuerst einmal: Nicht alle Logos können Favicons sein. Einige sind dafür nicht geeignet. Deshalb ist es wichtig, wie Sie sie gestalten.
Haben Sie ein Logo mit kompliziertem Text oder Details? Wir empfehlen die Verwendung eines unterscheidbaren Elements, wie ein Monogramm oder ein Symbol aus Ihrem Branding, stattdessen.
Enthält Ihr Logo kleinen Text oder Details? Dies kann beim Verkleinern unleserlich sein. Wir empfehlen dringend die Verwendung von kontrastreichen oder sogar fettgedruckten Elementen für maximale Sichtbarkeit.
Es ist auch ratsam, einen transparenten Hintergrund zu verwenden, da dies ein nahtloses Verschmelzen Ihres Favicons mit verschiedenen Browser-Themen ermöglicht. Ein einfarbiger Hintergrund ist jedoch eine gute Idee, wenn er die Klarheit des Symbols verbessert.
Möchten Sie, dass Ihr Favicon poliert und leicht erkennbar aussieht? Verwenden Sie scharfe Kanten in einem ausgewogenen Design.
Wie man ein Favicon aus einem Logo erstellt
Wenn Sie bereits ein Logo mit logogenie.com erstellt haben, ist es an der Zeit, ein Favicon zu erstellen. Hier sind beliebte Möglichkeiten, dies zu tun.
Online-Favicon-Generatoren
Verwenden Sie ein Online-Tool/Generator wie Favicon.cc, Favicon.io oder RealFaviconGenerator, um den Prozess bequem und schnell zu gestalten - ohne manuelles Ändern der Größe und Konvertieren Ihres Logos in Dateiformate. [Wir haben auch einen Leitfaden zu den richtigen Logogrößen vorbereitet.]
Laden Sie Ihr Markenlogo hoch und konvertieren Sie es in verschiedene Favicon-Größen (und generieren Sie sogar eine oder mehrere Auflösungen, wie Sie es für erforderlich halten, um die Kompatibilität Ihres Favoritensymbols auf verschiedenen Geräten, Browsern und Betriebssystemen sicherzustellen).
- Laden Sie Ihr Logo-Bild hoch.
- Passen Sie die Einstellungen des Online-Favicon-Generators an.
- Laden Sie Ihr Favicon herunter!
(Einige Tools bieten auch ein Paket mit den verschiedenen Favicon-Versionen an, um ein konsistentes Aussehen zu gewährleisten und Ihnen zeitsparende Mittel zum Ändern der Größe und Konvertieren auf Ihrer Seite zu bieten.)
Grafikdesign-Tools/Software
Möchten Sie ein individuelles Favicon? Wir empfehlen die Verwendung von Illustrator, Adobe Photoshop, Canva oder GIMP. Bevor Sie beginnen, legen Sie die Größe der Leinwand fest (Abmessungen: 128x128 px oder 64x64px) für die besten Ergebnisse.
Sie müssen möglicherweise Ihr Firmenlogo verkleinern und anpassen (oder zuerst ein Firmenlogo erstellen), um Sichtbarkeit und Klarheit auch bei kleineren Größen sicherzustellen. Wir empfehlen, ein scharfes und sauberes Design für eine bessere Skalierung zu entwerfen.
Vergessen Sie nicht, es im PNG-Format zu speichern, bevor Sie es in ein Favicon-Format wie ICO für die Kompatibilität konvertieren. [Wenn Sie in Photoshop entwerfen, wählen Sie "Für Web speichern", um die Dateiqualität und -größe entsprechend zu optimieren.]
Die Umwandlung des Bildes in das Favicon-Format
Der Designprozess endet nicht mit Ihrer fertigen JPG/PNG-Datei, denn Sie müssen sie in das ICO-Format konvertieren, um die Browserkompatibilität sicherzustellen. Verwenden Sie Konvertierungstools wie ICOConvert, ConvertICO und Favicon.io dafür.
Obwohl Sie eine Standardgröße bevorzugen (16x16 usw.), empfehlen wir, mehrere Größen zu generieren, um sicherzustellen, dass die richtige Größe für verschiedene Geräte verfügbar ist. WordPress und andere Plattformen ermöglichen jedoch auch das direkte Hochladen einer PNG-Datei.
Dennoch kann eine ICO-Version maximale Kompatibilität über verschiedene Plattformen hinweg gewährleisten.
Wie man ein Favicon zu Ihrer Website hinzufügt
Nun, zum nächsten Schritt. Mit Ihrem Favicon bereit, gehen wir zum nächsten wichtigen Schritt über: Laden Sie es auf Ihre Website hoch.
Gehen Sie zum Stammverzeichnis und laden Sie es dort hoch. Alternativ können Sie die Favicon-Datei direkt unter /favicon.ico platzieren, um sicherzustellen, dass sie von den meisten Browsern automatisch erkannt wird.
Verwenden Sie einen No-Code-Website-Builder wie Dorik, Wix, Shopify oder WordPress? Gehen Sie zu den Theme-Einstellungen und laden Sie das Favicon dort hoch. Wenn Sie nicht wissen, wo Sie es in den Einstellungen hochladen können, gehen Sie zum dedizierten Favicon-Upload-Bereich.
Wenn Sie jedoch eine benutzerdefinierte Website haben, die eine manuelle Integration erfordert, müssen Sie sicherstellen, dass sie an einem zugänglichen Ort gespeichert ist.
Aktualisieren des HTML-Codes
Bereich des HTML-Codes:
- Fügen Sie das Link-Tag in den ein
- Ist das Favicon in einem Unterordner gespeichert? Ersetzen Sie favicon.png durch den tatsächlichen Dateipfad Ihres Favicons. Verbessern Sie die Kompatibilität mit einem zusätzlichen Tag, da einige Webbrowser eine ICO-Datei benötigen.
Mit zusätzlichen Meta-Tags können Sie Icons für Android-Geräte, Apple-Geräte oder Windows identifizieren oder spezifizieren und so eine reibungslose Benutzererfahrung mit mehreren Favicon-Versionen sicherstellen.
Aktualisieren des CMS- oder WordPress-Favicons
WordPress
Gehen Sie zu Design > Anpassen > Seitenidentität.
Laden Sie das Favicon hoch.
Shopify
Navigieren Sie zu Einstellungen > Dateien oder innerhalb Ihres Theme-Editors.
*Andere Website-Builder wie Squarespace oder Wix haben möglicherweise ihre eigenen Upload-Optionen, die Sie in den Einstellungen finden können. TIPP: Überprüfen Sie Ihr Favicon in verschiedenen Browsern und auf verschiedenen Geräten und prüfen Sie, ob es korrekt angezeigt wird.
Testen und Fehlerbehebung
"Mein Favicon wird nicht angezeigt. Was soll ich tun?" Löschen Sie den Browsercache und aktualisieren Sie die Seite. Bedenken Sie, dass einige Browser möglicherweise Zeit benötigen, um Ihr neu hochgeladenes Favicon zu erkennen.
Überprüfen Sie außerdem, ob das Favicon mit Tools wie einem Online-Favicon-Generator-Checker implementiert wurde.
Aber wenn Sie das neu hochgeladene Favoritensymbol immer noch nicht sehen können, überprüfen Sie den Dateipfad erneut. Stellen Sie sicher, dass er in Ihrem HTML-Code korrekt verlinkt ist. Schließlich stellen Sie sicher, dass es konsistent auf mehreren Browsern wie Edge, Firefox, Chrome und Safari angezeigt wird.
Best Practices für Favicon-Design
Verwenden Sie Ihr Logo oder Markensymbol, um Benutzern zu helfen, Ihre Website beim Durchsuchen von Startbildschirmen und Lesezeichenlisten zu erkennen.
Wenn Sie kein Logomark haben, das in das quadratische Canvas passt, denken Sie daran, den erkennbarsten Teil zu verwenden.
Ein transparenter Hintergrund kann eine bessere Wahl sein als einer mit Hintergrundfarben. Einige Benutzer finden letztere möglicherweise zu überwältigend und oft veraltet. Außerdem kann eine transparente Version praktisch überall geteilt oder hochgeladen werden, da sie nicht im Widerspruch zu den Hintergrundfarben eines Geräts, eines Browsers oder einer Website steht.
Einfachheit ist der Schlüssel zu einem effektiven Favicon!
Verwenden Sie keine komplizierten Linien oder komplexen Text, insbesondere wenn Sie die kleinste Größe verwenden. Es muss erkennbar sein, auch aus der Ferne, daher empfehlen wir die Verwendung der vereinfachten und verdichteten Version Ihres Logos, wenn Sie ursprünglich die farbenfrohe und komplexe Version verwendet haben.
Branding berücksichtigen
Wie wird es von Personen wahrgenommen, die Ihre Website zum ersten Mal besuchen? Sie müssen es mit den aktuellen Branding-Stilrichtlinien abstimmen, um Konsistenz sicherzustellen! Denken Sie daran, es ist Teil einer größeren Identität, also stellen Sie sicher, dass es wie ein Teil Ihrer Marke aussieht.
Den gesamten Raum nutzen
PRO-Tipp: Um den Raum optimal zu nutzen, füllen Sie den Hintergrund Ihres Favicons mit Farbe, bevor Sie Ihr Logo/Ikon in die Mitte einfügen.
Sie benötigen jedoch keinen einfarbigen Hintergrund, um den gesamten Raum zu nutzen, da transparente Hintergründe perfekt funktionieren. Insgesamt, egal was Sie in den Raum setzen, stellen Sie sicher, dass es sich näher an die Grenzen Ihres Favicon-Designs erstrecken kann, um die Klarheit zu verbessern.
Verwenden Sie eine SVG-Datei für moderne Browser, da sie eine ausgezeichnete Skalierbarkeit bietet.
Da sie vektorbasiert ist, kann sie unabhängig von der Größe die Schärfe beibehalten, was ideal ist, um Ihr Webdesign zukunftssicher zu machen und auf hochauflösenden Displays zu glänzen. Sie ist auch leichtgewichtig und verbessert die Gesamtleistung der Website und reduziert die Ladezeiten.
Abschließende Gedanken
Verwenden Sie ein leicht erkennbares, einfaches, fettgedrucktes und einfaches Favicon ohne übermäßige Details - das kann es in kleinen Größen weniger sichtbar machen. Halten Sie es markenkonform, um Professionalität zu verbessern und Ihre Identität zu stärken. Stellen Sie Klarheit und Kompatibilität auf allen Plattformen sicher.
Die oben beschriebenen Schritte sollten Ihnen helfen, ein professionell aussehendes Favicon für Ihre Webseite oder Website mit Ihrem Logo zu erstellen. Also, legen Sie los, erstellen Sie ein Favicon und integrieren Sie es, um Ihre Website poliert und für Ihr Publikum überall erkennbar zu machen.
