Favicon erstellen – in allen Größen, die eine Website braucht

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 Größe sollte ein Favicon haben?

Eine favicon.ico enthält 16 × 16, 32 × 32 und 48 × 48 Pixel; Apple-Geräte nutzen ein PNG mit 180 × 180, Android und Web-Apps 192 × 192 und 512 × 512. Google zeigt das Icon in den Suchergebnissen mit 48 × 48 oder einem Vielfachen davon – dafür gibt es hier zusätzlich ein PNG mit 96 × 96. Der Generator erstellt alle diese Dateien aus einem einzigen Bild.

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>.

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.

Wie viel Rand sollte das Logo haben?

Mit 10 % Rand füllt das Logo 80 % der Seitenlänge: 12,8 von 16 Pixeln im kleinsten Icon, 409,6 von 512 im größten. „Quadrat ausfüllen“ schneidet dagegen bei einem nicht quadratischen Bild den Überstand ab, damit keine leeren Streifen bleiben.

Was steht im site.webmanifest?

Der Name der Website und ein Kurzname mit höchstens 12 Zeichen – aus „Gartenglück Anna“ wird „Gartenglück“ –, die beiden Icons mit 192 und 512 px, die Hintergrundfarbe als theme_color und background_color (bei Weiß #ffffff) und display: standalone.

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.