Werkzeuge

Favicon-Generator

Mach aus deinem Logo oder ein paar Buchstaben alle Icons, die eine Website braucht: eine favicon.ico mit mehreren Größen, PNG-Icons für Browser, iPhone und Android und eine fertige site.webmanifest. Alles kommt in einer ZIP-Datei, zusammen mit dem HTML-Code zum Einfügen.

Ihre Bilder bleiben auf Ihrem Gerät. Die Verarbeitung erfolgt vollständig im Browser.

So funktioniert „Favicon-Generator“

  1. Lege dein Logo ab (PNG, JPG, WebP oder SVG) oder klicke auf „Aus Buchstaben oder Emoji erstellen“.
  2. Wähle, wie das Bild eingepasst wird, oder tippe die Buchstaben und wähle Form und Farben. Prüfe das Ergebnis in der Tab-Vorschau.
  3. Klicke auf „Favicons erstellen“, lade die ZIP herunter, lade die Dateien in das Hauptverzeichnis deiner Website hoch und füge den HTML-Code in den <head> ein.

Häufige Fragen

Welche Dateien sind in der ZIP?

favicon.ico (16, 32 und 48 px in einer Datei), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 px), android-chrome-192x192.png, android-chrome-512x512.png und site.webmanifest. Damit sind alle aktuellen Browser, der Home-Bildschirm von iPhone und iPad sowie Android abgedeckt.

Wohin kommen die Dateien?

Lade sie in das Hauptverzeichnis deiner Website (neben die index.html) und füge die kopierten <link>-Tags in den <head> deiner Seiten ein. Liegen die Dateien in einem Unterordner, passe die Pfade im Code und in der site.webmanifest an.

Welches Bild eignet sich am besten?

Ein quadratisches, schlichtes Logo mit transparentem Hintergrund und ohne kleine Schrift, denn feine Details verschwinden bei 16 px. Den Hintergrund entfernst du mit Hintergrund entfernen, quadratisch wird es mit Bild zuschneiden. Eine SVG liefert in jeder Größe das schärfste Ergebnis und lässt sich vorher mit SVG optimieren verkleinern.

Kann ich ein Emoji verwenden?

Ja. Wähle „Aus Buchstaben oder Emoji erstellen“ und tippe bis zu drei Zeichen, zum Beispiel deine Initialen oder ein einzelnes Emoji. Emojis werden mit der Emoji-Schrift deines Geräts gezeichnet und sehen daher unter Windows, macOS und Android etwas unterschiedlich aus.

Warum hat das iPhone-Icon einen gefüllten Hintergrund?

iOS zeigt transparente Bereiche von Home-Bildschirm-Icons schwarz an. Deshalb bekommt apple-touch-icon.png immer einen vollen, quadratischen Hintergrund: bei Buchstaben deine gewählte Farbe, bei Bildern Weiß. Die Ecken rundet iOS selbst ab.

Wird mein Bild hochgeladen?

Nein. Alle Icons werden in deinem Browser gezeichnet, dein Bild verlässt dein Gerät nicht.

Weitere Werkzeuge

Werkzeuge suchen