Favicon ist ein Symbol einer Website oder Seite in Form eines kleinen Symbols mit einer Größe von 16 x 16 Pixeln (oder größer). Der Benutzer kann das Favicon als kleines Bild in sehen Adressleiste Browser links neben dem Link zu einer geöffneten Site, neben dem Site-Namen in Lesezeichen und Registerkarten, in den Ergebnissen einiger Suchmaschinen, Verzeichnisse, Lesezeichendienste usw.

Früher konnten Favicons nur im .ico-Format erstellt werden, da es nur vom alten Browser unterstützt wurde Internet Explorer. Hier kommt der Name Favicon (kurz für Englisches Wort FAV orites SYMBOL– „Symbol für Favoriten“). „Favoriten“ war die Bezeichnung für Lesezeichen im IE-Browser.

Heutzutage können Icons für Websites und Seiten in vielen anderen Formaten erstellt werden, darunter JPG, PNG, GIF und natürlich das gute alte ICO.

Warum brauchen Sie ein Favicon?

Durch die Installation solcher Symbole können Sie die visuelle Suche nach der gewünschten Registerkarte beschleunigen, insbesondere wenn viele davon geöffnet sind. Ein erkennbares Bild zu sehen ist viel einfacher und schneller als ein Blick auf Seitentitel.

So sehen Favicons in einem Browser aus.

Wenn Suchmaschinen Wenn Sie das Favicon Ihres Projekts in den Suchergebnissen anzeigen, wirkt sich dies positiv auf das Wachstum seiner Positionen aus. Ein schönes, stilvolles und gleichzeitig schlichtes Logo wird die Aufmerksamkeit der Zielgruppe auf sich ziehen und den Benutzer dazu ermutigen, Ihre Website statt der nächsten zu besuchen. All dies wird dazu beitragen, die Klickraten zu erhöhen und dementsprechend die Verhaltensfaktoren zu erhöhen.

Darüber hinaus bleibt das Symbol den Benutzern im Gedächtnis und wird nach einiger Zeit für ein breites Publikum erkennbar, was auch für Besucher eine zusätzliche Attraktion darstellt.

Notiz. Es ist besser, ein Favicon auf einer bereits optimierten Webressource zu installieren.

Beispielsweise verfügt die Yandex-Suchmaschine über spezielle YandexFavicons-Roboter, die Favicons indizieren. Sie besuchen etwa einmal im Monat Websites, um Abzeichen zu sammeln und zu aktualisieren.

In diesem Zusammenhang kommt es selten zu Aktualisierungen, nach denen es sich lohnt, nach einem geänderten oder neuen Symbol für die Site zu suchen. Daher sollten nach der Installation eines neuen Images Änderungen in der Anzeige Ihrer relativen Ressource mindestens zwei Wochen warten (dies ist das Minimum).

Sobald die Suchmaschine das Symbol findet, muss sie es in das PNG-Format konvertieren (sofern es im ICO-Format erstellt wurde). Danach finden Sie das Favicon Ihrer Ressource unter der Adresse (am Beispiel von Yandex): http://favicon.yandex.net/favicon/URL-address-of-your-site.

Wie erstelle ich ein Favicon für eine Website?

Es reicht nicht aus, ein Favicon nur „zur Schau“ zu erstellen. Wenn Sie möchten, dass es zu einer zusätzlichen Quelle für die Anziehung von Besuchern wird, ist es wichtig zu wissen, wie Sie ein Site-Symbol richtig erstellen.

Kataloge und Dienste zum Erstellen von Favicons

Sie können selbst ein Symbol für eine Website oder eine ihrer Seiten erstellen, insbesondere wenn Sie mit Photoshop und anderen ähnlichen Programmen vertraut sind. Wenn Sie weder die Fähigkeiten noch die Zeit noch die Lust haben, stehen Ihnen heute eine Fülle spezieller komfortabler Dienste zur Erstellung von Favicons und Galerien zur Verfügung, die vorgefertigte Icons für Ihre Projekte anbieten:

Und das sind nicht alles Generatoren und Kataloge, sodass ein moderner Webmaster leicht das Favicon finden kann, das ihm gefällt.

Erscheinungsbild des Symbols

Die Standardgröße des Favicons beträgt 16x16 Pixel. Es gibt auch die Größen 24x24, 32x32, 48x48 und 64x64. Sie müssen verstehen, dass das Symbol einer Website ihr Gesicht ist, von dem der Verkehr in gewissem Maße abhängt. Daher ist es notwendig, die Erstellung eines Favicons mit Bedacht anzugehen. Hier sind einige Regeln, wie ein Symbol aussehen sollte, um die Aufmerksamkeit der Benutzer zu erregen:

• Stil, der dem Thema der Website entspricht. Das Bild sollte von denselben Farben und Elementen dominiert werden, die auch bei der Gestaltung der Internetressource oder ihres Logos verwendet werden. Tatsächlich ist dies die Hauptaufgabe des Favicons – der Site zu entsprechen.
• Leicht zu verstehen. Sie sollten nicht eine Fülle von Elementen zeichnen und diese übereinander formen. Der Benutzer sollte beim Betrachten des Symbols verstehen, was darauf abgebildet ist, und nicht versuchen, Ihre „verborgene Bedeutung“ zu entschlüsseln. Vernünftiger Minimalismus ist der Schlüssel zum Erfolg.
• Ein unvergessliches Bild. Dieser Punkt hängt eng mit den beiden vorherigen zusammen. Das Thema und die Einfachheit des Favicons sorgen dafür, dass sich Benutzer schneller und einfacher daran erinnern. Versuchen Sie, ein Bild zu verwenden, das eine Person beim Betrachten mit einem Wort beschreiben kann. Dieselbe Suchmaschine „Yandex“ hat dieses Problem beispielsweise perfekt gelöst, und wenn Sie jetzt das Logo in Form des Buchstabens „I“ sehen, werden Sie sich sofort an diese Suchmaschine erinnern.

Installieren eines Favicons

