Im Webdesign kommt es, wie Sie wahrscheinlich wissen, auf jedes Detail an. Eine Person, die zu Ihrer Ressource gewechselt ist, sieht nicht jedes der Elemente einzeln, sondern nimmt das gesamte Bild als ein Paket wahr, das aus anderen kleinen Details besteht. Wenn Sie also bei der Entwicklung Ihrer Ressource etwas übersehen, kann dieses Detail später den ganzen Komplex, die ganze Komposition verderben.
Eine solche Kleinigkeit kann zum Beispiel der Hintergrund eines Buttons, eine falsch gewählte Schriftart eines kleinen Elements und sogar ein Favicon sein. Überzeugen Sie sich selbst - große, bekannte Websites haben ein individuelles Symbol, das im Abschnitt "Lesezeichen" des Browsers des Benutzers darauf hinweist. Ohne sie hätten die Entwickler der Ressource nicht die ursprünglich angestrebte Komposition erstellen können.
Daher sollten Sie beim Erstellen eines Designs für Ihre Website auf ein Detail wie das Favicon achten. In diesem Artikel werden wir darüber sprechen, wie man es an den allgemeinen Stil der Ressource anpasst und welche Größen dieses Bild haben sollte.
Website-Symbol
Lassen Sie uns zuerst definieren, was dieses Element ist. Werfen Sie jetzt einen Blick auf den Titel Ihres Browser-Tabs. Wie Sie sehen können, befindet sich links davon ein kleines Bild, das eine vereinfachte Version des Logos der Ressource anzeigt. Dasselbe Bild befindet sich auch neben dem Namen der Website, der in den Suchergebnissen angezeigt wird. Daran wird der Benutzer geleitet, wenn er den Titel sieht.
Viele Webmaster verstehen, dass ein solches Bild benötigt wird - aber nur wenige wissen, welche Favicon-Größe für die Website am besten geeignet ist. Daher geben wir in diesem Artikel nicht nur Informationen darüber, wie Sie ein solches Symbol erstellen und wie Sie es auf Ihrer Ressource installieren können, sondern sprechen auch über Bildgrößen.
Der Zweck des Favicons
Also wird das Bild in der Nähe des Website-Headers zur Identifizierung verwendet. Dies ist sein ursprünglicher Zweck: die Website, deren Namen wir sehen, auszudrücken und sie in den Augen der anderen hervorzuheben. Möglichst einfach geschieht dies durch den Einsatz von Grafiken: Intuitiv nehmen wir Informationen in Bildern viel schneller und einfacher wahr als in Textform. Favicons helfen uns dabei. Aber vergessen Sie nicht, dass die Größe des Favicons in den Augen des Benutzers minimal ist. Dies ist kein Logo im „Header“der Website, das zusätzliche Informationen in Form von Inschriften, Erläuterungen oder Kontaktinformationen enth alten kann. Alles, was im Icon neben dem Namen angezeigt werden kann, sollte möglichst in die Größe des Favicons passen. Und er ist, wie schon angedeutet, einfach miniaturisiert (nur 16 mal 16 Pixel).
So wählen Sie ausFavicon?
Also, wie kann ein Webmaster ein Icon für seine Seite entwerfen? Es sollte beachtet werden, dass das einfache Komprimieren des Site-Logos meistens nicht funktioniert. Auf den Emblemen, die in Form eines Logos einer bestimmten Ressource angebracht sind, sind oft verschiedene Elemente sichtbar, die in Miniaturform nicht immer korrekt angezeigt werden. Es ist besser, ein solches Unternehmen sofort aufzugeben.
Natürlich lässt die Größe des Favicons nicht zu, dort einfach eine Beschriftung einzufügen. Jeglicher Text wird bei dieser Auflösung einfach unsichtbar sein. Wir müssen ein neues Icon entwickeln, das den Stil der Seite widerspiegelt. Wenden wir uns erneut den größten Websites zu, um Lösungen zu finden.
Viele verwenden den stilisierten Anfangsbuchstaben des Dienstnamens als Favicon. Das ist übrigens zum Beispiel Bing, Yahoo, Yandex, Wikipedia, Google. Es gibt einen anderen Ansatz: Wenn Sie einen kurzen Site-Namen haben, können Sie ihn als Hintergrund Ihres Symbols festlegen. Damit die Größe des Favicons (in Pixeln erreicht es, ich wiederhole, 16 x 16 Pixel) diese Inschrift korrekt anzeigt, sollte es nicht länger als 3 Buchstaben sein. Das macht zum Beispiel der Dienst Aol.
Wie erstelle ich ein Favicon?
Es gibt mehrere Möglichkeiten, ein Symbol für den Seitennamen zu erstellen. Am einfachsten ist es natürlich, mit verschiedenen vorgefertigten Lösungen zu arbeiten. Wir können über einige Dienste oder Programme sprechen, mit denen Sie ein Symbol aus einem vollwertigen Bild erstellen können, indem Sie es reduzieren. Ich würde jedoch empfehlen, ein solches Logo selbst zu entwickeln. Dies wird zunächst gebendie Möglichkeit, etwas zu lernen; und zweitens wird es mehr Werkzeuge bereitstellen. Alles, was Sie dafür wissen müssen, ist, was Sie zeichnen müssen, und auch wissen, welche Größe das Favicon in der endgültigen Version haben soll. Wir werden etwas später über die Symbolgröße für die Site sprechen, aber jetzt werden wir einige Feinheiten bei der Arbeit mit solchen Bildern beachten. Insbesondere sollte, ohne die Größe des Favicons für die Website zu erwähnen, das Format eines solchen Bildes geklärt werden. Wie erfahrene Designer anmerken, muss das Bild als-p.webp
Sie können das Bild beispielsweise mit Photoshop speichern, wo das Emblem gezeichnet wird.
Favicon-Abmessungen
Also, lassen Sie uns jetzt darüber sprechen, wie groß das Bild sein sollte, das wir neben dem Seitennamen in den Suchergebnissen sehen. Standardmäßig beträgt seine Größe, wie bereits erwähnt, nur 16 Pixel (auf jeder Seite). Wenn Sie jedoch versuchen, dieses Bild in Photoshop zu bearbeiten, werden Sie selbst sehen, wie umständlich das ist. Wir empfehlen daher, mit einem vergrößerten Bild zu arbeiten, das zukünftig einfach an den Rändern gestaucht und im gewünschten Format gespeichert werden kann.
Plattformübergreifend
Apropos, wie groß das Favicon auf Ihrer Website sein sollte, es gibt noch eine Sache, die Sie beachten sollten. Nicht alle Plattformen zeigen ein Ressourcenbild auf die gleiche Weise an. Beispielsweise „sehen“Geräte mit einem Retina-Display Ihr Favicon mit 32 x 32 Pixel. Und in Safari und auf der neuen Windows-Plattform erreichen diese Symbole überhaupt eine Größe von 64Pixel.
Daher empfehlen wir Ihnen, verschiedene Versionen des Icons zu speichern und zukünftig einfach für die Änderung je nach Plattform des Nutzers zu sorgen. Ein weiterer interessanter Punkt - Sie können versuchen, das Symbol im größten Format zu laden, indem Sie sich darauf verlassen, dass es je nach Browser „schrumpft“.
Externe Redakteure
Natürlich ist es gut, wenn du gut mit Photoshop umgehen kannst und weißt, welche Größe das Favicon haben soll und wie du es beim Speichern deines Bildes erreichst. Allerdings gibt es viele Einsteiger, die Grafikeditoren noch nicht so genau kennengelernt haben und daher nicht so einfach das gewünschte Bild zeichnen können. Um solchen Webmastern zu helfen, gibt es verschiedene Dienste, mit denen Sie automatisch das Symbol erstellen können, an dem Sie interessiert sind. Viele von ihnen sind sogar kostenlos, was keine Investition des Benutzers erfordert.
Manchmal muss man sich nur zur Arbeit anmelden, aber wie Sie verstehen, geschieht dies einmal - schließlich ändern Unternehmen ihr Favicon nicht so oft. Schauen Sie sich Google an, die das Logo jeden Tag ändern, aber das Symbol nicht berühren.
Wie installiere ich ein Favicon?
Im Allgemeinen ist es sehr einfach, Ihre Website so einzurichten, dass das gewünschte Bild korrekt angezeigt wird. Es reicht aus, eine Reihe einfacher Schritte auszuführen, die es Suchmaschinen sowie einfachen Browsern ermöglichen, die Informationen zu lesen.
Dazu muss das resultierende Bild mit gespeichert werdenmit dem Namen favicon.ico und im Stammverzeichnis Ihrer Ressource platziert. Das war's, jetzt wird Ihr Bild automatisch erkannt und nach einiger Zeit mit Ihrer Seite verlinkt.
Zusätzlich zu dieser Bindung können Sie eine weitere Zeile hinzufügen, die „vorschlägt“, wo sich Ihr Symbol befindet. Das sieht so aus:
Installieren Sie den Code in der Kopfzeile der Website.
Schlussfolgerungen
Also, nachdem Sie unseren Artikel gelesen haben, haben Sie herausgefunden, welche Größe ein Favicon für eine Website haben sollte und was es ist. Ich denke auch, dass Sie verstanden haben, dass es eine Notwendigkeit ist, das richtige Symbol für Ihre Ressource zu finden, da es Ihnen sowohl in Bezug auf die zunehmende Anerkennung als auch in Bezug auf eine zusätzliche Hervorhebung unter Ihren Mitbewerbern in die Hände spielt. Zumindest die größten Websites tun dasselbe, was als Paradebeispiel dienen kann. Und außerdem macht es keinen großen Aufwand - wenn Sie einmal ein Favicon erstellt und korrekt auf Ihrer Seite installiert haben, können Sie es für die nächsten Monate vergessen.
Deshalb experimentieren Sie gerne, lassen Sie sich etwas Neues einfallen, probieren Sie es aus - und alles wird klappen!
