Skip to main content

Favicon Generator

Generate favicons in all standard sizes (16x16 to 512x512) for websites and PWAs.

Geprüft von · Zuletzt geprüft

⭐

Drop an image here or click to upload

Use a square image for best results

So verwendest du den Favicon-Generator

  1. Lade ein quadratisches Quellbild hoch - idealerweise 512x512 oder größer. PNG mit transparentem Hintergrund funktioniert am besten, weil jede Favicon-Größe sauber auf verschiedenen Browser-Designfarben sitzen kann.
  2. Sieh dir alle generierten Größen in der Vorschau an. Das Werkzeug erstellt 16x16, 32x32, 48x48, 180x180 (Apple Touch Icon), 192x192 (Android) und 512x512 (PWA-Splash) in einem Durchgang.
  3. Überprüfe jedes Rendering. Da die Quelle für jedes Ziel verkleinert wird, verschwinden subtile Details bei 16x16 - diese Vorschau zeigt dir, ob dein Logo bei Thumbnail-Größen lesbar ist.
  4. Einzelne PNGs herunterladen, indem du auf jede Größenkachel klickst, oder "Alle herunterladen" für eine einzelne ZIP verwenden.
  5. Füge die empfohlenen HTML-Tags unter den Vorschauen zu deinem <head> hinzu. Sie zeigen auf die generierten Dateien und enthalten die richtigen rel-Werte für jede Plattform.

Was das Werkzeug erstellt

Jede Ausgabegröße stammt aus einem separaten Verkleinerungsschritt deines Quellbildes. Wir zeichnen die Quelle auf einen Canvas, der genau auf die Zielabmessungen dimensioniert ist, unter Verwendung von ctx.drawImage mit imageSmoothingQuality = "high", was das bilineare oder bikubische Resampling des Browsers auslöst (engine-abhängig). Der resultierende Canvas wird über canvas.toBlob("image/png") exportiert und produziert sechs separate PNG-Dateien mit identischem Pixelinhalt bei ihren nativen Auflösungen.

Historisch verwendeten Favicons den Windows-ICO-Container (ein proprietäres Multi-Auflösungs-Bundle), der als favicon.ico bereitgestellt wurde. Moderne Browser akzeptieren PNG-Favicons direkt und bevorzugen sie sogar, also gibt das Werkzeug PNGs statt ICO-Dateien aus. Chromium-basierte Browser, Firefox und Safari respektieren alle <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> und wählen automatisch die richtige Größe. Für maximale Rückwärtskompatibilität mit Legacy-Browsern (IE11 und älter) kannst du immer noch eine favicon.ico im Domain-Stammverzeichnis neben den PNGs bereitstellen - der Browser verwendet, was er bevorzugt.

Wo jede Größe hingeht

  • 16x16 und 32x32 sind die klassischen Browser-Tab-Favicons. 32x32 wird auf Retina/HiDPI-Displays verwendet; 16x16 auf Standard-Dichte-Bildschirmen.
  • 48x48 ist das Windows-Site-Symbol, das im Startmenü und in einigen Taskleisten-Kontexten angezeigt wird, wenn Nutzer eine Web-App anpinnen.
  • 180x180 ist Apples Touch-Symbol, wenn iOS- und iPadOS-Nutzer deine Site zum Startbildschirm hinzufügen. Der iOS-Launcher rundet die Ecken automatisch ab.
  • 192x192 ist das Android-Chrome-Symbol für Startbildschirm-Verknüpfungen und wird im PWA-Web-App-Manifest (manifest.webmanifest) referenziert.
  • 512x512 ist das PWA-Splash-Screen-Asset, das beim App-Start auf Android angezeigt und für App-Store-Listing-Screenshots für PWAs verwendet wird.

Design-Fallstricke bei Favicon-Größen

  • Feine Details verschwinden bei 16x16. Ein Logo mit dünnen Strichen, einem Werbeslogan oder mehreren Elementen wird zu Brei. Mit der kleinsten Größe als Einschränkung gestalten: fett, zentriert, silhouettiert.
  • Verläufe und Schatten werden bei kleinen Größen trüb. Flache Farben werden sauber über alle Größen reproduziert; Verläufe aliasieren unvorhersehbar.
  • Transparente Hintergründe verhalten sich je nach Browser unterschiedlich. Chrome-Tabs sind weiß; Safari-Dunkel-Modus-Tabs sind dunkel; Edge-Designs variieren. Ein transparentes Favicon gegen mehrere Tab-Hintergründe testen oder einen festen Hintergrund verwenden, der zur Marke passt.
  • Apple Touch Icon sollte NICHT transparent sein. iOS setzt ein transparentes Apple-Touch-Symbol auf einen festen Hintergrund seiner Wahl zusammen, der oft mit einer Marke kollidiert. Einen festen Hintergrund speziell für 180x180 verwenden.
  • Mehrere PWA-maskierbare Varianten. Die PWA-Spezifikation definiert ein "maskierbares" Symbol mit einer Sicherheitszone in der mittleren 80 % des Bildes. Android kann dein 192x192 je nach Launcher in einen Kreis, Squircle oder Tropfen beschneiden. Mit 10 % Abstand um die Hauptform gestalten.

