Eine universelle Möglichkeit, Favoriten zu erstellen. Favicon online erstellen Erstellen Sie ein Favicon mit GIMP – GNU Image Manipulation Program

Favicon-Generator – hilft Ihnen, jedes Bild zu konvertieren und zu bearbeiten und es in ein Favicon für die Site umzuwandeln. Heute gibt es einen Artikel über den besten Favicon-Generator für Websites heute.

Heutzutage ist es kaum vorstellbar, dass eine Website kein Favicon hat. Ein Favicon ist ein Symbol, das sich in der Adressleiste des Browsers oder im Fenstertitel (je nach Browser) befindet und die geöffnete Site/den geöffneten Tab von vielen anderen unterscheidet. Ursprünglich wurden diese Symbole im IE entwickelt, um eine Site in der Lesezeichenliste des Browsers hervorzuheben (im IE wurden diese Lesezeichen Favoriten genannt), daher der Name Favicon – Favoritensymbol.

Aber ein Favicon mit eigenen Händen zu erstellen ist nicht so einfach. Es muss ein ICO-Format haben, was eine spezielle Software und erhebliche Fähigkeiten erfordert, um etwas Sinnvolles zu tun. Um das Leben einfacher zu machen, ist es daher besser, einen Online-Favicon-Generator zu verwenden.

Es gibt viele Dienste, die es Ihnen ermöglichen, aus Bildern (das kann ein Logo oder eine speziell gestaltete Illustration sein) Favicons zu generieren. Doch die meisten von ihnen haben Probleme mit der Transparenz.

Transparenzprobleme beim Favicon-Generator-Dienst

Der Übersichtlichkeit halber präsentieren wir die Abbildung „Wie verschiedene Favicon-Generatoren Transparenz und Bildgrößenreduzierung verarbeiten.“

In diesem Vergleich haben wir die Ergebnisse der Dienste favicon.cc und favicon-generator.org verwendet. Um ehrlich zu sein, haben wir selbst bis vor kurzem den Dienst favicon.cc genutzt, aber kürzlich wurde ein hervorragender Ersatz gefunden – der Favicon-Generator Nr. 1.

Der beste Favicon-Generator – www.xiconeditor.com

Wie favicon.cc verfügt dieser Favicon-Generator über einen eigenen integrierten Online-Icon-Editor, sein Vorteil ist jedoch die hervorragende Arbeit mit Transparenz.

Es ist ziemlich offensichtlich, dass es einen Unterschied in der Qualität der Transparenz gibt (anscheinend liegt der Unterschied in der Qualität der Größenänderung des geladenen Bildes).

Darüber hinaus bietet xiconeditor.com einen weiteren Vorteil: ein hervorragendes Favicon-Vorschausystem, mit dem Sie das Ergebnis in verschiedenen Formen anzeigen können, ohne das generierte Favicon herunterladen zu müssen. Ihre Vorschau ist viel informativer als favicon.cc.

Was ist ein Favicon?

Für diejenigen, die nicht wissen, was ein Favicon ist, geben wir Ihnen ein paar Informationen, die Ihnen den Einstieg erleichtern. Ein Favicon ist ein kleines Symbol mit den Maßen 16 x 16 oder 32 x 32 Pixel, das normalerweise ein Logo, den Anfangsbuchstaben einer Marke oder ein charakteristisches Bild enthält, das die Art des Unternehmens oder das Thema der Website widerspiegelt.

Warum ist ein Favicon wichtig?

Das Favicon erfüllt folgende Funktionen:

Branding.

Identifizierung der Website durch den Benutzer (Benutzerfreundlichkeit).

Verleiht der Website ein professionelles Aussehen.

Schauen wir uns die Hauptvorteile der Verwendung von Favicons genauer an.

Markenwahrnehmung

Favicon ist wie eine kleine Site-Identität. Wie in der Einleitung erwähnt, hilft ein Favicon dem Benutzer, sich unter den vielen Websites, die er angesehen hat, an Ihre Website zu erinnern. Unabhängig davon, ob es sich um Ihren Browserverlauf, die Google-Suchergebnisse oder die Liste der mit Lesezeichen versehenen Websites Ihres Browsers handelt, helfen Favicons Benutzern, Ihre Website leicht zu erkennen und darauf zuzugreifen.