Nachdem ein Favicon erstellt wurde, muss es auf der Site installiert werden. Das geht ganz einfach:

1. Laden Sie das favicon.ico-Bild hoch Stammordner Ihre Website;
2. Schreiben Sie den folgenden Code in den HTML-Code der Site selbst, in das Head-Meta-Tag:

Der Favicon-Code sollte sich zwischen den Tags befinden. Es ist allgemein anerkannt, dass es beim Codieren so weit oben wie möglich im Code verwendet wird.

Favicon auf Mobilgeräten anzeigen

Favicon für mobile Websites Wird als Hauptsymbol Ihrer Website verwendet. Wenn Sie eine Website auf einem Mobiltelefon öffnen, auf dem Startbildschirm schneller Zugriff Im Browser wird dieses spezielle Favicon angezeigt. Ihre Website kann zum Hauptbildschirm des Telefons hinzugefügt werden, und das mobile Favicon ist hier ebenfalls enthalten.


Wie Sie im Screenshot oben sehen können, ist das Favicon auf VKontakte und Avito nicht für mobile Geräte angepasst, daher wird der erste Buchstabe der Domain verwendet.

Im Zeitalter der Mobiltelefone muss jede Website ein solches Favicon zur Anzeige verwenden Mobiltelefone. Dies schafft ein angenehmes Erlebnis für Ihre Website-Besucher.

Symbol für iOS

Damit das Favicon angezeigt wird iOS-Geräte und hinein Safari-Browser, müssen Sie den folgenden Code schreiben:

Android

Für Geräte mit Android schreiben wir:

Dieser Code zeigt Ihr Favicon jedoch nur im Browser an. Und damit das Symbol auf dem Desktop des Smartphones angezeigt wird, müssen Sie eine Manifestdatei angeben.

Sein Inhalt:

( „name“: „%title%“, „icons“: [ ( „src“: „\/android-chrome-36x36.png“, „sizes“: „36x36“, „type“: „image\/png ", "density": "0.75" ), ("src": "\/android-chrome-48x48.png", "sizes": "48x48", "type": "image\/png", "density" : „1.0“ ), ( „src“: „\/android-chrome-72x72.png“, „sizes“: „72x72“, „type“: „image\/png“, „density“: „1.5“ ) , ("src": "\/android-chrome-96x96.png", "sizes": "96x96", "type": "image\/png", "density": "2.0" ), ("src" : „\/android-chrome-144x144.png“, „sizes“: „144x144“, „type“: „image\/png“, „density“: „3.0“ ), ( „src“: „\/android -chrome-192x192.png", "sizes": "192x192", "type": "image\/png", "density": "4.0" ) ] )

Aber das ist noch nicht alles. Im Neuzustand Android-Versionen(beginnend mit Lollipop) kann Ihr Browser neu eingefärbt werden, um ihn an die Farbe der Benutzeroberfläche der Website anzupassen.


Um eine solche Funktion zu erstellen, schreiben Sie eine Zeile und legen Sie Ihre Farbe fest:

Windows Phone

Über Favicon Windows Phone vergiss auch nicht:

Für eine erweiterte Symbolanpassung in Windows Phone können Sie Folgendes verwenden: folgende Werte:

#8A2BE2

Die Konfigurationsdatei selbst:

Dienste zur Favicon-Generierung und -Verifizierung

digitalagencyrankings.com

Geben Sie Ihre Website-Adresse ein und erhalten Sie eine Analyse.


Vergessen Sie nicht, ein Favicon einzurichten mobile Geräte. Denken Sie daran, dass dies für Ihre Besucher praktisch ist, da sie Ihre Website leichter im Browser sehen und darauf zugreifen können.

Abschluss

Heutzutage unterstützen fast alle Browser Favicons. Das Symbol jeder Website ist einzigartig. Wenn Sie es richtig erstellen, vermitteln Sie das gesamte Wesen der Website und erhöhen die Klickrate Ihrer Website in den Suchergebnissen.

Daraus können wir schließen, dass Favicon dient zusätzlicher Weg Heben Sie Ihr Projekt unter einer Vielzahl anderer Websites hervor und erhöhen Sie seine Einprägsamkeit und Wiedererkennung. Dies wird sicherlich dazu beitragen, den Suchverkehr zu erhöhen.

Favicon – der Begriff bedeutet wörtlich übersetzt „Lieblingssymbol“ – gilt als eines der komplexesten Elemente des modernen Webdesigns. Dies ist ein kleines Bild, das sich im Browser-Tab befindet Suchleiste und anderen Orten und spielt eine wichtige Rolle bei der Personalisierung der Website.

Aufgrund des nicht standardmäßigen Formats und kleine Größe Das Erstellen eines Favicons kann sowohl aus technischer als auch aus gestalterischer Sicht eine Herausforderung sein.
Eine ebenso schwierige Aufgabe besteht darin, die Favicon-Kompatibilität mit verschiedenen Browsern sicherzustellen.

In diesem Artikel erfahren Sie, wie Sie ein Favicon erstellen. Wir geben Designtipps und informieren Sie über Dienste zum Erstellen eines Favicons und darüber, wie Sie ein Favicon zur Site hinzufügen.

Was ist ein Favicon und warum wird es benötigt?

Obwohl es sich bei einem Favicon um ein sehr kleines grafisches Objekt handelt, ist es im Website-Design und im Allgemeinen äußerst wichtig.

Klicken Sie, um das Bild zu vergrößern.

Erstens, Favicon macht Ihre Website personalisierter und konsistenter mit anderen grafische Elemente, beispielsweise ein Logo.

Zweitens , ein Favicon unterscheidet Ihre Website von anderen Webressourcen in der Suchergebnisliste. Eine Website ohne dieses Mini-Symbol sieht langweilig aus und verliert gegenüber der Konkurrenz. Kurz gesagt, ein Favicon ist einfach ein „Must-Have“ für Websites.

Drittens Mit einem Favicon kann der Benutzer Ihre Website schnell im Verzeichnis der Lesezeichen oder anderen Symbolen auf dem Desktop finden.