Warum es so viele Favicon-Größen gibt

Das Favicon begann 1999 als Microsoft-Innovation: eine favicon.ico im Domain-Stammverzeichnis ablegen und IE5 würde sie in der Adressleiste anzeigen. Das ICO-Container-Format bündelte mehrere Auflösungen in einer Datei, damit der Browser je nach UI-Kontext wählen konnte. Als Safari, Firefox und Chrome die Idee übernahmen, fügte jeder seine eigenen Größen und Konventionen hinzu. Apple fügte das 57x57 "Touch-Icon" für iOS-Startbildschirm-Verknüpfungen im Jahr 2007 hinzu (später für Retina auf 180x180 skaliert), Android fügte das 192x192-Manifest-Symbol in Chrome 39 (2014) hinzu, Windows-Kachel-Symbole durchliefen eine chaotische Geschichte von 128x128, 144x144 und 310x310, bevor sie sich einigten, und das PWA-Web-App-Manifest (W3C Working Draft, jetzt Candidate Recommendation) standardisierte die 192- und 512-Größen für installierbare Web-Apps. Heute ist das minimale praktikable Set 32x32, 180x180 und 512x512, aber der breitere Satz in diesem Werkzeug deckt jeden Kontext ab, dem du in 2026-Browsern begegnen wirst.

Vergleich mit dedizierten Diensten

Realfavicongenerator.net ist der gründlichste Favicon-Dienst im Web: er erstellt 20+ Größen einschließlich Windows-Kacheln, Safari-Pinned-Tab-SVG und plattformspezifische Manifest-JSON-Fragmente. Er rendert auch Vorschauen, wie das Favicon in der tatsächlichen Benutzeroberfläche jeder Plattform aussieht. Der Kompromiss ist, dass er dein Bild auf seine Server hochlädt, was wichtig ist, wenn das Logo noch unveröffentlicht ist. Dieses Werkzeug erstellt die sechs nützlichsten Größen lokal und deckt 99 % der realen Bedürfnisse mit null Datenschutzrisiko ab. Für Photoshop-native Workflows verarbeitet Photoshops "Exportieren als" mit mehreren Skalierungsfaktoren das direkt. Auf der CLI funktioniert ImageMagicks magick logo.png -resize 32x32 favicon-32x32.png wiederholt über alle Größen gut für Skriptverarbeitung. Dieses Werkzeug verwenden, wenn Privatsphäre wichtig ist und du die übliche Menge schnell möchtest; für erschöpfende Plattformabdeckung einschließlich Browser-Vorschau-Tests auf realfavicongenerator aufsteigen.

Häufig gestellte Fragen

Lädt das Werkzeug mein Logo auf einen Server hoch?

Nein. Jede Größe wird erstellt, indem das Quellbild auf einem lokalen Canvas in den Zielabmessungen gezeichnet und über <code>canvas.toBlob</code> exportiert wird. Weder das Quell- noch die generierten Größen werden irgendwo gesendet. Du kannst in den DevTools überprüfen, indem du das Netzwerkfenster während der Generierung leer bleiben siehst. Der ZIP-Download setzt die Dateien ebenfalls lokal zusammen.

Welche Quellbildgröße sollte ich hochladen?

Idealerweise 512x512 oder größer, und streng quadratisch. Alles unter 512x512 wird für die PWA-512-Größe hochskaliert, was das Bild weicher macht. 1024x1024 zu verwenden gibt einen Sicherheitspuffer, macht aber bei Größen 512 und kleiner keinen Unterschied. PNG mit Transparenz funktioniert am besten als Quelle, weil du die meiste Flexibilität hast, wenn der Browser das Symbol vor verschiedenen Hintergrundfarben platziert.

Sollte mein Quellogo Transparenz haben?

Bei den Browser-Tab-Favicons (16, 32, 48) ja - Transparenz lässt dein Symbol sich an helle und dunkle Tab-Hintergründe anpassen. Beim Apple Touch Icon (180x180) nein - iOS setzt transparente Apple-Touch-Icons auf einen Hintergrund seiner Wahl zusammen, was oft einen hässlichen Zusammenprall erzeugt. Die Ideallösung ist, separate Quelldateien für die Tab-Größen (transparent) und das Touch-Icon (fester Hintergrund) zu erstellen, aber für die meisten Marken funktioniert eine einzelne transparente Quelle akzeptabel.

Brauche ich alle sechs Größen?

