Favicons online erstellen mit diesen fünf praktischen Editoren

. . . Reklame

Möchten Sie ihr Geld in der WordPress-Welt verdienen? Dann bietet sich anstatt eines HTML-Editors der Einsatz eines Page Builders wie Elementor an. Mit diesem Tool werden Sie das Ziel professionelle Websites zu erstellen wesentlich schneller erreichen.

. . .

Quick Tip (vom 25.3.2020): Alle modernen Browser unterstützen mittlerweile SVG-Favicons. Ergo kann man jedes Emoji wie folgt in ein favicon.svg umwandeln:

<svg xmlns = "http://w3.org/2000/svg" viewBox = "0 0 100 100">
   <text y = ". 9em" font-size = "90">
💩
   </text>
</svg>

(via Leo Verou)


Favicons gehören seit geraumer Zeit, fast war ich versucht, „seit Menschengedenken“ zu schreiben, zur Grundausstattung einer Website. Für viele Bildbearbeitungsprogramme existieren Plugins, mit denen die Minimalsymbole erstellt werden können. Es gibt mittlerweile jedoch auch einige Online-Favicon-Editoren mit unterschiedlichen Schwerpunkten. Diese unterscheiden sich in Details recht deutlich voneinander.

X-Icon-Editor

faviconeditor_xiconeditor
X-Icon-Editor

Der X-Icon-Editor kommt mit vergleichsweise vielen Zeichenfunktionen daher. Während die meisten Editoren ausschließlich einzelne Pixel in unterschiedlicher Farbe zeichnen können, bietet der X-Icon-Editor Pinsel mit einstellbarer Kontur und Härte, sowie die Möglichkeit, Rechtecke und Ovale zu zeichnen.

Darüber hinaus gibt es eine Importfunktion für gängige Grafikformate (unter anderem JPEG, PNG und ICO). Das Favicon kann in vier Größen (16, 24, 32 und 64 Pixel Kantenlänge) exportiert werden.

Logaster

Der Favicon-Service von Logaster


Bei Logaster gibst du deinen Firmennamen und deine Branche an, und das Tool generiert automatisch dazu passende Layouts, aus denen du deinen Favoriten auswählen kannst.

Für ein schönes Favicon in der Browseradressleiste deiner Seitenbesucher brauchst du keine Photoshopkenntnisse. Logaster generiert dir ein fertiges Favicon in den Formaten .ico und .png. Das dauert keine zwei Minuten.

favicon.cc

faviconeditor_faviconcc
favicon.cc

Der Favicon-Editor favicon.cc bietet weit weniger Funktionen zum Zeichnen als der X-Icon-Editor. Es können ausschließlich Pixel in unterschiedlicher Farbe und Transparenz gezeichnet werden. Allerdings gibt es auch hier die Möglichkeit, Grafiken zu importieren und anschließend zu bearbeiten.

. . . Reklame

Schnelle Ladezeiten sind absolut wichtig. Google und der Leser honorieren das. Mit GeneratePress machen Sie Ihre WordPress-Website zum Rennboliden. Jetzt kostenlos installieren.

. . .

Das Schöne an favicon.cc ist die Live-Vorschau. Das bearbeitete Icon wird in einem Browser-Ausschnitt so dargestellt, wie es im Internet Explorer aussehen würde. Man bekommt also unmittelbar einen Eindruck davon, wie das Icon im Umfeld der Browser-UI wirkt.

Antifavicon

faviconeditor_antifavicon
Antifavicon

16 mal 16 Pixel bieten wenig Platz für Text. Der Favicon-Generator Antifavicon nutzt die 265 Pixel Fläche dennoch, um zwei Zeilen Text in einer Pixelschrift unterzubringen. Hintergrund- und Textfarbe sind für beide Zeilen einstellbar.

Zudem wird die Schriftgröße der Textmenge angepasst – zumindest in einem gewissen Umfang. Denn die Grenzen des Machbaren sind schnell erreicht.

Faviconist

faviconeditor_faviconist
Faviconist

