website icon

Favicons: wie sie das Webdesign beeinflussen

  • 6 min read

Rating

5
(6)
In unserem alltäglichen Leben finden wir Symbole überall: ob auf Verkehrszeichen, Ladenlogos oder unseren Laptoptastaturen. Bilder helfen uns, Informationen besser zu verarbeiten.

Da es beim Umgang mit Internettechnologien entscheidend ist, so schnell wie möglich die richtigen Informationen zu erhalten, verwundert es kaum, dass Symbole ein wesentlicher Bestandteil des Webdesigns sind.

In diesem Artikel werden wir über Favicons sprechen. Sie sind wahrscheinlich der unwichtigste Teil einer Website, aber es ist die Liebe zum Detail, die eine Website auszeichnet.

Aus der Sicht des Brandings sind Sie entscheidend. Wir werden auch das Thema der Verwendung von Symbolen auf Websites ansprechen.

Was ist ein Favicon?

Favicons sind kleine Bilder, die normalerweise links in der Adressleiste des Browsers platziert sind. Sie haben typischerweise Abmessungen von 16 × 16 Pixeln.

Ein Favicon ist im Wesentlichen ein Logo-Symbol, das von Browsern verwendet wird. Es bietet Ihrer Website einen Grad an Einzigartigkeit, der fehlt, wenn der Browser neben dem Namen Ihrer Website ein generisches Favicon hinzufügt.


Platzierung von Favicons



Worin besteht der Zweck eines Favicons?

In den frühen Tagen des Internets wurden Favicons verwendet, um den Website-Traffic zu schätzen. Dafür wurde die Anzahl der Besucher gezählt, die die Seite mit einem Lesezeichen versehen haben.

Heutzutage besteht der Hauptgrund für die Verwendung von Favicons in der Verbesserung der Benutzerfreundlichkeit.

Sie werden in allen modernen Browsern in der Adressleiste, in der Linkleiste, im Lesezeichenbereich und in den Browser-Tabs verwendet.

Einige Browser zeigen Favicons an, sobald Sie einen Verknüpfungslink für die entsprechende Website auf Ihrem Desktop oder Ihrem Mobilgerät erstellen. Bei einer Website ohne Favicon wird dafür ein allgemeines Browsersymbol angezeigt.

Bei so vielen Interaktionspunkten ist die Nichtverwendung eines Favicons ein großes No-Go, wenn Sie die Bekanntheit Ihrer Marke steigern wollen.

Das Favicon kann dazu beitragen, Ihre Markenidentität zu stärken. Es macht jede Website unvergesslich.


Favicon
Beispiel eines Favicons


Wie erstelle ich ein Favicon?

Das Erstellen eines Favicons ist denkbar einfach. Sie können es selbst tun oder eine Online-Hilfe verwenden. Es gibt viele Websites, die Favicons für Sie generieren können.

Sie brauchen dafür nicht einmal einen Grafikdesigner. Sollten Sie jedoch eine globale Website mit globalem Branding planen, so ist ein professioneller Designer ratsam, der etwas Einzigartiges und zu Ihrer Marke passendes schaffen kann.

Formatierung eines Favicons

Favicons müssen nicht im .ico-Format erstellt werden, wie alle denken. Klar, das ICO-Format ist vielleicht der beliebteste Favicon-Dateityp, aber es ist bei weitem nicht der einzige.

Favicons gibt es in einer Vielzahl von Dateitypen.

Die vier gängigen Formate sind:
· .ico
· .gif
· .png
· .jpg

Unabhängig vom Dateityp sind Favicons quadratische Bilder, die üblicherweise in den Größen 16 × 16 und 32 × 32 (gemessen in Pixel) ausgegeben werden.

Obwohl 64 × 64 und noch größere Formate möglich sind, ist die Browserunterstützung für alle Formate größer als 16 × 16 nicht konsistent.

Wie füge ich es zu meiner Seite hinzu?

Sobald Ihre Datei fertig ist, kann sie problemlos auf dem Server abgelegt werden. Durch Zugriff auf das Textbearbeitungstool und den Stammordner auf Ihrer Website können Sie nun den HTML-Code Ihrer Website anpassen.

Zunächst sollten Sie die entsprechende Datei auf Ihren Server hochladen. Nachdem Sie die Adresszeile Ihres Browsers auf Ihren FTP-Server geschrieben haben, drücken Sie die Eingabetaste, melden sich an und laden die Daten in den Stammordner hoch.

Danach ändern Sie die HTML-Seite Ihrer Website. Sie fügen den Code, der im folgenden Bild gezeigt wird, in den Kopfbereich der „index.html“-Datei ein.




Wenn Sie mit WordPress arbeiten, fügen Sie den Code in den Kopfbereich der Datei „header.php“ ein.




Die Verwendung von Icons auf einer Website

Das Hauptziel bei der Verwendung von Symbolen sollte darin bestehen, dem Benutzer zu helfen, Informationen effizienter erfassen und verarbeiten zu können.

In der Regel wird hierfür viel Weißraum in Kombination mit Bildern verwendet, die nicht vom Inhalt ablenken. Der gezielte Einsatz von Symbolen kann minimale Inhalte bereichern.

Symbole verleihen dem Inhalt mehr Substanz und ermöglichen eine effektive und wortlose Kommunikation. Sie sollten verwendet werden, um auf Ihre Inhalte aufmerksam zu machen.

Die häufigste Verwendung von Symbolen ist die Auflistung von Diensten, Produkten oder Funktionen. Durch die Verwendung von Bildern erscheinen Ihre Servicelisten attraktiver.

Beispiel für Symbole zur Unterstützung einer Liste von Diensten:




Quelle

Verwendung von animierten Icons

Die Verwendung von Animationen in Icons verleiht ihnen einen neuen Glanz. Die Bewegung weckt die Aufmerksamkeit des Nutzers.

Animationen verbessern die Benutzererfahrung auf einer Website oder in einer App erheblich.

Mit der entsprechenden Gestaltung können Benutzer feststellen, welche Auswirkungen ihre Interaktionen auf die Website oder die App haben.


Animierte Icons


Fazit

Favicons sind normalerweise das, worauf wir nicht besonders achtgeben. Sie sind jedoch alles andere als unbedeutend; Sie sind sowohl aus Sicht der Benutzeroberfläche als auch aus Sicht des Brandings ein entscheidender Bestandteil des Webs.

Je mehr eine Website und ihr Favicon gemeinsam haben, desto besser. Die übrigen Symbole haben auf einer Website oder in einer App einen erheblichen Einfluss auf die Benutzerfreundlichkeit und das Markenbewusstsein.

Sie sollten zugleich relevant sowie präzise und für den Benutzer einfach verständlich und möglichst einprägsam sein.

Kontaktiere Uns

  • Dieses Feld dient zur Validierung und sollte nicht verändert werden.

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 5 / 5. Anzahl Bewertungen: 6

Bisher keine Bewertungen! Sei der Erste, der diesen Beitrag bewertet.

Teilen

Abonnieren Sie unseren Newsletter

Weitere ähnliche Artikel