Vertrauen

Benutzer neigen dazu, Online-Verkäufer von Waren und Dienstleistungen danach zu beurteilen, wie professionell ihre Website ist. Unachtsamkeit in Form eines fehlenden Favicons (Suchmaschinen zeigen eine Seite ohne Favicon als Icon eines leeren Dokuments an) kann leicht zu einem Vertrauensverlust führen, insbesondere wenn Nutzer Sie mit Ihren Mitbewerbern vergleichen.

Wiederholte Besuche

Es ist bekannt, dass Menschen besser auf Bilder reagieren als auf Text. Angenommen, ein Besucher Ihrer Website war beim ersten Besuch in Eile und hat beschlossen, ein Lesezeichen zu setzen, damit er später wiederkommen kann. Nehmen wir an, diese Person beschließt anschließend, Ihre Website erneut zu besuchen und greift auf ihre Lesezeichen zurück. Sie haben Glück, wenn Sie ein erkennbares Favicon haben, wie das markante und einzigartige G von Google, und die Nutzer Sie finden. Wenn Sie kein Favicon haben, werden Sie möglicherweise sogar aus Ihrer Lesezeichenliste entfernt.

Spart dem Benutzer Zeit

Favicons ersparen dem Benutzer Zeit, die er mit der Identifizierung einer Website in Lesezeichen, im Verlauf oder an anderen Stellen verbringt, an denen der Browser ein Favicon zur schnellen Identifizierung platziert. Es macht dem durchschnittlichen Besucher Ihrer Website einfach das Leben einfacher.

SEO-Vorteile

Wenn Ihre Website über ein Favicon verfügt, sind Sie in den Suchergebnissen besser sichtbar als Websites, die kein Favicon haben, und können daher mehr Besucher anziehen.

Wie erstelle ich ein Favicon?

Es gibt viele Tools, mit denen Sie in wenigen Minuten ein Favicon erstellen können. Wenn Sie keine Designkenntnisse haben oder nicht wissen, wie es geht, können Sie versuchen, mit Logaster ein Favicon zu generieren.

Befolgen Sie dazu die Schritt-für-Schritt-Anleitung:

Schritt 5: Erstellen Sie ein Favicon

Nachdem Sie nun ein Logo haben, klicken Sie auf der Logoseite auf „Favicon mit diesem Logo erstellen“.

Schritt 6. Wählen Sie das gewünschte Favicon-Design aus

Wie beim Logo generiert Logaster mehrere Dutzend schöne und gebrauchsfertige Favicons. Wählen Sie Ihr Lieblingsdesign. In der Vorschau können Sie sehen, wie Ihr Favicon auf der Website aussehen wird.

Wenn Sie das Favicon ändern müssen, können Sie dies durch Bearbeiten des Logos tun, genauso wie Favicons basierend auf dem Logo-Design erstellt werden. Wenn Sie beispielsweise eine andere Favicon-Farbe wünschen, müssen Sie zur Logo-Seite zurückkehren, deren Farbe ändern und dann das Favicon erneut erstellen.

Inspiration für Favicons finden Sie auf folgenden Seiten:

Schritt 7. Laden Sie das Favicon herunter

Sie können das Favicon separat für 9,99 $ erwerben oder ein Designpaket erwerben, das nicht nur das Favicon, sondern auch ein Logo, eine Visitenkarte, einen Umschlag und einen Briefkopf enthält. Hier erfahren Sie, wie Sie ein Design Pack kaufen können.

Nach der Zahlung können Sie das Favicon im ICO- und PNG-Format herunterladen.

Wo kann ich ein Favicon verwenden?

Sie können das Favicon verwenden:

Auf der Seite;

Mobile Geräte. Der Benutzer kann dem Startbildschirm seines Geräts ein Favicon hinzufügen (so etwas wie ein Lesezeichen) – Android, IOS, Windows Phone usw.;

