Favicons online erstellen mit diesen fünf praktischen Editoren

Reklame

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

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

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

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.

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

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

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.

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

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:

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.

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.