Was ist der Sinn von Favicons?

Wenn ich den Leuten von der Bedeutung eines Favicons für ihre Online-Branding-Strategie erzähle, sagen sie normalerweise dasselbe: "Nimmst du dieses Branding-Ding nicht ein bisschen zu weit?"

Meine Antwort lautet normalerweise: "Nicht, wenn Sie Ihre eigenen Branding-Bemühungen ernst meinen!"

Es ist wahr, Favicons sind sehr kleine Dinge, wahrscheinlich das unwichtigste Bit einer Site, aber es ist die Liebe zum Detail, die eine Site hervorhebt; und selbst wenn es verrückt klingt, sind favicons aus branding-sicht sehr wichtig.

Wenn man bedenkt, dass es sich bei WDD um eine Website handelt, die sich an ein Designerpublikum richtet, dann denke ich, dass viele von Ihnen bereits wissen, was Favicons sind und wie man sie erstellt. Aber dieser Artikel kann Ihnen immer noch helfen zu verstehen, warum Sie sie machen sollten, und auch als eine gute Ressource Seite dienen.

Ich teile eine große Liste mit Favicon-bezogenen Ressourcen unten, also bookmarken Sie diese Seite für zukünftige Referenz. Oh, und wenn Sie das tun, beachten Sie das WDD Favicon rechts in Ihrer Lesezeichenliste;)

Nur für den Fall, dass Sie kein Designer oder irgendeine Art von Black-Belt in Favicon-Arts sind, deckt dieser Artikel wahrscheinlich alles ab, was Sie jemals über diese schwer fassbaren kleinen 16 × 16 Pixel Quadrate und sogar einige interessante Favicurities wissen müssen . Also viel Spaß!

Was ist ein Favicon?

Favicons sind kleine quadratische Bilder, gewöhnlich 16 × 16 Pixel, die von Webbrowsern verwendet werden, um eine graphische Darstellung der besuchten Site auf der linken Seite der Adressleiste des Browsers anzuzeigen. Sie haben wahrscheinlich schon viele Favicons gesehen, auch wenn Sie nicht wissen, was sie sind. Wenn Zweifel bestehen, hilft das Bild unten.

Zwei Beispiele für Favicons in einem Google Chrome-Browser mit Tabs

Wenn Sie daran interessiert sind, ein Stück Internetgeschichte zu verstehen, ist hier eine interessante Tatsache:

Das Wort favicon ist ein portamentau aus den Wörtern "favorite" und "icon", und es wurde so benannt, weil es zuerst von Microsoft Internet Explorer 5 unterstützt wurde und nur für den Fall, dass Sie nicht IE verwenden, diese Browser-Lesezeichen-Funktion heißt Favoriten.

Was ist der Zweck eines Favicons?

Zurück in den frühen Tagen des Internets, Werkzeuge wie Google Analytics waren nur Träume in den Köpfen einiger Web-Nerds, so seltsam wie dies klingen mag, zu dieser Zeit wurden Favicons als eine Möglichkeit, Website-Traffic durch geschätzt Zählen der Anzahl der Besucher, die die Seite mit einem Lesezeichen versehen haben. (Das ist ein weiterer interessanter Ausschnitt in der Geschichte des Internets!)

Aber abgesehen von interessanten Fakten, ist der Hauptgrund für Favicons heutzutage, die Benutzererfahrung zu verbessern. Favicons werden in allen modernen Browsern in der Adressleiste, in der Linkleiste, im Lesezeichenbereich und in den Browser-Tabs verwendet. Außerdem zeigen einige Browser Favicons an, wenn Sie einen Verknüpfungslink für die entsprechende Website auf Ihrem Desktop und Ihrem Mobilgerät erstellen.

Der Hauptgrund für ein Favicon ist sicherlich die deutliche Verbesserung der Benutzerfreundlichkeit. Eine Website ohne eine wird ein generisches Browsersymbol auf allen oben genannten Interaktionspunkten zeigen, und wenn Sie sich um Ihre Benutzererfahrung kümmern, müssen Sie sich um Favicons kümmern.