Erstellen eines Favicon-Designs

Das Favicon sollte die Essenz und Marke in einem winzigen Zeichen in der Größe eines Smileys widerspiegeln. Gute Entscheidung wird eine vereinfachte Version des Firmenlogos sein, aber bedenken Sie: Ein vollwertiges Logo mit Text und Marken ist für diesen Zweck nicht geeignet.

Diese Websites verwenden eine Grafik ihrer Marke (oder zumindest etwas Ähnliches).

Verwenden Sie keinen Text

Sie sollten auf die Verwendung von Text verzichten, da die Beschriftung aufgrund der geringen Größe des Favicons unleserlich ist. Platzieren Sie 1, maximal 2 Buchstaben auf dem Symbol – zum Beispiel die ersten im Namen Ihres Unternehmens oder Ihrer Webressource; in diesem Fall sind sie noch zu unterscheiden.

Favicon-Pixelung

Favicons sind so klein, dass jedes Pixel zählt. Wenn Sie ein Logo in voller Größe verkleinern, erscheint das Bild oft unscharf.

Dies ist ein Fragment des Facebook-Logos in voller Größe, nachdem es auf die Größe 32x32 verkleinert wurde. Es ist leicht zu erkennen, dass das Bild an den Rändern „schwebt“. Um einen solchen Fehler zu vermeiden, sollte die Bearbeitung auf Pixelebene erfolgen.
Bei der Arbeit mit Icons verwende ich am liebsten Bearbeitungsprogramme Rasterbilder(wie Photoshop oder Pixelmator). Zuerst verkleinere ich das Logo in voller Größe auf 64 x 64 Pixel, da das das größte Favicon ist, das ich benötige. Die Arbeit ist sehr mühsam, es kann eine ganze Stunde oder sogar zwei dauern, aber das Ergebnis ist einfach hervorragend.
Wenn Sie nicht über die Zeit und die Fähigkeiten für solche Operationen verfügen, ist es besser, diese zu nutzen Online-Dienste, wie zum Beispiel Logotizer.ru

Favicon-Größe

Nachdem ich ein 64x64-Symbol erhalten habe, erstelle ich auf die gleiche Weise Symbole mit 32x32, 24x24 und 16x16 Pixeln. Jeder von ihnen hat seinen eigenen Zweck:

– 64×64 – „Leseliste“ in Safari und Windows
– 24×24 – Angepinnte Websites im IE9.
– 32×32 – Für Bildschirme mit hohe Auflösung.
– 16x16 – Wird normalerweise in Browsern wie IE, Safari, Chrome usw. verwendet.

Aber das Erstellen kleinerer Favicons ist noch nicht alles: Oft ist eine zusätzliche Bearbeitung auf Pixelebene erforderlich. Sie können bei Bedarf auch einen Alphakanal hinzufügen. Während dies zuvor zu Schwierigkeiten führte, unterstützen mittlerweile fast alle Browser die Transparenz in Favicons.

Favicon-Formate

Bisher wurden nur Dateien unterstützt Windows-Format ICO könnten wir Zeit sparen, indem wir das 16x16-Favicon als GIF speichern und ihm die Erweiterung .ico geben. Diese Technik hat einwandfrei funktioniert! Diese Methode ist jedoch nicht mehr erforderlich, da Tools zum Erstellen von ICO-Dateien leicht im Internet zu finden sind. Darüber hinaus werden und mittlerweile für Favicons verwendet, am gebräuchlichsten sind jedoch immer noch nur die folgenden beiden.

ICO

Die Palme gehört zum ICO-Format. Im Gegensatz zu PNG-Dateien können ICO-Dateien in unterschiedlichen Auflösungen und Bittiefen vorliegen (was ideal für Windows ist). Internet Explorer verwendet Favicons verschiedene Größen(z. B. 32-Pixel-Symbole für das Panel Windows-Aufgaben 7) und daher ist in diesem Fall das ICO-Format die einzige Option.

PNG-Dateien sind sehr praktisch, da sie keine Dateien benötigen Spezialwerkzeuge. Dieses Format unterstützt einen Alphakanal und ermöglicht die Erstellung sehr kleiner Dateien. Der einzige Nachteil des PNG-Formats besteht möglicherweise darin, dass es nicht unterstützt wird Internetbrowser Forscher.

Es gibt noch andere Möglichkeiten:

– GIF- und animierte GIF-Formate bieten außer der Kompatibilität mit sehr alten Browsern keine Vorteile.
– Das JPG-Format wird nicht empfohlen, auch wenn das Bild in Form eines Fotos vorliegt. Diesem Format fehlt die Schärfe von PNG und sein einziger Vorteil sind weichere Übergänge zwischen den Farben – eine Nuance, die in einem sehr kleinen Bild völlig unsichtbar ist.
– SVG könnte werden ausgezeichnete Option Wenn nur mehr Browser Favicons in diesem Format unterstützen würden. Derzeit besteht nur Kompatibilität mit Opera.
– Es gibt auch ein sogenanntes „Unterformat“ von PNG – APNG (animiertes PNG), das in Firefox und Opera unterstützt wird. Allerdings bleibt die Machbarkeit seines Einsatzes fraglich. Ein animiertes Favicon kann den Benutzer ablenken und sogar stören.

Erstellen Sie ein Online-Favicon – Tools und Online-Dienste

Wir haben für Sie die nützlichsten Dienste ausgewählt, die Ihnen bei der Erstellung eines Online-Favicons helfen.

Logotisierer

Logotizer ist neu, einfach und bequemer Service um ein Favicon und Logo für Ihre Website zu erstellen.
Mit diesem Online-Maker können Sie ein Favicon von Grund auf erstellen. Der Service richtet sich an Einsteiger, sodass die Entwicklung eines guten Designs nicht schwierig sein wird.

So erstellen Sie ein Favicon mit Online-Generator Logotisierer

