Brauche ich noch eine favicon.ico?

Moderne Browser lesen PNG, aber ICO wird von älteren Werkzeugen weiter unterstützt und hat einen Standardort im Stammverzeichnis, daher lohnt es sich.

Welches Bild soll ich hochladen?

Ein quadratisches mit einfacher Form. Details verschwinden bei 16 Pixeln, vereinfachen Sie ein Logo mit Schriftzug daher auf sein Zeichen.

Was ist mit Maskable-Icons?

Dieses Tool erstellt keine Maskable-Icons. Brauchen Sie sie, bereiten Sie eine Grafik mit sicherem Rand vor und ergänzen einen eigenen Manifest-Eintrag.

Warum lade ich die Dateien einzeln herunter?

Damit das Tool leicht bleibt und ohne zusätzliche Bibliotheken auskommt. Ein ZIP-Paket können wir ergänzen, wenn es gebraucht wird.

Kostenlose Online-Tools

Favicon- und Manifest-Generator

Laden Sie ein Logo oder eine Grafik hoch, und das Tool bereitet die Icon-Größen für Browser, iOS und Android vor, dazu eine favicon.ico, ein Manifest und fertigen HTML-Code.

Bild hochladen

PNG, JPG, WebP oder SVG. Das Bild verlässt Ihren Browser nicht.

Transparenter Hintergrund

Hintergrundfarbe

Rand: 0%

HTML für den Head-Bereich

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Web-App-Manifest (site.webmanifest)

{
  "name": "",
  "short_name": "",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Ihre Daten verlassen Ihren Browser nicht. Wir senden nichts an einen Server.

So verwenden Sie das Tool

Laden Sie ein quadratisches PNG, JPG, WebP oder SVG hoch, am besten mindestens 512 × 512 px.
Wählen Sie einen transparenten Hintergrund oder eine Farbe sowie einen Rand um das Logo.
Laden Sie die benötigten Dateien herunter und legen Sie sie im Stammverzeichnis der Website ab.
Fügen Sie den HTML-Code in den Head ein und passen Sie das Manifest an.

Welche Dateien entstehen

Sie erhalten PNG-Icons mit 16, 32 und 48 px für Browser, ein apple-touch-icon mit 180 px für iOS sowie Icons mit 192 und 512 px für Android und installierbare Web-Apps. Dazu eine favicon.ico mit den Größen 16, 32 und 48 px.

Hintergrund und Rand

iOS-Icons haben keine Transparenz, daher fügt das System bei transparentem Hintergrund Schwarz hinzu. Wählen Sie für das apple-touch-icon eine Hintergrundfarbe. Ein kleiner Rand hält das Logo bei abgerundeten Ecken von den Kanten fern.

Datenschutz der Dateien

Das Bild wird lokal in Ihrem Browser über ein Canvas-Element verarbeitet. Es wird nicht an einen Server hochgeladen, Sie können also Grafiken verwenden, die Sie noch nicht veröffentlicht haben.

Häufige Fragen

Brauchen Sie mehr als ein Werkzeug?

Steckt dahinter ein größeres Projekt, eine Webseite, ein Shop oder eine App, beschreiben Sie es in einem kurzen Briefing. Wir antworten konkret und unverbindlich.

Projekt beschreiben