Der Faviconist geht einen ähnlichen Weg wie Antifavicon. Auch hier wird die Iconfläche mit Text befüllt. Statt einer Pixelschrift stehen jedoch mehrere Schriftarten zur Auswahl. Bei mehr als zwei Buchstaben ist zwar nicht die Grenze des Machbaren, jedoch die des Lesbaren erreicht. Für Monogramme und Abkürzungen reicht es allemal.

. . . Reklame

Unzufrieden mit dem Hoster, oder neue Website am Start? Setzen Sie auf Kinsta, dem Managed Hosting Provider. Kostenlose Demo.

. . .

Außerdem lassen sich sehr einfach Verläufe als Hintergrund, wie auch als Textfüllung erstellen. Die Icons werden in 16, 32 und 256 Pixel Kantenlänge erstellt und in einer Live-Vorschau angezeigt.

Genfavicon

faviconeditor_genfavicon
Genfavicon

Der letzte hier vorgestellte Online-Editor, Genfavicon, ist mehr Generator als Editor. Denn viele Bearbeitungsfunktionen bietet er nicht. Er ermöglicht die Konvertierung hochgeladener Grafiken ins ICO-Format. Dazu wird bei der hochgeladenen Grafik ein quadratischer Ausschnitt gewählt. Größe und Position des Ausschnittes sind frei definierbar. Dann tritt Genfavicon in Aktion. Anschließend steht der gewählte Ausschnitt als Favicon zum Download bereit. Nachteilig ist dabei, dass das Favicon nur in einer Größe exportiert werden kann, anstatt mehrere Größen in einem Favicon unterzubringen.

Fazit: Alle vorgestellten Editoren haben aufgrund ihres unterschiedlichen Funktionsumfanges ihre Stärken und Schwächen und bieten sich für verschiedene Herangehensweisen beim Erstellen und Bearbeiten von Favicons an. Mehr als eines im Werkzeugkoffer zu führen, ergibt dabei durchaus Sinn.


So installieren Sie ein Favicon

Sie haben Ihr Favicon nun erstellt. Der nächste Schritt ist, es zu installieren. Dies ist ebenfalls ein ziemlich einfacher Prozess.

Schritt 1: Die Datei „favicon.ico“ hochladen

Um die favicon.ico hochzuladen, müssen Sie sich auf Ihrem FTP-Server einloggen. Gehen Sie hier, um sich bei Ihrem FTP-Programm anzumelden:

ftp://benutzername@dernamederseite.de

Geben Sie Ihren Benutzernamen und Ihr Passwort ein, um Zugriff auf den Server zu erhalten.

Laden Sie von dort Ihre Favicon-Dateien in den Stammordner hoch. Der Stammordner heißt normalerweise public_html oder www.

Schritt 2: Fügen Sie das Favicon zu Ihrem HTML hinzu

Lassen Sie Ihr FTP-Fenster geöffnet und laden Sie die Datei index.html oder header.php herunter.

Anschließend laden Sie einen Code hoch, der je nach Ihrer Website variiert …

Wenn Ihre Website aus einfachem HTML besteht, suchen Sie den HEAD-Bereich der Datei index.html und laden Sie den folgenden Code hoch:

<link rel = "shortcut icon" type = "image / x-icon" href = "https://dernamederseite.de/favicon.ico" />

In WordPress kann man das Favicon in der Regel über den Customizer hochladen, der in Dashboard » Design » Customizer zu finden ist. Das Menü sieht dann bei uns so aus:

Produktdesign - Linie

Wer lieber direkt in die PHP-Datein schreiben möchte, fügt folgenden Code in die header.php ein.

<link rel="icon" href="<?php echo $images_url; ?>favicon.png" />

So weiss der Browser, wo er nach dem Favicon zu suchen hat.

Ihr Favicon sollte nun installiert sein.


Benachrichtigungen im Favicon mit Tinycon