Nein. Das moderne Minimum ist 32x32 (Browser-Tab), 180x180 (Apple Touch Icon) und 512x512 (PWA und Social Previews). 16x16 ist auf Nicht-Retina- Displays nützlich, 48x48 zielt auf Windows ab, und 192x192 ist die Android-Chrome-Startbildschirm-Verknüpfung. Wenn du keine PWA baust und dir keine spezifischen Betriebssystem-Icons wichtig sind, deckt 32 und 180 90 % der Nutzer ab.

Warum sieht mein 16x16-Favicon schrecklich aus?

Bilineares Verkleinern eines detaillierten Logos von 512x512 auf 16x16 verwirft fast alle Informationen. Die Lösung ist, eine spezifische 16x16-und-32x32-Variante deines Logos zu gestalten: einfacher, höherer Kontrast, oft ein fetterer Buchstabe oder ein einzelnes Motiv statt des vollständigen Wortzeichens. Die generierten kleinen Größen durch deine handgefertigten Versionen ersetzen, bevor du in die Produktion hochlädst.

Wie installiere ich die Favicons auf meiner Site?

Alle sechs PNGs in dein Domain-Stammverzeichnis kopieren (z.B. <code>/favicon-32x32.png</code>). Diese Tags zum HTML-Head hinzufügen: <code>&lt;link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"&gt;</code>, <code>&lt;link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png"&gt;</code>, und für PWAs die 192 und 512 in deiner <code>manifest.webmanifest</code> unter dem <code>icons</code>-Array referenzieren.

Benötige ich noch eine favicon.ico-Datei?

Für moderne Browser nein - PNG-Favicons werden universell unterstützt. Für IE11 und einige Legacy-Unternehmensbrowser ja. Das übliche Muster ist: PNG-Favicons über link-Tags für moderne Browser bereitstellen und eine einzelne <code>favicon.ico</code> im Domain-Stammverzeichnis als Fallback platzieren, das Legacy-Browser ohne HTML automatisch entdecken. ImageMagick kann aus deinen PNGs eine Multi-Auflösungs-ICO erstellen mit <code>magick favicon-16x16.png favicon-32x32.png favicon.ico</code>.

Was ist ein "maskierbares" Icon und brauche ich eines?

Maskierbare Icons sind eine PWA-Verfeinerung, die in der Web-App-Manifest- Spezifikation definiert ist: Android-Launcher schneiden dein Icon in verschiedene Formen (Kreis, Squircle, Tropfen, abgerundetes Quadrat) je nach Nutzerthema, sodass das Icon seinen wesentlichen Inhalt in der mittleren 80 % mit sicherem Abstand außen herum benötigt. Dieses Werkzeug erstellt Standardicons; für maskierbare Varianten 10-15 % Abstand um dein Logo hinzufügen, bevor du hochlädst. Den Manifest-Eintrag <code>"purpose": "maskable"</code> markieren.

Warum sieht mein PWA-Icon auf einem hochauflösenden Android verschwommen aus?

192x192 ist das, was Android für die meisten Launcher-Icons verwendet, aber auf einem 3x-Dichte-Telefon (viele Flaggschiffe) kann der Launcher 512x512 anfordern und nach unten skalieren. Das Werkzeug erstellt bereits 512x512, also beide in deinem Manifest referenzieren - Android wählt die beste Übereinstimmung. Wenn dein Quellbild ursprünglich kleiner als 512x512 war, wurde die 512-Ausgabe hochskaliert und wird egal was weich aussehen.

Wie unterscheidet sich das von realfavicongenerator.net?

Realfavicongenerator ist gründlicher - er erstellt Windows-Kachel-Größen, Safari-Pinned-Tab-SVG, Masken-SVG und plattformspezifisches HTML sowie Manifest-Fragmente mit Vorschauen, wie dein Icon in der tatsächlichen Benutzeroberfläche der jeweiligen Plattform aussieht. Er lädt dein Bild dafür hoch. Dieses Werkzeug erstellt die sechs Größen, die 99 % der echten Anwendungsfälle abdecken, vollständig lokal, in unter einer Sekunde. Dieses für schnelle private Generierung verwenden; realfavicongenerator, wenn du erschöpfende Plattformabdeckung und Live-Vorschauen möchtest.

Mehr Image Tools

Base64 to Image Converter

Decode a Base64 string or data URL back into a viewable image and download it as PNG, JPG, WebP or GIF. Runs in your browser.

Open tool

Image Blur & Pixelate

Apply blur or pixelation effects to images with adjustable intensity.

Open tool

Image Color Picker

Upload an image and pick colors in HEX, RGB, and HSL with a visual color history.

Open tool

Image Compressor

Compress images by adjusting quality to reduce file size without losing visual clarity.

Open tool

Image Cropper

Crop images with preset aspect ratios like 1:1, 16:9, and 4:3 using a visual editor.

Open tool

Image Flip & Rotate

Flip images horizontally or vertically and rotate by 90, 180, or 270 degrees.

Open tool