Programme und Anwendungen für PC/Mac.

Wie installiere ich ein Favicon auf einer Website?

Sobald Sie das Favicon erhalten haben, dauert die Installation auf dem Server nur ein paar Minuten und erfolgt in zwei Schritten. Dazu benötigen Sie Zugriff auf das Stammverzeichnis Ihrer Site und einen Texteditor, um den HTML-Code der Site zu ändern.

Schritt 1. Sie müssen die Datei favicon.ico auf den Server hochladen. Dazu müssen Sie einen FTP-Client wie FileZilla herunterladen und installieren. Geben Sie dann Ihren Benutzernamen und Ihr Passwort ein und laden Sie die Datei herunter. Detailliertere Anweisungen zum Hochladen einer Favicon-Datei finden Sie hier.

Schritt 2. Jetzt müssen Sie die HTML-Seite Ihrer Website bearbeiten, damit Browser Ihr Favicon-Bild finden können. Suchen Sie bei geöffnetem FTP-Fenster die Datei index.html oder header.php und laden Sie sie vom Server herunter.

Öffnen Sie die Datei index.html in einem Texteditor – Notepad, Notepad++, Sublime Text.

Wenn Ihre Site reines HTML enthält, fügen Sie den speziellen Code in den HEAD-Bereich der Datei index.html ein.

Der Code kann auf der Favicon-Seite auf der Logaster-Website kopiert werden.

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

Sobald Sie dies getan haben, laden Sie die Datei wieder dorthin herunter, wo Sie sie erhalten haben. Bereit! Laden Sie die Seite Ihrer Website neu, um das Favicon anzuzeigen.

Die meisten modernen Browser sind intelligent genug, um die Favicon-Datei auch ohne solchen Code zu finden, allerdings nur, wenn das Favicon ein 16x16 Pixel großes Bild mit dem Namen favicon.ico hat und im Stammverzeichnis Ihrer Website gespeichert ist.

Wir hoffen, dass Ihnen dieser Artikel einige nützliche Informationen gegeben hat, die Ihnen bei der Erstellung eines Favicons helfen, das Ihre Website erfolgreicher und attraktiver macht.

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

Aufgrund seines nicht standardmäßigen Formats und seiner geringen Größe kann die Erstellung eines Favicons 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 beim Website-Design und im Allgemeinen äußerst wichtig.

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

Erstens, Ein Favicon macht Ihre Website personalisierter und passt besser zu anderen grafischen Elementen, beispielsweise einem 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. Eine vereinfachte Version des Firmenlogos wäre eine gute Lösung, 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 Symbolen verwende ich am liebsten Rasterbildbearbeitungsprogramme (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 Vorgänge verfügen, ist es besser, Online-Dienste zu nutzen, z 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 hochauflösende Bildschirme.
– 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

Früher, als nur Windows-ICO-Dateien unterstützt wurden, konnten wir Zeit sparen, indem wir das 16x16-Favicon als GIF speicherten und ihm die Erweiterung .ico gaben. 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 Favoriten unterschiedlicher Größe (z. B. 32-Pixel-Taskleistensymbole in Windows 7), daher ist das ICO-Format in diesem Fall die einzige Option.

PNG-Dateien sind sehr praktisch, da Sie zum Erstellen keine speziellen Tools benötigen. 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 im Internet Explorer-Browser nicht unterstützt wird.

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 eine großartige Option sein, wenn 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 ein neuer, einfacher und praktischer Dienst zum Erstellen eines Favicons und Logos für Ihre Website.
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 dem Logotizer-Online-Generator

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 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 dementsprechend eine Website zu Ihren Browser-Lesezeichen hinzufügen oder Ihren Verlauf öffnen, können Sie Symbole unterschiedlicher Größe sehen, diese werden jedoch 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 Betriebssystem aussieht. 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 Favoriten

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!

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:

1) Öffnen Sie das Logo im PNG-Format auf transparentem Hintergrund im Editor, indem Sie auf klicken: "Datei öffnen" und wählen Sie ein Bild von Ihrem Computer aus. 2) Entfernen Sie den Firmennamen aus dem Logo, um nur das Symbol zu verwenden, indem Sie das Tool auswählen "Radiergummi" und Ändern der Hauptfarbe in Weiß.
3) Ändern Sie nun die Logogröße auf 16x16 Pixel, indem Sie auf klicken: „Bild“ – „Bildgröße“.
4) Und ändern Sie die Abmessungen auf 16x16 Pixel. Ihr Favicon wird Ihnen sehr klein erscheinen, aber keine Sorge, alles ist so, wie es sein sollte.
5) Speichern Sie das Bild durch Klicken „Datei“ – „Speichern unter“ und wählen Sie den Dateityp aus „PNG“.
Wenn Ihr Logo gut aussieht, fahren Sie mit Schritt 4 fort.