In Zeiten sozialer Netzwerke ist man es gewohnt, jederzeit über neue Statusmeldungen informiert zu werden. Facebook und Co. setzen kleine Icons ein, über welche die Anzahl der neuen Statusmeldungen dargestellt wird. Diese Meldungen sind jedoch nur zu sehen, wenn sich die Seite in einem aktiven Tab befindet. Daher wird die Meldung meist zusätzlich noch im Seitentitel untergebracht, der auch bei inaktiven Tabs sichtbar ist. Mit Tinycon lassen sich beide Möglichkeiten kombinieren. Denn die Bibliothek nutzt das Favicon, um über die Anzahl neuer Meldungen zu informieren.

Screenshot: Dr. Web

Wie funktioniert Tinycon?

Tinycon ist eine JavaScript-Bibliothek, die das bestehende Favicon einer Seite um einen kleinen Bereich ergänzt, in der eine beliebige Zahl dargestellt werden kann – ähnlich wie man es von den Statusicons auf Facebook kennt. Der Vorteil ist, dass eine Seite nicht in einem sichtbaren Tab aufgerufen sein muss, um diese Meldung zu sehen.

Tinycon holt sich das bestehende Favicon und nutzt den „2D Rendering Context“, um das Favicon um ein Feld mit Zahl zu erweitern. Anschließend wird das manipulierte Bild wieder als Favicon eingesetzt.

Tinyicon einbinden

Der Einsatz von Tinycon ist sehr einfach. Zunächst muss die Bibliothek im Kopf der Seite eingebunden werden:

<script src="tinycon.js"></script>

Anschließend kann per „Tinycon.setBubble()“ die Zahl, die dem Favicon hinzugefügt werden soll, angegeben werden:

<script>
  Tinycon.setBubble(3);
</script>

Beim Aufruf der Seite wird nun über das Favicon in der unteren rechten Ecke ein rotes Feld mit der Zahl 3 dargestellt. Sinnvoll ist der Einsatz natürlich nur, wenn man Tinycon mit Anwendungslogik unterstützt, um etwa die Zahl abgegebener Kommentare an einem Blogpost auszulesen. Das Aussehen des Zahlenfeldes lässt sich per „Tinycon.setOptions()“ noch anpassen:

Tinycon.setOptions({ 
   width: 7, 
   height: 9,   
   font: "10px Arial",
   colour: "#ffffff",
   background: "#549A2F",
   fallback: true });

Sowohl Breite und Höhe, sowie die Schriftart und die Hintergrund- und Textfarbe können geändert werden. Die Option „fallback“ ermöglicht es, eine Meldung im Seitentitel darzustellen, falls der Browser die Darstellung im Favicon nicht unterstützt. In diesem Fall wird die Zahl in Klammern vor dem eigentlichen Titeltext dargestellt – wie man es auch von Facebook kennt.

Browserunterstützung

Chrome ab Version 15, Firefox ab Version 9 und Opera ab Version 11 unterstützen Tinycon. Internet Explorer ab Version 9 und Safari ab Version 5 schaffen lediglich die Darstellung der Zahl im Seitentitel, also nicht im Favicon.

6 Antworten

  1. Hi,
    Ich habe kein Problem ein Favicon zu erstellen, Mich stört aber das es logischerweise auf die umwandelung auf 8bit so verpixelt aus sieht, Wenn ich mich auf anderen webseiten so umsehe dann sind aber alle sehr Scharf sogar wie machen die das?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Inhaltsverzeichnis

Unser Newsletter...

bietet Ihnen nützliche Tipps, die Ihren Arbeitsalltag erleichtern.

Social Media

Meistgelesen​

Schiftarten auf Webseiten und in Logos erkennen.

Schriftarten auf einer Website erkennen

Die massive Verbreitung der Webfonts bringt es mit sich, dass Typografie auch im Netz immer aufwändiger wird. Als stets interessierter Developer kommt es daher immer häufiger vor, dass du wissen möchtest, welcher Font da eingesetzt worden ist. Auch im Printbereich wirst du regelmäßig mit dieser Frage konfrontiert.