Favicon-Generator

Ein Favicon-Generator erzeugt das kleine Symbol, das in Tabs, Lesezeichen und auf dem Startbildschirm erscheint – und macht deine Marke dort wiedererkennbar, wo sie sonst namenlos wäre.

Vorteile eines Favicon-Satzes

• Markenauftritt: Ein wiedererkennbares Symbol für deine Website.
• Mehrere Größen: Symbole für normale und hochauflösende Bildschirme.
• Formatabdeckung: ICO mit mehreren eingebetteten Größen, PNGs daneben und ein Vektor, der Vektor bleibt.
• Schneller Ablauf: Logo ablegen, Ausrichtung wählen, ein ZIP herunterladen.
• Sauberes Ergebnis: Jede Größe wird aus dem Original in voller Auflösung gemittelt, damit bei 16 px nichts ausfranst.

1. 1
   Motiv einbringen: Lege ein Logo ab – PNG, JPG, WebP, AVIF, GIF, BMP oder SVG. Kein Logo? Wechsle zu Text und tippe ein bis zwei Buchstaben, oder wähle ein Emoji.
2. 2
   Ausrichtung im Quadrat wählen: Einpassen behält das ganze Logo und füllt den Rest auf, Ausfüllen beschneidet bis an die Kanten, Verzerren ignoriert die Form. Ergänze Innenabstand, falls Android dein Symbol beschneidet, und runde die Ecken, wenn sie rund sein sollen.
3. 3
   Hintergründe festlegen: Lass das Symbol transparent oder gib ihm eine Farbe. Den iPhone-Hintergrund setzt du getrennt – iOS kennt dort keine Transparenz und zeigt ein durchsichtiges Symbol auf Schwarz.
4. 4
   Website benennen: Name, Kurzname und Themenfarbe landen in site.webmanifest und im Theme-Color-Tag – genau das liest eine Installationsaufforderung.
5. 5
   Herunterladen und einbauen: Ein Klick liefert ein ZIP. Lege alle Dateien in das Stammverzeichnis deiner Website und füge die kopierten Link-Tags in das head deiner Seite ein.

Dein Logo wird auf dem Gerät auf jede Symbolgröße verkleinert und dann in favicon.ico, den PNG-Satz, site.webmanifest und das HTML geschrieben, das darauf verweist.

Ablauf der Favicon-Erstellung

• Laden: Deine Datei wird einmal dekodiert und behalten, sodass eine Einstellungsänderung sie nie erneut liest.
• Ausrichtung: Das Logo wird eingepasst, ausgefüllt oder verzerrt – mit deinem Innenabstand und deiner Eckenrundung.
• Verkleinerung: Jede Größe entsteht aus dem Original, nie aus der Größe darüber, sodass keine die Unschärfe einer anderen erbt.
• Plattform-Flächen: Das iPhone-Symbol erhält einen deckenden Hintergrund, weil iOS ein transparentes auf Schwarz zeigt.
• Verpackung: favicon.ico nimmt die Einträge 16, 32 und 48 auf; PNGs, Manifest und Markup entstehen daneben.
• Ausgabe: Ein ZIP mit allen Dateien, jeweils so benannt, wie es die Einbauschritte erwarten.

• Symbolgrößen: PNG-Favicons mit 16, 32, 48 und 96 px, ein iPhone-Symbol mit 180 px sowie App-Symbole mit 192 und 512 px.
• favicon.ico: Eine Datei mit den Einträgen 16, 32 und 48 px – so geschrieben, dass Desktop-Browser und Windows sie beide lesen.
• site.webmanifest: Das Manifest samt der beiden Symbolgrößen, ohne die keine Installationsaufforderung erscheint.
• Markup: Die Link-Tags für dein head, bereit zum Kopieren mit einem Klick.
• Plattform-Pakete: Windows-Startkacheln, Android-Startdichten und Vektor-Durchreichung mit Pro.

Beim Start einer Website, bei einem Markenwechsel, wenn eine Installation angeboten werden soll oder wenn die Symbolvorgaben einer Plattform einzuhalten sind.

Typische Einsätze

• Webentwicklung: favicon.ico zusammen mit index.html ausliefern.
• Markenkonsistenz: Das Tab-Symbol an Logo oder Wortmarke angleichen.
• Mobil: apple-touch-icon und die Startbildschirm-Größen ergänzen.
• Windows: Kachelbilder für angeheftete Seiten erzeugen.
• Kundenprojekte: Einen vollständigen Symbolsatz in einem Durchgang abliefern.

Einfache, kontraststarke Motive lesen sich bei 16×16 am besten. Beginne nach Möglichkeit mit einer quadratischen Vorlage von mindestens 512×512.

Kennzahlen

• 16×16 und 32×32 sind die verbreitetsten Favicon-Größen.
• Eine ICO-Datei kann mehrere Bitmaps in einer Datei tragen.
• PNG-Favicons sind flexibel, brauchen aber eine Datei je Größe – deshalb das ZIP.
• Favicons erscheinen in Tabs, im Verlauf und in der Lesezeichenleiste.
• Je hochwertiger die Vorlage, desto weniger Unschärfe nach dem Verkleinern.

Setze auf kräftige Formen, prüfe das Ergebnis in echten Tabs und kontrolliere den Kontrast auf hellen wie dunklen Leisten.

Qualitätsfragen

• Nimm eine scharfe, quadratische Vorlage.
• Vermeide kleine Schrift und feine Linien, die bei niedriger Auflösung verschwinden.
• Sieh dir das Ergebnis auf normalen und auf hochauflösenden Bildschirmen an.
• Halte die Markenfarben mit deinem Seitenkopf konsistent.

Wann es nicht passt

• Sehr detailreiche Fotos, die bei 16×16 zu Matsch werden.
• Vorlagen mit sehr geringer Auflösung.
• Motive, deren Verläufe schmaler als ein paar Pixel sind.
• Fälle, in denen ausschließlich ein Vektor geliefert werden soll – dafür ist ein Zeichenprogramm das richtige Werkzeug.

Basiert auf optimierten Bildverarbeitungs-Algorithmen.

• Bild hochskalieren
• Metadaten anzeigen
• Bildkonverter
• Bilder komprimieren