Nouplo

Favicon erstellen

Ein Bild hinein – favicon.ico, Apple Touch Icon, Manifest-Icons und die Tags zum Einfügen heraus.

Dateien hier ablegen

oder klicken und vom Gerät auswählenUnterstützt: JPG, JPEG, PNG, WEBP, AVIF, GIF, BMP, HEIC, HEIF, SVG

Bis zu 3 Dateien pro VorgangBis zu 20 MB pro Datei10 Vorgänge pro TagLimits mit Pro aufheben✓ Funktioniert offline

Ihre Dateien bleiben auf Ihrem Gerät

Dieses Tool läuft vollständig in Ihrem Browser. Es wird nichts hochgeladen und nichts gespeichert. Sie können sogar die Internetverbindung trennen, bevor Sie beginnen.

So funktioniert es

  1. Fügen Sie Ihr Logo hinzu – am besten ein quadratisches SVG, sonst ein PNG oder JPG mit mindestens 512 × 512 px.
  2. Wählen Sie, wie es im Quadrat sitzt – ganz, mit optionalem Rand, oder das Quadrat ausfüllend – sowie Form und Hintergrund.
  3. Klicken Sie auf „Favicons erstellen“ und laden Sie alles zusammen als ZIP herunter.
  4. Legen Sie die Dateien ins Stammverzeichnis Ihrer Website und fügen Sie die Tags aus favicon-tags.html in den <head> Ihrer Seiten ein.

Häufige Fragen

Welche Dateien bekomme ich, und wofür ist jede?
favicon.ico enthält 16, 32 und 48 px in einer Datei, für Browser und Crawler, die direkt nach /favicon.ico fragen. favicon-96x96.png ist für die Suchergebnisse, wo Google ein Vielfaches von 48 px möchte. apple-touch-icon.png (180 px) ist das Symbol auf dem Home-Bildschirm von iPhone und iPad. Die beiden web-app-manifest-PNGs und site.webmanifest sind für Android und installierte Web-Apps. Aus einem SVG entsteht zusätzlich favicon.svg, und favicon-tags.html enthält die Zeilen für den <head>.
Ich habe einen transparenten Hintergrund gewählt. Warum ist das Apple Touch Icon nicht transparent?
Weil iOS auf dem Home-Bildschirm keine Transparenz zeigt: Es füllt transparente Pixel schwarz und rundet die Ecken selbst ab. Diese eine Datei ist deshalb immer ein volles, deckendes Quadrat – im gewählten Hintergrund oder in Weiß. Die übrigen Icons bleiben transparent.
Sollte ich von einem SVG oder einem PNG ausgehen?
Von einem SVG, wenn Sie eines haben. Jede Größe wird dann aus der Vektorgrafik gezeichnet, das 16-px-Icon also bei 16 px und nicht aus einer großen Bitmap verkleinert, und Sie erhalten zusätzlich favicon.svg, das moderne Browser bevorzugen. Ein PNG oder JPG sollte mindestens 512 × 512 px groß sein; ein detailreiches Logo übersteht 16 px so oder so kaum – dafür sind der Rand und ein einfacheres Zeichen da.
Warum zeigt Google eine Weltkugel statt meines Icons?
Google muss sowohl das Icon als auch die Startseite, die darauf verweist, crawlen können, und das Icon sollte quadratisch sein und eine Seitenlänge haben, die ein Vielfaches von 48 px ist – dafür ist die 96-px-Datei hier gedacht. Sind die Dateien online, kann es Tage bis Wochen dauern, bis die Suchergebnisse die Änderung übernehmen.
Wird mein Logo hochgeladen?
Nein. Jede Datei wird auf dieser Seite mit dem Canvas Ihres Browsers gezeichnet, und auch das ZIP wird hier zusammengestellt. Es wird nichts an einen Server gesendet.

Verwandte Tools