Favicon auf einem Hintergrund mit einer Unternehmensfarbe:

1) Öffnen Sie wie bei der ersten Option die Datei im PNG-Format, jedoch nicht auf einem transparenten Hintergrund, sondern auf einem Hintergrund mit einer Unternehmensfarbe. 2) Entfernen Sie den Text und lassen Sie nur das Symbol übrig: Verwenden Sie das Tool "Pipette" um eine Farbe entsprechend dem Hintergrund auszuwählen – die Farbe in der Palette ändert sich automatisch in die gewünschte Farbe. Klicken Sie nun auf das „Pinsel“-Werkzeug und übermalen Sie den Text.
3) Ändern Sie die Größe durch Klicken „Bild“ – „Größe ändern“ und geben Sie 16x16 Pixel in das entsprechende Feld ein. Wenn das Bild proportional aussieht, speichern Sie es im PNG-Format und fahren Sie mit Schritt 4 fort.

Erstellen eines Favicons mit GIMP – GNU Image Manipulation Program

GIMP ist ein Grafikeditor, der Benutzern die Arbeit mit Vektorgrafiken ermöglicht. Der Vorteil dieses Programms besteht darin, dass Sie ein Favicon im .ICO-Format erstellen können und keine Bildkonverter verwenden müssen, wie es bei Adobe Photosop der Fall ist. 1) Öffnen Sie die Datei im Programm durch Klicken "Datei öffnen" und wählen Sie das gewünschte Bild auf Ihrem Computer aus.
2) Jetzt müssen Sie den Text entfernen, sodass nur noch das Symbol übrig bleibt: Klicken Sie auf die Farbpalette und geben Sie den Farbcode für den Unternehmenshintergrund an. Wenn Sie es nicht kennen, klicken Sie einfach auf das Tool "Pipette", richten Sie es auf den Hintergrund des Logos und klicken Sie mit der linken Maustaste – die Farbe wird automatisch eingestellt. Benutze jetzt das Tool "Bürste", skizzieren Sie unnötigen Text.
3) Reduzieren Sie die Logogröße auf die Standard-Favicon-Größe – 16 x 16 Pixel, indem Sie auf klicken: „Bild“ – „Bildgröße ändern“.
4) Exportieren Sie das Logo, indem Sie auf klicken „Datei“ – „Exportieren als...“.
5) Und wählen Sie den zu exportierenden Dateityp aus – Microsoft Windows-Symbol mit der Erweiterung ICO. und klicken "Export".
Bereit! Jetzt können Sie ein Favicon auf Ihrer Website verwenden!

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

Um eine .PNG-Datei in .ICO zu konvertieren, können Sie Online-Konverter verwenden. Wir haben uns zum Beispiel für online-convert.com entschieden, aber Sie können aus den Suchergebnissen auch jedes andere auswählen, dessen Funktionsprinzip ungefähr das gleiche ist. Also: 1) Melden Sie sich auf der Website an und wählen Sie in der linken Seitenleiste Folgendes aus: „Bildkonverter“ – „In ISO konvertieren“.
2) Wählen Sie die zu konvertierenden Dateien auf Ihrem Computer aus, indem Sie auf die Schaltfläche klicken "Dateien auswählen", oder indem Sie Dateien in das entsprechende Feld ziehen und auf die Schaltfläche „Konvertierung starten“ klicken.
3) Klicken Sie nun "Herunterladen" um Ihre .ico-Datei auf Ihren Computer herunterzuladen. Es ist auch möglich, die Datei in einen Cloud-Speicher hochzuladen oder die Datei als ZIP herunterzuladen.