Der Hauptarbeitsbereich befindet sich auf der linken Seite. Rechts sehen Sie, wie das Favicon auf verschiedenen Medien aussieht – einem Browser-Tab, einer Computer-Taskleiste oder einem Smartphone-Bildschirm. Sehr praktisch und übersichtlich.

Zunächst sollten Sie eine Form für das Favicon auswählen. Es gibt viele davon, mehr als 50. Wir empfehlen Ihnen, einfache und unkomplizierte Formen zu wählen, damit das Favicon leicht wahrnehmbar und merkbar ist.

In diesem Schritt legen Sie auch die Farbe des Formulars fest, das als Hintergrund für das Favicon dient, und wählen einen Rahmen aus. Sehen Sie sich an, welche Farbe Ihr Logo dominiert (falls Sie eines haben) und welche Farben die Hauptfarben auf Ihrer Website sind. Innerhalb dieses Bereichs empfehlen wir die Erstellung eines Favicon-Designs.

Unterhalb des Blocks „Form“ befindet sich eine Sammlung von Formen (Symbolen). Davon gibt es nicht viele, schade, dass Sie keine eigenen Optionen hochladen können; aber die Auswahl ist trotzdem recht interessant.

Ändern Sie die Farbe, Größe und Position der Figuren! Mit einem Wort: Experimentieren Sie, glücklicherweise ermöglicht Ihnen der Dienst dies.

Sobald die Form ausgewählt ist, können Sie Ihren eigenen Text hinzufügen. Wie ich bereits geschrieben habe, ist es besser, 1 oder 2 Buchstaben zu verwenden, nicht mehr.

Es gibt eine umfangreiche Auswahl an Schriftarten. Das ist definitiv ein Plus. Wie bei Formen können Sie die Farbe, Größe und Platzierung des Texts ändern.

Wenn Sie feststellen, dass Sie eine Favicon-Ebene vorübergehend stört oder überhaupt nicht benötigt wird, können Sie sie einfach ausblenden.

Nachdem Sie ein Favicon erstellt haben, bietet der Dienst an, es zu speichern. Registrieren Sie ein Konto (im Jahr 2017 geht es ohne Registrierung nicht mehr) und danach können Sie Dateien gegen eine geringe Zahlung herunterladen – 199 Rubel.

Die Site enthält auch kleine Anweisungen zum Hinzufügen eines Favicons zur Site, sodass Sie keine Probleme beim Hinzufügen eines Favicons zur Site haben sollten. Ähnliche Empfehlungen finden Sie auch weiter unten in diesem Artikel.

Nach der Bezahlung erhält der Nutzer sofort 10 Favicons unterschiedlicher Größe für alle heute benötigten Geräte (Apple Touch Icon, Microsoft Application Icons und andere).

Die Datei favicon.ico selbst hat mehrere Größen und enthält Symbole in 4 Größen in einer Datei (16 Pixel, 24 Pixel, 32 Pixel, 64 Pixel). Wenn Sie die Website zu Ihren Browser-Lesezeichen hinzufügen oder den Verlauf öffnen, werden Ihnen die Symbole angezeigt verschiedene Größen, aber sie werden klar und ohne Unschärfe angezeigt.

Insgesamt ist der Service gut. Einfach, bequem, nichts überflüssig.

RealFaviconGenerator.net

ist ein einfacherer Favicon-Generator, mit dem Sie Favicons für jede Plattform erstellen können. Darüber hinaus können Sie das Favicon auf der Ressource testen. Geben Sie die URL Ihrer Website ein und Sie sehen, wie Ihr Favicon in jedem Browser und in jedem Browser aussieht Betriebssystem. Real Favicon Generator zeigt Ihnen auch, wie Sie die Fehler beheben und Ihr Favicon noch besser machen können.

Favicon.by

Favicon.by ist ein weiterer kostenloser und benutzerfreundlicher Favicon-Generator, der PNG-, JPG- und GIF-Dateien in das .ico-Format konvertiert. Laden Sie ein Bild von Ihrem Computer hoch, wählen Sie eine Größe (16x16px oder 32x32px) und klicken Sie auf die Schaltfläche „Erstellen“. Um das resultierende Favicon auf Ihrer Website zu speichern, befolgen Sie die Anweisungen.

Der Dienst ermöglicht es auch, ein Logo Pixel für Pixel zu zeichnen, aber ehrlich gesagt kann das nicht jeder. Ich konnte es zum Beispiel nicht. So schief bin ich :)

So fügen Sie einer Website ein Favicon hinzu

Sie können Ihrer Site ein Favicon hinzufügen, indem Sie mehrere Änderungen am HTML-Code der Site-Seite vornehmen.

Schritt 1: Laden Sie die Datei „favicon.ico“ auf Ihren Hosting-Server hoch.

Gehen Sie dazu über diesen Link zu Ihrem FTP-Server:
ftp:// [email protected]
Geben Sie Ihren Benutzernamen und Ihr Passwort ein. Diese erhalten Sie über das Admin-Panel Ihres Hosting-Unternehmens.
Laden Sie Favicon-Dateien in das Stammverzeichnis hoch. Das Stammverzeichnis heißt normalerweise „public_html“ oder „www“.

Schritt 2: Favicon zu HTML hinzufügen.

Halten Sie das FTP-Serverfenster geöffnet und laden Sie die Datei „index.html“ oder „header.php“ herunter.
Dann müssen Sie den Code herunterladen. Der Code, den Sie herunterladen, hängt von Ihrer Website ab.
Wenn es sich bei Ihrer Website um HTML handelt, suchen Sie den HEAD-Bereich in der Datei index.html und fügen Sie den folgenden Code ein:

Wenn Ihre Website auf WordPress läuft, suchen Sie den HEAD-Bereich in der Datei header.php und fügen Sie den folgenden Code ein:

/favicon.ico" />

Mithilfe dieser Codes können Browser Ihre Favoriten finden.
Sie haben also Ihr Favicon installiert!

So fügen Sie ein Favicon auf WordPress und anderen Plattformen hinzu

