Favicon-Generator

Die Bedeutung von Favicons und Website-Icons für den Webauftritt

Ein Favicon und die dazugehörigen Website-Icons sind wesentliche Elemente für den professionellen Auftritt einer Website und die Wiedererkennbarkeit einer Marke. Sie erscheinen in den Registerkarten des Webbrowsers, in Lesezeichenlisten, auf den Home-Bildschirmen von Mobilgeräten sowie bei installierten Progressive Web Apps (PWAs). Ohne diese Icons zeigen Browser lediglich ein generisches Symbol an, was den Wiedererkennungswert einer Seite mindert. Ein vollständiges Icon-Paket sorgt dafür, dass eine Website auf allen Endgeräten und Plattformen optimal dargestellt wird.

Verschiedene Icon-Typen und ihre Verwendungszwecke

Moderne Webstandards erfordern unterschiedliche Icon-Formate und -Größen, da verschiedene Geräte und Betriebssysteme spezifische Anforderungen an die Darstellung stellen:

• Klassische Browser-Tab-Icons: Die Datei favicon.ico ist der traditionelle Standard für Webbrowser. Sie enthält mehrere Auflösungen in einer einzigen Datei – konkret die Größen 16, 32 und 48 Pixel. Ergänzend werden PNG-Icons in 16 und 32 Pixeln für moderne Browser verwendet.
• Apple Touch Icons: Für iOS-Geräte wie das iPhone und das iPad wird ein spezielles Icon mit einer Auflösung von 180 Pixeln benötigt. Dieses wird verwendet, wenn ein Nutzer die Website als Verknüpfung auf seinem Home-Bildschirm speichert.
• PWA- und Android-Icons: Progressive Web Apps und Android-Geräte nutzen größere Symbole mit Auflösungen von 192 und 512 Pixeln. Diese sorgen für eine scharfe Darstellung auf hochauflösenden Displays und in App-Übersichten.
• Vektorgrafiken: Wenn als Ausgangsformat eine SVG-Datei verwendet wird, bleibt die Vektordatei selbst im Paket erhalten, was eine verlustfreie Skalierung in modernen Browsern ermöglicht.

Anforderungen an das Quellbild

Für die Erstellung eines qualitativ hochwertigen Icon-Pakets ist die Wahl des passenden Ausgangsbildes entscheidend. Der Favicon-Generator unterstützt die Dateiformate PNG, JPG und SVG bis zu einer Dateigröße von maximal 50 MB.

Bei der Verwendung von Rastergrafiken (PNG oder JPG) wird eine Mindestgröße von 512 × 512 Pixeln empfohlen. Wenn das Quellbild kleiner ist, zeigt das Tool den Hinweis „Kleine Quelle ({w} × {h} px): Die großen Icons könnten unscharf wirken. 512 × 512 oder größer – oder eine SVG-Datei – liefert die besten Ergebnisse.“ an. Kleinere Bilder müssen für die großen Zielformate hochskaliert werden, was zu einer weichen oder unscharfen Darstellung führt.

Die Verwendung einer SVG-Vektordatei ist die optimalste Option, da alle benötigten Icon-Größen direkt aus den Vektordaten gerastert werden, wodurch selbst das kleinste 16-Pixel-Icon absolut scharf bleibt.

Anpassung nicht-quadratischer Bilder und Hintergründe

Da alle generierten Icons quadratisch sein müssen, bietet das Tool Optionen zur Anpassung von Bildern, die nicht diesem Seitenverhältnis entsprechen. Standardmäßig werden nicht-quadratische Bilder zentriert und mit einem Abstand versehen.

• Einpassen (Abstand): Das gesamte Bild bleibt sichtbar und wird zentriert, wobei ein leerer Abstand (Padding) um das Bild herum entsteht.
• Ausfüllen (Zuschneiden): Das Bild füllt die quadratische Fläche komplett aus, wobei überstehende Ränder an den Seiten oder oben und unten abgeschnitten werden.

Ein weiterer wichtiger Aspekt ist der Hintergrund des Icons. Standardmäßig ist dieser transparent. Während transparente Hintergründe in Browser-Tabs gut wirken, stellen iOS-Geräte transparente Bereiche auf dem Home-Bildschirm schwarz dar. Daher ist für das Apple Touch Icon eine feste Hintergrundfarbe oft die sicherere Wahl.

Integration und die Rolle der site.webmanifest

Nach der Generierung stellt das Tool eine ZIP-Datei bereit, die alle Icons sowie eine Datei namens site.webmanifest enthält. Diese Manifest-Datei ist eine kleine Textdatei, die die großen Icons auflistet und modernen Geräten sowie installierten Web-Apps mitteilt, wo sich die passenden Symbole befinden.

Um die Icons auf einer Website zu implementieren, müssen alle extrahierten Dateien aus der ZIP-Datei in das Stammverzeichnis der Website hochgeladen werden, sodass das klassische Favicon direkt unter /favicon.ico erreichbar ist. Anschließend wird der bereitgestellte HTML-Code in den <head>-Bereich jeder einzelnen Webseite eingefügt. Die Browser und Betriebssysteme wählen dann automatisch die für das jeweilige Gerät passende Icon-Größe aus.

Datenschutz und lokale Verarbeitung

Die Verarbeitung der Bilddateien erfolgt vollständig lokal im Webbrowser des Nutzers. Es werden keine Bilddaten auf die Server von BroBroGo hochgeladen. Dies gewährleistet eine direkte Verarbeitung ohne externe Datenübertragung.

Häufig gestellte Fragen (FAQ)

Welche Dateien sind im Icon-Paket enthalten?
favicon.ico mit Versionen in 16, 32 und 48 Pixeln, PNG-Icons in 16, 32, 180, 192 und 512 Pixeln sowie eine site.webmanifest, die die großen Icons auflistet. Wenn Sie mit einer SVG-Datei beginnen, ist auch die Vektordatei selbst enthalten. Eine ZIP-Datei enthält alles.

Welche Größe sollte mein Quellbild haben?
Eine SVG-Datei ist ideal – jedes Icon wird aus der Vektorgrafik generiert, sodass selbst 16 Pixel scharf bleiben. Bei PNG oder JPG sollten Sie mit mindestens 512 × 512 Pixeln beginnen; kleinere Bilder werden hochskaliert und können unscharf wirken.

Sollte der Hintergrund transparent sein oder eine Farbe haben?
Tab-Icons sehen transparent gut aus. Auf dem Home-Bildschirm von iPhone und iPad werden transparente Bereiche jedoch schwarz dargestellt – falls Nutzer Ihre Website zu ihrem Home-Bildschirm hinzufügen, wählen Sie lieber eine Hintergrundfarbe.

Was passiert mit einem Bild, das nicht quadratisch ist?
Icons sind quadratisch, aber Ihr Bild wird niemals verzerrt. Standardmäßig wird es zentriert mit einem Abstand (Padding) darum herum platziert; wechseln Sie zu „Ausfüllen (Zuschneiden)“, um stattdessen die überstehenden Ränder abzuschneiden.

Wohin gehören die Dateien auf meiner Website?
Laden Sie sie in das Stammverzeichnis Ihrer Website hoch, sodass favicon.ico unter /favicon.ico erreichbar ist, und fügen Sie dann die generierten Zeilen in den <head> Ihrer Seiten ein. Browser wählen automatisch die richtige Größe aus.