Aber ich kann nicht vermeiden, Dinge durch die Linse von Branding, meinem Fachgebiet, zu sehen, also denke ich, Favicons sind aus branding-Sicht noch relevanter. Auch bei so vielen Interaktionspunkten ist es kein Verbrechen, sie zur Steigerung der Markenbekanntheit zu nutzen. Die Wahrheit ist, dass es immer eine herausfordernde Aufgabe ist, kreative Wege zu finden, um Ihr Online-Branding zu verbessern. Ein Favicon zu haben ist eine einfache und einfache Möglichkeit, dies zu erreichen. Also hol dir einen Freund!

Wie erstelle ich ein Favicon?

Das Erstellen eines Website-Favicons ist kinderleicht. In der Tat, Sie müssen nicht einmal ein Designer sein, um das zu tun. Sicherlich hilft es, wenn Sie es sind, denn Sie können Ihre Fähigkeiten einsetzen, um etwas zu schaffen, das wirklich herausragt, aber selbst die weniger technisch versierten von uns können es in ungefähr 5 Minuten oder weniger mit den richtigen Werkzeugen tun.

Auf den Websites in der folgenden Liste können Sie ein Favicon erstellen, indem Sie einfach ein bereits vorhandenes Bild hochladen. Wenn Sie also ein Favicon für Ihre Marke erstellen möchten, müssen Sie lediglich Ihr Logo auf eine der folgenden Websites hochladen und die Favicon-Datei herunterladen. Das is doch Babyleicht.

Hier ist die Favicon-Generatorliste, nach der Sie suchen:

Die oben genannten Websites variieren stark in Bezug auf die resultierende Datei, die Sie erhalten. insbesondere in Bezug auf Dateigröße und Erweiterung. Wenn Sie eine möglichst kompatible Datei suchen, empfehlen wir dringend, ein Bild im Format 16 × 16 mit dem Format "ico" herunterzuladen.

Wenn du etwas Inspiration brauchst, probiere die folgenden Favicon-Galerien aus:

Wie benutze ich dein Favicon?

Sobald Sie Ihr Favicon sorgfältig entworfen haben, sollte die Installation auf Ihrem Server in zwei einfachen Schritten nicht länger als ein paar Minuten dauern. Dazu benötigen Sie Zugriff auf den Stammordner Ihrer Website und ein Textbearbeitungstool, um den HTML-Code Ihrer Website zu ändern.

Schritt 1

Sie müssen die Datei "favicon.ico" auf Ihren Server hochladen. Um dies zu tun, zeigen Sie Ihre Browser-Adressleiste auf Ihren FTP-Server; Ihre URL sollte ähnlich aussehen:

ftp://[email protected]

Drücken Sie die Eingabetaste und der Browser fordert Sie zur Eingabe eines Benutzernamens und eines Kennworts auf, bevor Sie den Zugriff auf den Dateiserver gewähren. Sobald Sie in sind, laden Sie einfach die Datei "favicon.ico" in den Stammordner und Sie sind fertig.

Schritt 2

Jetzt müssen Sie die HTML-Seite Ihrer Website bearbeiten, damit Browser Ihr Favicon-Bild finden. Lassen Sie Ihr FTP-Fenster geöffnet, suchen und laden Sie die Datei "index.html" oder "header.php" von Ihrem Server herunter und führen Sie die folgenden Schritte entsprechend der Datei durch, die Sie erhalten:

Wenn Ihre Website aus reinem HTML besteht, fügen Sie den folgenden Code in den HEAD-Bereich der Datei "index.html" ein und vergessen Sie nicht, "yoursite.com" für Ihre eigene Website-Adresse zu ändern.

Wenn Sie WordPress verwenden, fügen Sie den folgenden Code in den HEAD-Bereich Ihrer Datei "header.php" ein.