Wenn Ihre Ressource auf WordPress oder einem anderen CMS basiert, ist das Hinzufügen eines Favicons zur Site sehr einfach. Im Allgemeinen ist der Algorithmus zum Hinzufügen eines Favicons für verschiedene Plattformen derselbe.
1. Sie müssen zur Site-Konsole gehen.
2. Suchen Sie den Abschnitt „Design“ oder „Aussehen“.

3. Gehen Sie zum Abschnitt „Theme-Einstellungen“ und suchen Sie dort nach „Favicon“.

4. Laden Sie das Favicon von Ihrem Computer hoch.

5. Speichern und aktualisieren Sie die Seite.

So erstellen Sie komplexere Favicons

In diesem Artikel werden einfache und schnelle Möglichkeiten zum Erstellen von Favicons beschrieben, die mit fast jedem Browser und Betriebssystem kompatibel sind. Aber wenn es um Webdesign und -entwicklung geht, sind keine Grenzen gesetzt. Wenn Sie erfahren möchten, wie Sie komplexere Favoriten, Touch-Symbole für iOS-Startbildschirme, Symbole für die Metro-Oberfläche in Windows, Symbole für Google TV und vieles mehr erstellen, empfehle ich Ihnen, sich diese Materialien anzusehen: Favicon-Spickzettel. Es enthält umfassende Informationen zum Thema und liefert gute Quellen. Dies ist eine großartige Option für Designer und Entwickler (ich eingeschlossen), die ihr Wissen ständig erweitern möchten.

Mit Favico.js können Sie dynamische Favicons mit Zahlen erstellen.

Möglicherweise benötigen Sie auch ein dynamisches Favicon, das über ein Symbol mit einer sich ändernden Nummer verfügt. Um solche Favicons zu erstellen, empfehle ich die Nutzung des Dienstes favico.js, verfügbar auf Github. Dynamische Favicons sind noch nicht mit allen Browsern kompatibel. Aber für die Browser, die sie unterstützen, können diese Symbole eine interessante und nützliche Ergänzung sein.

Wenn Sie diesem Artikel einen weiteren Tipp hinzufügen möchten oder eine Frage haben, hinterlassen Sie bitte unten einen Kommentar!

Hallo, liebe Leser der Blogseite. Im heutigen Artikel geht es um die sogenannten Favicon.ico-Icons. Wir werden herausfinden, was ein Favicon ist, warum Sie es auf Ihrer Website installieren müssen und wie Sie selbst ein Symbol in der erforderlichen Größe erstellen.

Um ein Favicon zu erstellen, ist es im Prinzip überhaupt nicht notwendig, spezielle Online-Generatoren zu verwenden, obwohl es recht bequem und einfach ist. Sie können versuchen, es in Photoshop zu erstellen, aber standardmäßig können Bilder leider nicht im ICO-Format gespeichert werden. Um Photoshop die Arbeit mit ICO beizubringen, müssen Sie daher ein spezielles Plugin installieren.

Wenn Sie jedoch mit Photoshop (und auch damit) nicht vertraut sind, ist es für Sie viel bequemer, einen der vielen unten aufgeführten Online-Dienste zu nutzen. Darüber hinaus können Sie in einigen von ihnen ein neues Symbol komplett von Grund auf zeichnen und in anderen können Sie ein bereits vorhandenes Bild (das zu Ihnen passt) in ein Favicon-Format konvertieren.

Die einfachste Möglichkeit besteht darin, die Favicon-Sammlung aus einer Online-Galerie oder einem Online-Katalog herunterzuladen. Lesen Sie weiter unten, wo Sie diese erhalten können.

Wie Sie online ein Favicon erstellen und wo Sie eine Sammlung davon herunterladen können

Lassen Sie mich zunächst Beispiele für Dienstleistungen (die sogenannten) nennen Favicon-Generator), wo Sie ohne besondere Kenntnisse ein völlig anständiges Mini-Logo für Ihre Website entwerfen oder zumindest automatisch ein passendes Bild in das Format konvertieren können, das zum Hochladen eines Favicons auf die Website erforderlich ist.

