Zum Hauptinhalt springen
Bethemesh
Bilder & Grafiken

Favicon-Generator

Importiere ein quadratisches Bild: Das Tool erzeugt favicon.ico, PNG-Symbole von 16 bis 512 px, das Apple-Touch-Icon und die HTML-Tags zum Kopieren.

  • Zwischenablage
  • Export

Dieses Widget einbetten

Passe die Darstellung an, prüfe die Vorschau und kopiere anschließend den Code.

Vorschau

Art des Einbettungscodes

Zu kopierender Code

Responsive und automatisch von Bethemesh in der Größe angepasst.

Ihre Dateien werden lokal in Ihrem Browser verarbeitet und niemals an unsere Server gesendet.

Wähle möglichst ein quadratisches PNG-, JPEG- oder WebP-Bild mit maximal 25 MB.

Datei hier ablegen

Empfohlene Größe: bis zu 25 MB

Du brauchst mehr Möglichkeiten?

Nutze mehrere Bearbeitungswerkzeuge in einem Arbeitsbereich, deine geöffnete Datei und deine Änderungen kommen mit.

Vollständigen Editor öffnen

War dieses Werkzeug hilfreich?

Wie funktioniert dieses Tool?

Das Favicon ist das kleine Symbol im Browser-Tab, in den Lesezeichen, im Verlauf und auf dem Startbildschirm eines Smartphones. Jede Stelle erwartet eine bestimmte Größe, von 16 px im Tab bis 512 px für eine installierte Web-App. Dieser Generator erstellt aus einem einzigen Bild die Datei favicon.ico, PNG-Symbole von 16 bis 512 px und die HTML-Tags für den <head> deiner Website.

Importiere ein PNG-, JPEG- oder WebP-Bild mit höchstens 25 MB, am besten quadratisch und mindestens 512 × 512 px groß. Klicke auf Favicons erzeugen: Das Bild wird zuerst in PNG umgewandelt und dann auf sechs quadratische Größen verkleinert, 16, 32, 48, 180, 192 und 512 px.

Ein nicht quadratisches Bild wird ohne Verzerrung verkleinert und zentriert, die Ränder bleiben transparent. Die Dateien tragen die Namen, die Browser und Systeme erwarten: favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png (180 px), android-chrome-192x192.png und android-chrome-512x512.png.

favicon.ico fasst die Versionen mit 16, 32 und 48 px in einem ICO-Container zusammen, den alle aktuellen Browser und Windows lesen. Die empfohlenen HTML-Tags erscheinen mit der Schaltfläche Tags kopieren, und Dateien herunterladen speichert alle sieben Dateien auf deinem Gerät.

So verwenden Sie dieses Tool

  1. Logo importieren

    Wähle ein quadratisches Bild, am besten ein PNG mit transparentem oder einfarbigem Hintergrund.

  2. Favicons erzeugen

    Klicke auf Favicons erzeugen und prüfe die Vorschau jeder Größe, besonders 16 und 32 px.

  3. Auf der Website einbinden

    Lade die Dateien herunter, lege sie ins Stammverzeichnis der Website und füge die HTML-Tags in den <head> ein.

Anwendungsfälle

Neue Website veröffentlichen

Erzeuge aus dem Logo auf einmal alle Symbole einer Firmenwebsite.

Unscharfes Favicon ersetzen

Erstelle scharfe Größen aus einem hochaufgelösten Logo, statt ein altes 16-px-Symbol zu vergrößern.

Web-App vorbereiten

Erhalte die Symbole mit 192 und 512 px für das Manifest einer PWA.

Beispiele

Rechteckiges Logo mit 600 × 400 px

Bei 32 × 32 px wird das Logo mit dem Faktor 32 ÷ 600 ≈ 0,053 verkleinert und misst etwa 32 × 21 px, zentriert mit einem transparenten Streifen von gut 5 px oben und unten. Ein quadratisches Logo würde das ganze Symbol ausfüllen.

Eingabe

logo.png mit 600 × 400 px, transparenter Hintergrund

Ergebnis

7 Dateien: favicon.ico (16, 32, 48 px) und 6 quadratische PNGs von 16 bis 512 px

HTML-Tags zum Einfügen

Die Pfade beginnen mit /: Legst du die Dateien in einen Unterordner, passe die href-Werte entsprechend an.

Eingabe

Dateien im Stammverzeichnis der Website

Ergebnis

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">, danach die Links zu favicon-32x32.png, favicon-16x16.png, apple-touch-icon.png und den beiden Android-Symbolen

Tipps und bewährte Vorgehensweisen

  • Vereinfache das Logo für kleine Größen: Bei 16 px sind Text und feine Details nicht lesbar, nimm lieber ein Symbol oder einen Anfangsbuchstaben.
  • Verwende für das Apple-Symbol (180 px) eine Vorlage mit vollem Hintergrund: iOS füllt Transparenz und rundet die Ecken selbst ab.
  • Leere nach dem Veröffentlichen den Cache oder öffne ein privates Fenster: Browser behalten das alte Favicon lange.
  • Der Browser fragt eventuell, ob mehrere Dateien gleichzeitig heruntergeladen werden dürfen; erlaube es, um alle sieben Dateien zu erhalten.

Quellen und Referenzen

Häufig gestellte Fragen

Welche Größen werden erzeugt?

16, 32 und 48 px für Tabs und Verknüpfungen, 180 px für den iOS-Startbildschirm, 192 und 512 px für Android und installierte Web-Apps, dazu ein favicon.ico mit 16, 32 und 48 px.

Brauche ich noch ein favicon.ico?

Es ist weiterhin nützlich: Manche Browser, Feedreader und Tools rufen /favicon.ico direkt ab, ohne deine HTML-Tags zu lesen.

Mein Bild ist nicht quadratisch. Wird es verzerrt?

Nein. Es wird so verkleinert, dass es ganz ins Quadrat passt, und zentriert; leere Bereiche bleiben transparent. Schneide es vorher zu, wenn es das ganze Symbol füllen soll.

Erstellt das Tool die Datei site.webmanifest?

Nein. Es liefert die Symbole mit 192 und 512 px; trage sie im icons-Array des Manifests deiner Web-App ein.

Kann ich ein SVG-Favicon erhalten?

Nein, das Tool erzeugt Rastergrafiken als PNG und ICO. Liegt dein Logo als SVG vor, kannst du es zusätzlich mit <link rel="icon" type="image/svg+xml"> angeben.

Wird mein Logo auf einen Server hochgeladen?

Nein. Umwandlung, Verkleinerung und Erstellung der ICO-Datei finden in deinem Browser statt.

Verwandte Werkzeuge

Mit diesen Werkzeugen weitermachen

Werkzeuge, die diesem ähnlich sind oder es ergänzen.

Ähnliche Werkzeuge

Bild rund zuschneiden und Ecken abrunden

Schneide ein Foto kreisrund zu, runde seine Ecken ab und füge einen Rahmen hinzu – mit transparentem Hintergrund.

Bilder & GrafikenNeuDieses Werkzeug verwenden

Bildhintergrund transparent machen

Entferne einen weißen oder einfarbigen Hintergrund und erhalte ein transparentes PNG, ohne dein Bild hochzuladen.

Bilder & GrafikenNeuDieses Werkzeug verwenden

Bild zuschneiden

Ziehe einen Rahmen auf dem Bild auf, lege ein Seitenverhältnis fest (1:1, 4:5, 16:9 …) und lade den Ausschnitt herunter.

Bilder & GrafikenEmpfohlenDieses Werkzeug verwenden

Auch interessant