← Alle Beiträge

Favicon aus einem Bild erstellen (ICO + PNG, alle Größen)

2026-07-27

Kurz gesagt: Um ein Favicon aus einem Bild zu erstellen, öffnest du ToolKoalas Favicon-Generator, ziehst ein quadratisches Bild rein und lädst herunter. Du bekommst ein favicon.ico (mit 16, 32 und 48px) plus eigenständige PNGs in 16, 32, 48, 180, 192 und 512px, dazu einen fertigen HTML-<link>-Block zum Reinkopieren. Es ist kostenlos und läuft komplett im Browser — das Bild wird nie hochgeladen. Ich hab das in der Woche gebaut, in der ich die Nase voll hatte von Favicon-Seiten, bei denen man sich anmelden muss, um ein 16-Pixel-Icon herunterzuladen.

Warum du mehr als eine Favicon-Größe brauchst

Früher war ein Favicon ein einziges 16×16-.ico, und fertig. Heute nicht mehr. Verschiedene Stellen zeigen dein Icon in verschiedenen Größen:

  • 16 / 32 / 48px — das klassische Browser-Tab- und Lesezeichen-Icon. Die stecken alle in favicon.ico.
  • 180px — das Apple Touch Icon, gezeigt, wenn jemand deine Seite zum iPhone-Homescreen hinzufügt.
  • 192 / 512px — Android- und PWA-Icons, für Homescreen-Installation und den App-Switcher.

Lieferst du nur ein 16px-Icon, sieht deine Seite im Tab scharf aus, ist aber sofort verschwommen, sobald sie jemand aufs Handy speichert. Dieses Tool erzeugt das komplette Set aus einem Quellbild, damit du dir darüber keine Gedanken machen musst.

So erstellst du dein Favicon

  1. Öffne ToolKoalas Favicon-Generator und ziehe dein Bild rein.
  2. Es rendert sofort Vorschauen in jeder Größe — 16 bis 512 — damit du siehst, wie sich dein Icon in winzig schlägt.
  3. Lade herunter, was du brauchst:
    • favicon.ico — das Multi-Auflösungs-Icon (16 + 32 + 48) für den Browser-Tab.
    • Alle PNGs — ein Klick holt jede Größe als eigene PNG-Datei.
    • Oder klick auf eine einzelne Vorschau, um nur diese Größe herunterzuladen.
  4. Kopier das HTML-Snippet, das dir angezeigt wird, und füg es in den <head> deiner Seite ein.

Das Snippet ist bereits mit den richtigen rel-, type- und sizes-Attributen ausgefüllt:

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">

Leg die Dateien in dein Website-Stammverzeichnis (oder dahin, wo href zeigt), füg die Tags ein, und fertig.

Tipps für ein Icon, das bei 16 Pixeln noch funktioniert

  • Fang quadratisch und einfach an. Bei 16×16 ist nur Platz für eine kräftige Form oder einen einzelnen Buchstaben — nicht für dein komplettes Logo mit Slogan. Wenn dein Logo detailreich ist, mach eine abgespeckte "Icon-Marke" nur für diesen Zweck.
  • Füttere es mit einer großen Quelle. Lade mindestens 512px hoch, damit die großen PWA-Icons scharf bleiben; das Tool skaliert nur runter, es kann keine Details erfinden.
  • Hoher Kontrast gewinnt. Das Icon sitzt auf Browser-Chrome und Handy-Hintergründen, die du nicht kontrollierst. Starker Kontrast hält es überall sichtbar.
  • Die winzigen Vorschauen prüfen. Das Tool zeigt die 16- und 32px-Versionen pixelgenau — wenn es bei der Größe matschig wird, vereinfach die Grafik, bevor du sie einsetzt.

Ehrliche Grenzen

Das Tool zeichnet dein Bild in quadratische Canvases, ein nicht-quadratisches Quellbild wird also gestaucht — schneid es vorher zum Quadrat zu (probier Zuschneiden) für ein sauberes Ergebnis. Es fügt auch keine abgerundeten Ecken oder Padding hinzu — was du hochlädst, wird genau so skaliert. Und es erzeugt das moderne Standard-Set — falls du jede legacy Microsoft-Kachel und jedes Safari-Pinned-Tab-SVG unter der Sonne brauchst, deckt ein schwergewichtigerer Generator diese Randfälle ab. Für 99 % der Websites ist das ICO+PNG-Set hier genau das, was Browser tatsächlich verlangen.

Häufige Fragen

Wie erstelle ich ein Favicon aus einem Bild? Öffne einen browserbasierten Favicon-Generator wie ToolKoalas, zieh ein quadratisches Bild rein und lade das favicon.ico plus PNGs in jeder Größe herunter. Füg dann die mitgelieferten HTML-Tags in den <head> deiner Seite ein.

Welche Größen und Formate bekomme ich? Ein favicon.ico mit 16, 32 und 48px, plus eigenständige PNGs in 16, 32, 48, 180 (Apple Touch), 192 und 512px (Android/PWA).

Brauche ich noch eine .ico-Datei, oder reichen PNGs? Beides. favicon.ico ist am breitesten kompatibel für Browser-Tabs, während die größeren PNGs Apple Touch und Android/PWA-Homescreen-Icons abdecken. Dieses Tool gibt dir beides, damit du überall abgedeckt bist.

Wird mein Bild hochgeladen? Nein. Das Favicon wird im Browser per Canvas erzeugt — dein Bild verlässt dein Gerät nie.

Mein Quellbild ist nicht quadratisch. Sieht es trotzdem richtig aus? Ein nicht-quadratisches Bild wird in ein Quadrat gestreckt. Schneid es vorher auf ein 1:1-Verhältnis zu, für ein sauberes Icon.

— Milo 🐨