1. Faviсon.cc– ein recht praktischer Online-Favicon-Generator. Damit können Sie beispielsweise Ihr eigenes Symbol von Grund auf erstellen (völlig exklusiv) und es Pixel für Pixel zeichnen. Dazu müssen Sie auf der linken Seite des Servicefensters auf die Schaltfläche „Neuen Favcon erstellen“ klicken.

   

   In der Mitte der Generatorseite gibt es einen Bereich, in dem jedes Quadrat ein Pixel Ihres zukünftigen Favicons ist. Ihre Aufgabe ist es, diese Quadrate mit verschiedenen Farben zu bemalen. Um ein Quadrat mit einer Farbe zu bemalen, müssen Sie das Kontrollkästchen auf der rechten Seite des Servicefensters im Feld „Farbauswahl“ aktivieren, die gewünschte Farbe aus der dort befindlichen Palette auswählen und auf das gewünschte Quadrat klicken. Um fehlerhafte Schattierungen zu entfernen, aktivieren Sie das Kontrollkästchen „transparent“ und klicken Sie auf das Quadrat, wodurch es farblos (transparent) wird.

   Um ein Pixel über die Generator-Leinwand zu verschieben, müssen Sie das Kontrollkästchen „Verschieben“ aktivieren. Das Ergebnis Ihrer Arbeit können Sie im „Vorschau“-Bereich unter der Leinwand im echten Maßstab betrachten. Wenn das von Ihnen erstellte Favicon zu Ihnen passt, klicken Sie auf die Schaltfläche „Herunterladen“, um es auf Ihrem Computer zu speichern. Als Ergebnis erhalten Sie eine Grafikdatei, die Sie anschließend herunterladen und auf den Hosting-Server hochladen können.

   Jetzt wissen Sie, wie Sie von Grund auf ein Mini-Logo für Ihre Website erstellen. Wenn Sie jedoch keine grafischen Talente haben, können Sie den Online-Generatordienst nutzen Laden Sie ein beliebiges Bild für das zukünftige Favicon hoch, das als Leerzeichen dient. Das Bild kann absolut jede Größe und jedes Format haben. Um die Symboldatei in den Onlinedienst hochzuladen, müssen Sie auf der linken Seite des Dienstfensters auf die Schaltfläche „Bild importieren“ klicken.

   

   Klicken Sie im sich öffnenden Fenster auf die Schaltfläche „Durchsuchen“ und suchen Sie ein passendes Bild auf Ihrem Computer. Wählen Sie dann aus, was mit dem Seitenverhältnis Ihres Bildes geschehen soll, wenn Sie es in 16 x 16 (Quadrat) konvertieren. Dies trifft zu, wenn das von Ihnen hochgeladene Bild nicht quadratisch ist. In diesem Fall sind zwei Optionen möglich: das Seitenverhältnis unverändert zu lassen (Abmessungen beibehalten) oder das Bild in eine quadratische Ansicht umzuwandeln (Symbol „Auf Quadrat verkleinern“). Im zweiten Fall wird das Bild des zukünftigen Favicons entlang einer der Achsen verzerrt.

   Um Ihr Bild in den Online-Generator hochzuladen und zu konvertieren, müssen Sie auf die Schaltfläche „Hochladen“ klicken. Das daraus erstellte Favicon.ico kann auf die gleiche Weise bearbeitet werden wie das von Ihnen gezeichnete. Wenn Sie mit der Arbeit an Ihrem Meisterwerk fertig sind, klicken Sie auf die Schaltfläche „Herunterladen“, um es auf Ihren Computer herunterzuladen.

   Dieser Online-Dienst bietet auch die Möglichkeit, von anderen Nutzern erstellte und öffentlich zugänglich gemachte Sammlungen von Favicons zu nutzen. Um die in der Galerie verfügbaren Exponate anzuzeigen, müssen Sie auf der linken Seite des Fensters entweder auf die Schaltfläche „Neueste Favicons“ klicken, um die Sammlungen nach Erstellungsdatum sortiert anzuzeigen, oder auf die Schaltfläche „Am besten bewertete Favicons“, um sie anzuzeigen Galerien nach Bewertung sortiert.

2. Favicon.ru- Früher war dieser Dienst viel einfacher als der oben beschriebene Online-Generator, aber in letzter Zeit ist er fast sein Analogon, allerdings nur auf Russisch. Mit Favicon.ru können Sie nicht nur jedes Bild, das Sie (auf Ihrem Computer oder im Internet) haben, in das ICO-Format mit einer Größe von 16 x 16 Pixel konvertieren, sondern es auch Pixel für Pixel von Grund auf zeichnen.

   

   Diese Version des Online-Favicon-Generators ist vielleicht nur deshalb bemerkenswert, weil sie inländisch ist. Deshalb ist er in diesem Artikel gelandet. Um damit zu arbeiten, müssen Sie also oben auf der Hauptseite auf die Schaltfläche „Datei auswählen“ klicken und den Pfad zum gewünschten Bild auf Ihrem Computer angeben. Das heruntergeladene und in das Favicon.ico-Format konvertierte Bild kann korrigiert und dann auf Ihrem Computer gespeichert werden. Alles ist einfach und bequem.

3. Logaster.ru ist ein Online-Logo-Generator, der neben Logos aber auch ein Favicon erstellt. Im Gegensatz zu allen anderen Diensten müssen Sie kein Favicon-Design zeichnen oder es aus einem Logo konvertieren.

   

   Um ein Favicon zu erstellen, müssen Sie zunächst den Namen der Website oder des Unternehmens eingeben und die Art der Aktivität auswählen. Der Dienst bietet mehrere Dutzend gebrauchsfertige Favicon-Vorlagen. Weitere Informationen zum Erstellen eines Favicons finden Sie hier. Nachdem Sie Favicon.ico erstellt haben, können Sie die Datei im ICO- oder PNG-Format auf Ihren Computer herunterladen.

Danach müssen Sie nur noch auf die Schaltfläche „Erstellen“ klicken. Auf der sich öffnenden Seite sehen Sie einen Link zum Herunterladen des resultierenden Favicons.

Eine Auswahl an Online-Generatoren, Sammlungen und Galerien mit Favoriten

Wenn Ihnen der oben beschriebene Favicon-Generator aus irgendeinem Grund nicht gefallen hat, kann ich Ihnen vorschlagen, Ihr Glück bei einem der folgenden Schritte zu versuchen kostenlose Online-Dienste:

1. FaviconGenerator – ermöglicht Ihnen, jedes von Ihrem Computer heruntergeladene Bild in das gewünschte Favicon-Format zu konvertieren (Sie können Bilder hochladen).
2. AntiFavicon ist ein ziemlich interessanter Favicon-Generator. Darauf kannst du Erstellen Sie ein Favicon mit einer Inschrift. Sie müssen den Text der Beschriftung in die Felder „Text oben“ und „Text unten“ eingeben und im Bereich „Farben“ das Farbschema anpassen.
3. FavIcon von Pics ist ein weiterer einfacher Onlinedienst – Sie geben den Pfad zum Bild auf Ihrem Computer an, konvertieren und laden die resultierende Datei im ICO- und GIF-Format herunter.
4. Iconj – das Besondere ist, dass Sie das erstellte Symbol entweder herunterladen oder im Dienst belassen können und einen Link zu dieser Datei erhalten
5. DeGraeve ist ein ziemlich leistungsfähiger Favicon-Generator, dessen Funktionalität dem zuvor getesteten Favicon.cc ähnelt. Auch hier können Sie entweder alles von Grund auf neu machen oder ein Bild hochladen, das später angepasst und im ICO-Format in geeigneter Größe heruntergeladen werden kann.
6. Generator – ermöglicht es Ihnen, ein Favicon aus einem hochgeladenen Bild zu generieren und es in einem speziellen Editor von Grund auf neu zu erstellen.
7. Online-Icon-Editor favicon.ico – nun, er kann eigentlich alles – Favoriten von Grund auf erstellen und ein vorhandenes Bild ändern.
8. Online Favicon ist ein sehr funktionales Tool zum Erstellen und Bearbeiten von Mini-Logos
9. Kostenloser Favicon-Generator – falls Ihnen nichts aus der obigen Liste zusagt.
10. Favicon-Generator – einfach und geschmackvoll...

