Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Beste Agenturen
  • Magazin
  • Beste Agenturen
  • Magazin
Dr. Web Logo seit 1997.
  • Kontakt
  • Anmeldung
  • Newsletter
  • Beste Agenturen
  • Magazin
Menü
  • Beste Agenturen
  • Magazin
Suche
Agenturpartner werden →

Dr. Web » Webdesign » Favicons online erstellen mit diesen fünf praktischen Editoren

Favicons online erstellen mit diesen fünf praktischen Editoren

Artikel weiterempfehlen

  • Aktualisiert am 7. Februar 2023
  • 6 Kommentare
  • Denis Potschien von Denis Potschien
Lesedauer: 6 Minuten

Inhaltsverzeichnis

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
Favicons online erstellen mit diesen fünf praktischen Editoren 1

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 Favicons online erstellen mit diesen fünf praktischen Editoren
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.

Lust auf mehr?

  • Jörg Mrusek Jörg Mrusek
  • 8. März 2023
Doch lieber Lotto spielen und so reich werden?

Diese 8 Tipps sollte jeder Webentwickler kennen

Sie sind Webentwickler oder möchten einer werden? Hier kommen 8 Tipps wie aus dem Lehrbuch. Doch wehe, wenn der Alltag dazwischen grätscht. Lieber doch Lotto spielen?
  • Webdesign
  • Joy Shaheb Joy Shaheb
  • 4. März 2023

Alles zu CSS Background-Image (großer Leitfaden mit Codebeispielen)

Mit CSS Background-Image (deutsch: CSS-Hintergrundbild) kannst du einem Element ein Hintergrundbild, Hintergrundvideo, eine Hintergrundfarbe oder einen Farbverlauf zuweisen.
  • Webdesign
  • Michael Dobler Michael Dobler
  • 2. März 2023
KI = keine oder künstliche Intelligenz?

3 AI Webdesign Tools: des Webdesigners bester Freund oder Totengräber?

Drei KI-basiert Webdesign Tools stelle ich Ihnen heute vor. Mal sehen, wohin die Reise für den Webdesignerberuf geht.
  • Webdesign
  • Michael Dobler Michael Dobler
  • 3. Februar 2023
Webdesign für keine Dummies

So verbessern Sie mit Bildern und Grafiken das Webdesign Ihrer Website (5 Tipps)

Haben Sie schon einmal eine Webseite mit einem schlichten Design besucht und gedacht: „Kein Problem! So etwas bekomme ich auch selbst im Handumdrehen hin. Die Webdesign Bilder? Einfach nur klasse!“? Pustekuchen…
  • Webdesign
  • Dennis Gutjahr Dennis Gutjahr
  • 30. Dezember 2022

UX-Design: 11 Tipps, um Entwicklungskosten zu sparen und Umsätze zu steigern

UI/UX Design ist ein vielfältiger Fachbereich der IT, welcher eine immer größer werdende Rolle in der modernen Entwicklung einnimmt. Oft ist die Qualität des UI/UX Designs der entscheidende Faktor für den Erfolg (oder Misserfolg) eines Web-, App- oder E-Commerce-Produkts.

  • Webdesign
  • Markus Seyfferth Markus Seyfferth
  • 31. Oktober 2022

Was kostet eine Website?

Eine gut gestaltete und übersichtliche Internetpräsenz ist das digitale Aushängeschild deines Unternehmens. Ob Freelancer, Start-Up oder mittelständisches Unternehmen – an einer professionellen Onlinepräsenz führt heute kein Weg vorbei. Dabei steigt auch der Anspruch an rein privat genutzte Websites. Wir stellen in diesem Artikel die Kosten vor, die beim Erstellen einer Website zu beachten sind.
  • Webdesign

6 Antworten

  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.

    2. AG sagt:
      18. Februar 2013 um 12:15 Uhr

      Dankeeee, das probiere ich aus!

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.
Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