Hat Ihr Blog ein benutzerdefiniertes Favicon? Wenn nicht, sollte es wirklich. Heute erfahren Sie, was ein Favicon ist, warum Sie eines benötigen und wie Sie ein Favicon für Ihr Blog oder Ihre Website erstellen.
Ich sehe immer noch Tonnen von Blogs ohne einen, also wenn Ihr Blog einer von ihnen ist, tun Sie sich selbst einen Gefallen und erstellen Sie jetzt einen mit dem Tutorial unten. Ich verspreche, es wird nicht lange dauern und es macht auch irgendwie Spaß!
Aktualisiert: 11/4/2020
Offenlegung: Dieser Beitrag kann Affiliate-Links enthalten (mit einem * gekennzeichnet), was bedeutet, dass ich eine kleine Provision erhalten kann, wenn Sie einen Kauf mit meinem Link tätigen. Ich schätze Ihre Unterstützung und werde niemals Produkte empfehlen, die ich nicht alleine stehe.
Was ist ein Favicon?
Ein Favicon, ausgesprochen fave-icon, ist die Abkürzung für Favorites Icon, das benannt wurde, weil es in Ihrer Liste der Website-Lesezeichen angezeigt wird, mit anderen Worten, Ihre Lieblingswebsites. Favicons sind eine kleine Version Ihres Logomarks, die als Browser-Tab-Symbol, Lesezeichensymbol oder Verknüpfungssymbol angezeigt wird.
Favicons sind eine schnelle Möglichkeit für Benutzer, Ihre Website auf den ersten Blick zu erkennen. Werfen Sie einen Blick auf meine Browser-Tabs unten. Erkennen Sie die meisten Websites, die ich hier geöffnet habe?
Warum müssen Sie ein Favicon erstellen?
Wenn Sie Ihrem Blog oder Ihrer Website kein benutzerdefiniertes Favicon zuweisen, wird ihm entweder ein generisches Symbol oder überhaupt kein Symbol zugewiesen. Im schlimmsten Fall verwendet Ihr Blog das Favicon Ihres Hosting-Unternehmens. Im besten Fall weist Ihnen jeder Browser sein eigenes Ding zu: Chrome fügt einen kleinen Globus hinzu (siehe Bild oben), Safari fügt die erste Initiale der URL Ihrer Website in einem grauen Feld hinzu (siehe Bild unten) und Firefox fügt überhaupt nichts hinzu. So oder so, sprich über LANGWEILIG!
Schauen Sie sich die Browser-Tabs oben noch einmal an. Erkennbare Symbole machen es einfach, schnell zwischen Websites hin und her zu klicken, nicht wahr? Wenn Sie eine Website in Ihren Lesezeichen speichern, wird das Favicon auch in Ihrer Lesezeichenliste angezeigt. Dies macht es einfach, schnell zu finden, was Sie suchen. Helfen Sie Ihren Lesern, Ihr Blog schnell in ihren Registerkarten oder Lesezeichen zu finden, indem Sie ein Favicon einfügen.
Es gibt einen anderen Ort, an den Sie wahrscheinlich nicht gedacht haben, wo Favicons angezeigt werden: Wenn Sie Websites haben, die Sie häufig auf Ihrem Telefon besuchen, können Sie sie jederzeit als Verknüpfung zum Startbildschirm Ihres Telefons hinzufügen. Wenn Ihre Leser es lieben, Ihre Website häufig zu besuchen, möchten sie möglicherweise eine Verknüpfung von ihrem Startbildschirm aus hinzufügen, damit sie auf jeden Fall ein gut aussehendes Symbol haben, das sich von den anderen bereits hinzugefügten App-Symbolen abhebt.
Und hier ist eine neue Registerkarte von Safari. Stellen Sie sich Ihre Website-Verknüpfung hier vor. Sie möchten nicht, dass Ihr Blog durch ein langweiliges graues Symbol wie das „C“ -Symbol unten dargestellt wird?
So entwerfen Sie ein Favicon für Ihr Blog
Einige Designregeln zum Erstellen eines Favicons
Lassen Sie uns zunächst über einige Best Practices zum Entwerfen Ihres Favicons sprechen.
- Ihr Favicon sollte auffallen und sofort erkennbar sein
Der beste Weg, Ihr Favicon erkennbar zu machen, besteht darin, Ihr Logo als Ausgangspunkt zu verwenden. Auch wenn Ihr Blog noch nicht sehr berühmt ist, ist das in Ordnung. Durch die Verwendung konsistenter Designelemente und -themen in Ihrem gesamten Branding hebt es sich von den anderen ab und hilft den Menschen, Ihre Marke zu erkennen.Hier sind einige Optionen, die Sie beim Entwerfen Ihres Favicons berücksichtigen sollten:- Ihr Logo oder Logomark
- einfachere Variante Ihres Logos
- ein Symbol oder Symbol, das Ihre Marke darstellt
- die Initialen (oder nur die erste Initiale) Ihres Markennamens – stellen Sie sicher, dass der Stil der Initialen mit dem Design und Stil Ihres ursprünglichen Logos übereinstimmt
- ein einfaches Foto – In letzter Zeit habe ich Blogger gesehen, die ihre Profilfotos ein Favicon
- Ihr Favicon sollte ein sehr einfaches Design verwenden
Werfen Sie einen guten Blick auf die Favicons Ihre Browser-Tabs jetzt. Was fällt Ihnen auf? Sie sind winzig! Das typische Favicon wird mit 16 x 16 Pixeln angezeigt. Aus diesem Grund ist es wichtig, dass Sie eine sehr vereinfachte Version Ihres Logos oder Branding-Elements verwenden. Detaillierte und aufwendige Grafiken lassen sich bei einer so kleinen Größe nicht gut skalieren. Sie werden höchstwahrscheinlich wie ein verschwommenes Durcheinander aussehen. - Stellen Sie sicher, dass Ihr Favicon einen guten Kontrast zu hellen und dunklen Hintergründen aufweist
Je nach den Vorlieben Ihrer Leser können die Browser-Registerkarten weiß, schwarz, hell oder dunkelgrau sein. Aus diesem Grund sollten Sie sicherstellen, dass Sie ein Favicon mit Farben erstellen, die sowohl auf hellen als auch auf dunklen Hintergründen gut kontrastieren.Einige Favicons haben transparente Hintergründe und sie funktionieren, weil ihre Farben auf jedem Hintergrund gut kontrastieren. Wenn Ihre Grafik zu hell oder zu dunkel ist, kann es hilfreich sein, einen einfarbigen Kreis oder ein Quadrat hinter der Grafik oder dem Logo hinzuzufügen, damit sie auffällt und auf jeder farbigen Registerkarte lesbar ist. - Schauen Sie sich Ihre Browser-Tabs für Inspiration an
Klicken Sie sich im Web um und schauen Sie sich die Favicons an, die auf Ihren Lieblingswebsites verwendet werden. Beachten Sie, ob sie auf hellen oder dunklen Hintergründen funktionieren. Hat die Grafik einen transparenten Hintergrund oder befindet sie sich auf einem farbigen Quadrat oder Kreis?
Favicon Inspiration
Favicons mit Transparenz
Beachten Sie, wie sich diese Symbole auf dunklem oder hellem Hintergrund abheben können, mit Ausnahme des letzten, ‚Sag Ja. Dieser hätte wahrscheinlich auf ein weißes Quadrat gestellt werden sollen. Und es ist ein wenig schwer zu sagen, aber das vierte Symbol, die Lotusblume, hat tatsächlich einen sehr feinen schwarzen Umriss. Auf diese Weise können Sie es leicht sehen, auch wenn es auf hellen Registerkarten angezeigt wird.
Favicons mit farbigem Hintergrund
Diese Favicons wurden mit einem quadratischen oder abgerundeten quadratischen Hintergrund entworfen, um sicherzustellen, dass sie sowohl auf dunklen als auch auf hellen Registerkarten deutlich sichtbar sind.
Favicons mit Initialen
Einige dieser Initialen-Icons verwenden einen farbigen Hintergrund, andere einen transparenten. Stellen Sie in jedem Fall sicher, dass es lesbar ist.
Favicons mit einem Profilfoto
Die Verwendung eines Profilfotos scheint ein neuer Trend zu sein, der sich durchsetzt. Wenn Sie diesen Weg gehen, Stellen Sie sicher, dass Sie in allen Ihren Online-Profilen dasselbe Profilfoto verwenden, damit es sofort erkennbar ist.
So erstellen Sie ein Favicon für Ihr Blog
Erstellen Sie Schritt für Schritt eine Favicon-Datei
- Erstellen Sie die Grafik in einem Bildeditor
Verwenden Sie einen Bildeditor wie Photoshop (kostenlose Testversion anmelden) *, Pixlr, BeFunky oder Canva,* Erstellen Sie Ihre Favicon-Datei mit 512 x 512 Pixel. Obwohl es in Browser-Tabs nur 16 × 16 angezeigt wird, wird es in einigen der anderen oben genannten Anwendungen auch in größeren Größen angezeigt. - Vorschau Ihres Favicons in winziger Größe
Wenn Sie mit dem Erstellen eines grafischen Favicons fertig sind, zoomen Sie aus dem Bild, bis Ihre Grafik winzig wird, ungefähr so groß wie die Favicons, die Sie in Ihrem Browser sehen. Ist es noch lesbar? Macht es Sinn? Wenn ja, großartig, fahren Sie mit dem nächsten Schritt fort. - Speichern Sie die Datei
Speichern Sie Ihre Grafik zunächst als bearbeitbare Datei in Ihrem Softwareprogramm, damit Sie sie bei Bedarf erneut optimieren können.Speichern Sie es als Nächstes als PNG-Datei. - Generieren Sie ein Favicon.ico-Datei
Verwenden Sie einen Favicon-Generator, um Ihre PNG-Datei in eine ICO-Datei zu konvertieren. Dieser Schritt ist notwendig, da einige Browser nur ICO-Dateien lesen.
Alternativen zum eigenen Design von Grund auf neu
Wenn Sie schnell und einfach ein Text- oder Initialen-Favicon erstellen möchten, verwenden Sie den Text > ICO Favicon Generator. Ich habe dieses schnell für DYOB erstellt:
Sie können auch den Emoji > ICO Favicon Generator verwenden, wenn Sie es sich wirklich einfach machen möchten. 
Fügen Sie schließlich Ihr neues Favicon zu Ihrem Blog oder Ihrer Website hinzu
WordPress
Der einfachste Weg, ein Favicon in einem selbst gehosteten WordPress-Blog hinzuzufügen, besteht darin, sich in Ihrem Dashboard anzumelden. Gehen Sie dann zu Erscheinungsbild > Anpassen und klicken Sie auf die Registerkarte Websiteidentität. Wählen Sie im Abschnitt Site-Symbol Ihr neues Favicon aus.ico-Datei zum Hochladen.
Und boom, du bist fertig, schau es dir in deinem Browser an! Beachten Sie, dass Sie möglicherweise einige Male aktualisieren und / oder den Cache in Ihrem Browser löschen müssen, bevor er angezeigt wird.
So fügen Sie ein Favicon zu einem WordPress.com blog.
Squarespace
Es ist sehr einfach, auch ein Favicon zu Squarespace hinzuzufügen.
Blogger
Melden Sie sich in Ihrem Blog an und klicken Sie in der linken Spalte auf Einstellungen. Klicken Sie dann auf Favicon unter dem Abschnitt Basic. Laden Sie als Nächstes Ihr Favicon hoch.ico-Datei, speichern und boom!
Testen Sie Ihr neues Favicon
Wenn Sie testen möchten, wie Ihr Favicon auf verschiedenen Plattformen und Einstellungen aussieht, verwenden Sie diesen Favicon-Checker. Wenn Sie das Aussehen Ihrer Symbole auf einer der Plattformen, z. B. iOS (iPhones), bearbeiten möchten, können Sie den Generator verwenden, um sie für jede Einstellung zu optimieren. Dann folgen Sie einfach den Anweisungen, um sie alle zu Ihrem Blog hinzuzufügen.
Du hast gerade gelernt, wie man ein Favicon erstellt
Herzlichen Glückwunsch! Wenn Sie Ihren eigenen Blog entwerfen, möchten Sie sicherstellen, dass Sie keine Details auslassen, auch nicht die kleinsten. Das Hinzufügen eines benutzerdefinierten Favicons hilft Ihren Lesern nicht nur dabei, Ihr Blog schnell in ihren Registerkarten oder Lesezeichen zu finden, sondern zeigt auch, dass es Ihnen wichtig ist, Ihr Branding konsistent zu halten.
Jetzt sind Sie dran
Lassen Sie es mich in den Kommentaren wissen, wenn Sie Fragen zum Erstellen eines Favicons haben oder Hilfe beim Identifizieren eines Favicontyps für Ihre Marke benötigen. Ansonsten teilen Sie uns bitte Ihr Favicon in den Kommentaren mit!
Und wenn Ihnen dieses Tutorial gefallen hat, teilen Sie es bitte mit, indem Sie auf eines der Symbole unter meiner Signatur klicken!
Dieser Beitrag wurde ursprünglich am 8/14/2013 veröffentlicht und am 2/11/2015 aktualisiert, dann wieder am 11/4/2020.
Hey freund, wollen freies DIY design zeug?
Ich habe eine ganze Bibliothek mit KOSTENLOSEN Waren nur für Sie! Schließen Sie sich den über 10.000 anderen an und erhalten Sie jetzt sofortigen Zugriff!