Wenn Ihnen die Exklusivität Ihres Mini-Logos für die Site egal ist und Sie nicht mit Editoren und Generatoren herumbasteln können, können Sie auf Sites, auf denen es ein Dutzend gibt, ein passendes Symbol für sich auswählen. Denn eigentlich passt zu uns absolut jedes Icon mit den Maßen 16 x 16 Pixel, das Sie aus dem Internet herunterladen oder in den Tiefen Ihres Computers finden können.

Sie müssen jedoch bedenken, dass das Favicon in erster Linie die Aufmerksamkeit der Benutzer erregen muss. Im Idealfall würde ein Benutzer Ihre Website bereits durch einen Blick auf das Favicon erkennen. Daher ist es besser, wenn es einzigartig ist. Sie können aber auch im Internet nach etwas abseits der ausgetretenen Pfade suchen.

Wenn Sie nicht den Wunsch oder die Möglichkeit dazu haben (Sie sind kein Künstler und waren es auch noch nie), dann ist es am einfachsten, eine Suche zu starten Galerien mit Sammlungen kostenloser Favoriten:

1. Iconj ist eine ziemlich große Sammlung von Icons, die von anderen Leuten entworfen und der Öffentlichkeit zugänglich gemacht wurden
2. Favicon.cc – 55.000 verschiedene Optionen für alle Gelegenheiten. Es gibt auch animierte Favicons, die nur im Firefox-Browser sichtbar sind.
3. Die Favicon-Galerie – ein paar weitere Icons, die zur Größe passen

Wenn Sie weitere ähnliche Ressourcen kennen, werde ich Ihre Links zu dieser Liste hinzufügen.

So installieren Sie ein Favicon auf einer Website und geben den Pfad dazu an

Ihr Browser und der Yandex-Suchroboter werden es tun Suchen Sie nach dem Favicon hauptsächlich im Stammordner Ihrer Site. Daher können Sie einfach über FTP eine Verbindung zur Site herstellen und Ihre Favicon.ico-Datei in ihr Stammverzeichnis (normalerweise die Ordner public_htm oder htdocs) hochladen (es ist besser, den Namen in Kleinbuchstaben zu schreiben). Öffnen Sie nun Ihre Ressource in einem Browser und prüfen Sie, ob sich das Symbol auf der Registerkarte geändert hat. Hat es sich geändert? NEIN? Nun, es ist okay.

Wenn Sie auf diese Weise kein Favicon platzieren konnten, müssen Sie dies möglicherweise tun, weil ... Es kommt häufig vor, dass eine alte Version aus dem Cache geladen wird. Sie können es ausprobieren. Für mich reagiert es am besten auf vorgenommene Änderungen, ohne den Cache zu leeren. Wenn das Problem nicht im Browser-Cache liegt, bedeutet dies, dass dies der Fall ist Ihre Website hat einen anderen Speicherort für das Favicon, anders als der Stammordner. Wie kann ich das überprüfen?

Öffnen Sie den Quellcode einer beliebigen Seite Ihrer Website. Um den Quellcode anzuzeigen, klicken Sie einfach mit der rechten Maustaste auf die Seite und wählen Sie den entsprechenden Kontextmenüpunkt aus (z. B. „Quellcode“ im alten Opera oder „Seitenquellcode“ in Mazila Firefox oder „Seitencode anzeigen“ in Google Chrome oder „HTML-Code anzeigen“ im IE) oder drücken Sie die Tastenkombination Strg+U. Suchen Sie nun oben im Seitencode nach einer Zeile, die den Pfad zu favicon.ico angibt.

Es könnte etwa so aussehen:

Wenn Sie nun diesen Pfad kennen, können Sie sich erneut über FTP verbinden und Ihr Favicon über den angegebenen Pfad hochladen und den bereits auf der Site vorhandenen Pfad damit ersetzen. Wenn in der Adressleiste des Browsers erneut keine Änderungen aufgetreten sind, versuchen Sie erneut, den Browser-Cache zu leeren.

IN Joomla Favicon befindet sich normalerweise im Ordner mit der Vorlage, die Sie verwenden (der Pfad dazu wurde in Joomla 1.5 in die Datei index.php aus dem Verzeichnis derselben Vorlage geschrieben, aber in Joomla 3 wurde alles etwas komplizierter). Diese. Um das Favicon in Joomla zu ändern, müssen Sie lediglich diesem Pfad folgen und dort Ihre favicon.ico-Datei hochladen und die Frage nach dem Ersetzen mit Ja beantworten:

/templates/folder_with_the_design_template/favicon.ico

Favicon-Datei in WordPress Standardmäßig kann es sich auch im Ordner mit dem von Ihnen verwendeten Theme befinden (dort ist auch der Pfad dorthin festgelegt):

/wp-content/themes/Folder_with_theme_you_are_using/favicon.ico

Im Allgemeinen, wenn Sie möchten Legen Sie den Pfad zu Ihrem Favicon fest oder ändern Sie ihn, das sowohl von Browsern als auch vom Yandex-Suchroboter verstanden wird, müssen Sie es in die entsprechende Vorlagendatei für Joomla, WordPress oder eine andere Engine zwischen den öffnenden und schließenden Tags schreiben KOPF, die folgenden Codezeilen:

In welche Vorlagendatei Sie diese Zeilen schreiben müssen, hängt von der Engine Ihrer Site ab. Zum Beispiel in in WordPress Sie müssen die Datei header.php zum Bearbeiten öffnen: wp-content/themes/Folder_with_your_theme_design. Öffnen Sie header.php im Editor und suchen Sie ganz am Anfang das öffnende HTML-HEAD-Tag. Schreiben Sie an einer beliebigen Stelle danach, aber vor dem schließenden HEAD, eine der oben genannten Codezeilen, die den Pfad zu Ihrer Mini-Logo-Grafikdatei angibt.