Laden Sie die Datei dann dorthin zurück, wo Sie sie gefunden haben. Sie sind fertig!

In der Tat sind die meisten modernen Browser schlau genug, um Ihre Favicon-Datei auch ohne Code zu finden, aber nur so lange das Favicon-Bild 16 × 16 Pixel hat, wurde es als "favicon.ico" bezeichnet und ist im Stammordner Ihres Website-Ordners gespeichert.

Wie erstelle ich ein Favicon in Photoshop?

Mit so vielen Werkzeugen, die Ihnen helfen, Ihr Favicon zu erstellen, warum sollten Sie den harten Weg gehen und es in Photoshop erstellen? Nun, wenn Sie ein Designer sind und das Beste aus Ihrem Favicon herausholen wollen, ist das sicher die professionelle Art, es zu tun. Der Trick ist, dass Photoshop "ico" -Dateien nicht nativ unterstützt, also müssen Sie Laden Sie dieses Plugin von Telegraphics herunter .

Stellen Sie sicher, dass Sie es installieren, bevor Sie das folgende Tutorial befolgen. Photoshop wird ohne es nicht funktionieren.

Suchen Sie in Ihrem Photoshop-Feld "Speichern unter" nach der Option "ICO", um zu bestätigen, dass das Plugin installiert ist.

Erstellen Sie ein neues Dokument in Photoshop, indem Sie den Menüpunkt "Datei" und die folgende Option "Neu" wählen und legen Sie dann Ihre Leinwand auf 64 × 64 Pixel fest. Warum? Da die 16 × 16-Favicon-Endgröße so klein ist, können Sie mit einer größeren Arbeitsfläche Ihren kreativen Saft fließen lassen. Dann fügen Sie Ihr Logo in das Dokument ein und lassen Sie Ihre magische Einhorn-kreative Kraft los.

Sobald Sie fertig sind, wählen Sie einfach das Menü "Bild" und die folgende Option "Bildgröße" und verkleinern Sie das Bild auf 16 × 16 Pixel. Denken Sie daran, auf "Resample Image" zu klicken und wählen Sie "Bicubic Sharper", um sicherzustellen, dass das Bild bei der Größenanpassung nicht unscharf wird. Wenn Sie das Endergebnis nicht mögen, machen Sie einfach Ihre letzten Änderungen mit "AltCtrl / AltCmd + Z" rückgängig und arbeiten Sie weiter an dem Design, bis Sie damit zufrieden sind.

Um das Favicon zu beenden, klicken Sie einfach auf das Menü "Datei" und die folgende Option "Speichern unter", dort erinnern Sie sich, Ihre Datei als "favicon.ico" zu benennen. Noch einmal, Arbeit erledigt!

Fazit

Favicons sind eines dieser kleinen Dinge, denen wir normalerweise nicht zu viel Aufmerksamkeit schenken, aber die Wahrheit ist, dass sie alles andere als unbedeutend sind, sie sind ein sehr wichtiger Teil des Webs, sowohl von einer Benutzeroberflächenperspektive als auch von einem Brandingpoint aus. Sicht.

Einige sagen, dass große Dinge in kleinen Größen kommen, und ich denke, das gilt auch für Favicons, weil jeder Webdesigner und / oder Brandingspezialist sich die Zeit nimmt, den Websites seiner Kunden ein Favicon hinzuzufügen, auch wenn der Client keine hat Die Idee, was ein Favicon ist, zeigt viel Professionalität und Liebe zum Detail; die Qualität, die jeder Kunde schätzt.

Erstellen Sie Favicons für Ihre Kunden? Sind sie zu viel Mühe für zu wenig Belohnung? Lass uns deine Gedanken in den Kommentaren wissen.

Ausgewähltes Bild / Vorschaubild, verwirrtes Bild über Shutterstock

Web-Design Branding wie man Favicon Tipps und Tricks

Was ist der Sinn der Favicons?