Wie installiere ich ein Favicon auf WordPress?

Laden Sie Ihr Favicon (favicon.ico) in das Hauptverzeichnis (Stammverzeichnis) der Site hoch. Das Stammverzeichnis ist der Hauptordner, in dem sich alle Ihre WP-Dateien befinden, wie zum Beispiel index.php und die Ordner wp-admin, wp-content + wp-includes. Stellen Sie sicher, dass Sie favicon.ico auf derselben Ebene wie diese Ordner und index.php platzieren. 1) Öffnen Sie WordPress „Verwaltungsgremium“.
2) Betreten Sie den Abschnitt
3) Klicken Sie auf
4) Klicken Sie auf die aufgerufene Datei "Header" oder, zu bearbeiten.
5) Suchen Sie die Codezeile, die mit beginnt und endet mit /favicon.ico "/>. Ändern Sie es, falls vorhanden, oder fügen Sie den folgenden Code unter dem HTML-Tag hinzu . Im Beispiel verwenden wir den Favicon-Namen als „favicon.ico“. Sie können Ihrem Favicon einen beliebigen Namen geben. Code: /favicon.ico"/>; 6) Änderungen speichern. Schlussfolgerungen: Bei der Gestaltung Ihrer Website müssen Sie darauf achten, dass Ihnen keine wichtigen Details entgehen, auch nicht so kleine wie das Favicon. Das Hinzufügen eines Symbols ist wirklich nicht schwierig. Aber dieses kleine Ding zeigt, dass Sie viel über Ihr Design nachgedacht und sich um die Details gekümmert haben. Haben Sie Fragen oder möchten Sie Ihre Erfahrungen mit der Erstellung eines Favicons für Ihre Website teilen? Willkommen bei den Kommentaren.

Favicon – (vom englischen FAVorites ICON, übersetzt „Symbol für Favoriten“) – ein Website-Symbol in der Größe 16x16px oder 32x32px, das vom Browser in der Adressleiste oder neben einem gespeicherten Lesezeichen angezeigt wird. Traditionell lautet der Name und die Erweiterung des Symbols favicon.ico.

Unser Service ist in der Lage, Ihr ausgewähltes Bild (bis zu 175 KB groß) in ein Symbol für das Site-Icon (16x16px oder 32x32px groß) umzuwandeln. Nach der Generierung müssen Sie nur noch favicon.ico in das gewünschte Site-Hosting-Verzeichnis hochladen.

Das Fehlen eines Symbols ist ein technischer Optimierungsfehler für eine Ressource; es verringert die Markenbekanntheit, verringert die CTR von Suchausschnitten, verschlechtert die Suche nach einer Webressource mithilfe von Browser-Lesezeichen usw.

Yandex verfügt über einen speziellen Bot, der das Favicon aller Websites individuell indiziert. Die Häufigkeit, mit der neue Symbole zur Suche hinzugefügt werden, liegt zwischen etwa zwei Wochen und einem Monat.

Wo kann ich ein Favicon hochladen, um es online zu stellen?

Um das von Ihnen erstellte favicon.ico als Site-Symbol anzuzeigen, müssen Sie es in das Stammverzeichnis der Site (oder in ein beliebiges Verzeichnis) hochladen und im Site-Vorlagencode (), Codebeispiel, den absoluten oder relativen Pfad dazu angeben :

Warum den Pfad zum Favicon angeben?

Wenn Sie ein Site-Symbol auf der gesamten Site verwenden und sich favicon.ico im Stammordner befindet, müssen Sie den Pfad dazu nicht angeben – Browser finden es selbst und zeigen es als Site-Symbol an. Große oder einzigartige Ressourcen verwenden für jede ihrer Kategorien unterschiedliche Site-Symbole. Dazu werden in den entsprechenden Templates die Pfade zu unterschiedlichen favicon.ico angegeben.