So installieren Sie es animiertes Favicon? Im Grunde genau das Gleiche wie ein normales. Der einzige Unterschied besteht in dem in Ihre Website-Vorlage eingefügten Code, mit dem Sie Browsern und dem Yandex-Suchroboter den Pfad zur gewünschten Grafikdatei angeben. Tatsache ist, dass das animierte Favicon eine GIF-Erweiterung haben wird und Sie daher in den Codezeilen etwa Folgendes schreiben müssen:

Das ist der ganze Unterschied zwischen animierten und normalen Favoriten. Bitte beachten Sie jedoch, dass das animierte Symbol nur in Firefox funktioniert; in anderen Browsern ist es statisch. Yandex konvertiert Ihr animiertes Favicon beim Laden in ein statisches PNG-Format. Aber meiner Meinung nach ist es die Mühe nicht wert – die Installation eines animierten Logos anstelle eines normalen Mini-Logos für eine Website macht wenig Sinn. Aber das ist meiner Meinung nach nur meine Meinung.

Viel Glück für Sie! Bis bald auf den Seiten der Blog-Site

Das könnte Sie interessieren

Online-FTP-Client Net2ftp und Google Alerts – nützliche Dienste für Webmaster
Website-Analyse in den kostenlosen Online-Diensten Pr-cy, Cy-pr, Be1, Xseo und anderen
Symbole, Abzeichen, Hintergründe, Bilder und Logos für die Website (Onlinedienste IconFinder, Freepik, PSDGraphics und andere)
Benutzerfreundlichkeit – wie Sie Ihre Website für Besucher benutzerfreundlich gestalten und versuchen, dass sie Ihre Artikel so lange wie möglich lesen
MegaIndex Tools – eine Reihe von Tools für Webmaster und Optimierer
So überprüfen Sie die browserübergreifende Kompatibilität des Layouts einer Website in Browsershots und richten das Senden eines Pings ein, wenn neue Materialien angezeigt werden
Http – was ist das, wie kann man Header anzeigen und den Server-Antwortcode überprüfen, was bedeuten die Codes 200, 301, 302, 404 und 500?
Crossposting – was ist das und wie macht man es richtig?

In der heutigen Lektion werde ich Ihnen davon erzählen Favicon-Symbole (Favicon). Ich zeige es dir wie man favicon.ico für eine Website erstellt(oder für einen Blog spielt es keine Rolle) und ich zeige Ihnen, wie es möglich ist Favicon einfügen.

Sicherlich wissen viele immer noch nicht, von welchem ​​„Wunder“ ich spreche. Einfach ausgedrückt ist ein Favicon ein Bild (Symbol), das im Browser vor der Site-Adresse erscheint. Ich zeige euch das Favicon meines Blogs:

Dieses Symbol ist eine Art Logo für Ihren Blog. Daher muss die Erstellung eines Favicons mit voller Verantwortung erfolgen. Denken Sie daran, dass sich Ihr Blog dadurch von anderen abheben kann.

Unterrichtsplan:

1. Ein Favicon von Grund auf erstellen.
2. Aus einem fertigen Bild ein Favicon erstellen.
3. Dienste mit vorgefertigten Symbolen für die Website.
4. Anhängen des resultierenden Symbols an die Site.

So erstellen Sie ein Favicon von Grund auf

Es gibt einen sehr praktischen Service. Es hat die Adresse favicon.cc. Dieser Favicon-Erstellungsservice sieht folgendermaßen aus:

– Ja, dieser Dienst verfügt auch über vorgefertigte Favicons.

So erstellen Sie ein Favicon für eine Website

Nachdem wir das Favicon erstellt haben, müssen wir es an die Site „anhängen“. Dazu müssen Sie Folgendes tun:

Wie Sie sehen, ist alles richtig „gefallen“. Ich hoffe, dass du auch keine Probleme hast. Wenn Sie Fragen haben, stellen Sie diese bitte an

Struktur: Ein Favicon ist ein kleines Symbol, das zur visuellen Identifizierung Ihrer Website in Lesezeichen verwendet wird und auch das ist, was Sie neben Ihrem Website- oder Seitennamen in Browser-Registerkarten sehen. Typischerweise ist ein Favicon ein 16x16 Pixel großes Quadrat im favicon.ico-Format. In diesem Artikel erklären wir, welche „Basis“ Sie für den Einstieg benötigen, helfen Ihnen beim Erstellen eines Favicons mit grafischen Editoren und sprechen über Möglichkeiten, ein Favicon zu Ihrer Website hinzuzufügen. Was brauchen Sie, um loszulegen?

1. Ihr Logo muss mindestens 512 x 512 Pixel groß sein (muss quadratisch sein);
2. .PNG-Bildformat;
3. Grafikeditor Adobe Photoshop oder GIMP.

Erstellen Sie ein Favicon mit Adobe Photoshop

Favicon auf transparentem Hintergrund:

Favicon auf einem Hintergrund mit einer Unternehmensfarbe:

Erstellen eines Favicons mit GIMP – GNU Image Manipulation Program

Vorteile der Verwendung von .ICO gegenüber .PNG oder .GIF

1. Kompatibilität: Alle Browser, einschließlich IE 5.0, unterstützen das .ico-Format.
2. Vermeiden von 404-Serverfehlern: Alle modernen Browser (getestet mit Chrome 4, Firefox 3.5, IE8, Opera 10 und Safari 4) fordern immer eine favicon.ico-Datei an, daher ist es am besten, immer eine favicon.ico-Datei zu haben.
3. Eine .ico-Datei kann mehr als ein Symbol enthalten, Sie müssen also nicht mehrere Dateien für 16x16- und 48x48-Pixel-Symbole erstellen.

Konvertieren Sie .PNG in .ICO mit Online-Konvertern

Wie installiere ich ein Favicon auf WordPress?