D.r Web seit 1997 print.
  • Beste Agenturen
  • Agentur-Städte 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur eintragen ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Städte 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur eintragen ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Magazin
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
D.r Web seit 1997 print.
  • Agentur finden
  • Magazin
Agentur eintragen →
Dr. Web » (Kostenlose) Services » Favicons online erstellen mit diesen fünf praktischen Editoren

Favicons online erstellen mit diesen fünf praktischen Editoren

Jeder kennt sie, jeder hat sie schonmal gesehen: Favicons. Sie gehören zu jeder Website dazu wie die Butter auf’s Brot. Einfach erstellen lassen sie sich auch. Zum Beispiel mithilfe des großen Icon-Sets von Dr. Web mit über 970 hochwertigen Icons, das du jetzt kostenlos herunterladen kannst.

Sozial sein
Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • 6 Kommentare
Lesedauer: 6 Minuten
  • von Denis Potschien
  • 13. Februar 2013
Das große Dr. Web Icon-Set mit über 970 individuell anpassbaren Icons im SVG Format.
Icons lassen sich einfach erstellen, z.B. mithilfe des großen Dr. Web Icon-Sets mit über 970 hochwertigen Icons, das du jetzt kostenlos herunterladen kannst.

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.

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.

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.

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.
Sponsor. Du bist auch interessiert? Kontaktiere uns →
Kostenloses SEO-Tool. Werbung für die OSG Performance Suite.

Jobs

Lead Entwickler Mobile mit Fokus iOS-Entwicklung

Karlsruhe

Grafik-Designerin

Freiburg im Breisgau

Sprachtalente

Volkach oder Würzburg

Zum richtigen Job

Agenturpartner

wolpersweb.de Webdesign & SEO

Düsseldorf

AdsMasters GmbH

Düsseldorf

PRIMA LINE

Berlin

Trend Maker Marketing – Webdesign Agentur Regensburg

Regensburg

WordPress Agentur Kreativdenker

Speyer

Alle Agenturpartner

Lust auf mehr? Wir empfehlen folgende Artikel:

Krumm, schief, blass? So wertest du Fotos von Gebäuden kreativ auf

Etwas Abstand zum Objekt oder ein gutes Weitwinkelobjektiv sorgen dafür, dass große Gebäude im Ganzen abgelichtet werden können. Trotzdem kommt es zu Verzerrungen, wie etwa

 →   

Adobe Photoshop: Dramatische Fotos im Handumdrehen

Wir alle haben hunderte Fotos auf dem Rechner liegen und wissen nichts damit anzufangen. Dabei reichen oft wenige Schritte in Photoshop, um aus einer guten

 →   

So schnell erstellst du mit der kostenlosen Web-App Pablo Bilder (nicht nur) für die sozialen Medien

Kleine Helfer, mit denen man schnell und unkompliziert Bilder für die sozialen Medien erstellen kann, haben Konjunktur. Erst vor kurzem stellten wir euch einen ganzen

 →   

6 Antworten zu „Favicons online erstellen mit diesen fünf praktischen Editoren“
— was ist Deine Meinung?

  1. Mugen sagt:
    20. Februar 2014 um 22:40 Uhr

    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?

    Antworten
  2. Nep-Rec Agentur sagt:
    19. Februar 2013 um 15:31 Uhr

    Die guten alten Favicons…
    Werde gleich mal die (für mich) neuen Generatoren ausprobieren…Vielen Dank!

    Antworten
  3. Otto sagt:
    19. Februar 2013 um 9:26 Uhr

    Danke für diese und die vielen anderen hilfreichen Sammlungen! Mein Lieblings-Favicon-Generator ist übrigens dieser (deutschsprachige):
    http://www.favicon-generator.de

    Antworten
  4. AG sagt:
    13. Februar 2013 um 13:28 Uhr

    Ich hab kürzlich mal ein sich bewegendes (drehend) Favicon gesehen. Weiß jemand, wie das gemacht war? Leider hab ich den Link nicht gespeichert.

    Antworten
    1. Wolf sagt:
      13. Februar 2013 um 17:09 Uhr

      Mit favicon.cc geht das. Einfach mehrere Ebenen erstellen, fertig.

      Antworten
      1. AG sagt:
        18. Februar 2013 um 12:15 Uhr

        Dankeeee, das probiere ich aus!

        Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Bad Nauheim
  • Agenturen in Basel
  • Agenturen in Bayreuth
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Bad Nauheim
  • Agenturen in Basel
  • Agenturen in Bayreuth
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.