Multi-Size-ICO-Favicon direkt im Browser erzeugen

Was ein Favicon-ICO enthalten sollte

Klassische favicon.ico-Dateien bündeln mehrere Auflösungen, damit Tabs, Lesezeichen und Desktop-Shortcuts auf Retina-Displays scharf wirken. Nur ein unscharfes 16×16, das hochskaliert wird, wirkt veraltet.

WebP.Best bietet Pakete wie Favicon (16/32/48), Standard (plus 64) und Full (bis 256), damit du typische Browser- und Windows-Anforderungen abdeckst, ohne jede Größe von Hand zu exportieren.

• Browser-Tabs → kleinere Größen im Favicon-Paket
• Shortcuts / manche OS-Oberflächen → Standard oder Full
• Quellgrafik → möglichst klares quadratisches Logo oder Zeichen

Quellbild vorbereiten

Starte mit einem quadratischen oder fast quadratischen Master mit sauberen Kanten. Transparentes PNG oder WebP eignet sich gut. Volle, detailreiche Fotos werden bei 16 px schwach – zuerst vereinfachen oder auf das Zeichen zuschneiden.

Ist dein Logo nur ein breites Wortmarke, erwarte Letterboxing oder Beschnitt im Quadrat. Entscheide vorher, ob das Icon ein Symbol oder ein Monogramm sein soll.

Schritte auf WebP.Best

Öffne den Konverter auf der Startseite und füge deine Logo-Datei hinzu (PNG oder WebP mit Transparenz funktioniert am besten). Ausgabeformat: ICO.

Wähle ein Größenpaket: Favicon (16/32/48 px) für Browser-Tabs; Standard ergänzt 64 px für Shortcuts; Full geht bis 256 px für schärfere Windows-Icons. Du musst nicht jede Größe selbst exportieren – das Paket bündelt sie in einer .ico.

Lege fest, wie das Quadrat gefüllt wird: Fit inside zeigt das ganze Logo mit Rändern, wenn die Quelle nicht quadratisch ist; Fill and crop skaliert hoch und füllt das Quadrat, kann Kanten abschneiden – besser für einfache Symbole als für kleinen Text.

Konvertieren, .ico herunterladen, dann die kleinste Größe im Browser-Tab prüfen. Alles läuft lokal auf deinem Gerät.

Fit inside vs. Fill and crop: was passt?

Stell dir das Icon als quadratischen Rahmen vor. Fit inside verkleinert das Logo, bis alles hineinpasst – nichts wird abgeschnitten, aber bei breiten oder hohen Logos können Leerbänder entstehen.

Fill and crop zoomt, bis der Rahmen vollständig bedeckt ist, und schneidet Überstehendes ab. Gut bei einfachen Kreisen oder Buchstaben; riskant bei langen Wortmarken, die bei 16 px Buchstaben verlieren können.

Brauchst du vorher einen strikt quadratischen Master? Erweitere Erweiterte Optionen, wähle Exakte Breite × Höhe (z. B. 512×512), Fit inside oder Fill and crop, konvertiere einmal zu PNG und starte ICO mit dieser quadratischen Datei. Wenn die Standard-ICO-Pakete schon passen, kannst du diesen Schritt überspringen.

• Nur breite Wortmarke → Fit inside, oder zuerst ein quadratisches Symbol entwerfen
• Rundes App-Icon → Fill and crop wirkt oft sauberer
• Unsicher → zuerst Fit inside; nur bei störenden Rändern zu Fill and crop wechseln

ICO auf der Website einbinden

Lege favicon.ico ins Site-Root oder verlinke sie im HTML-Head mit passendem type. Viele Static Hosts akzeptieren auch PNG-Favicons; ICO bleibt für ältere Lesezeichen und manche Desktop-Kontexte nützlich.

Nach dem Deploy hart neu laden oder ein privates Fenster nutzen: Browser cachen Favicons aggressiv. Ein „falsches Icon“ nach dem Upload ist oft Cache, nicht eine defekte ICO.

Was das nicht leistet

Dieser Weg ist für statische Icons. Er ersetzt kein Branding, entfernt Hintergründe nicht automatisch und erzeugt kein SVG. Sehr feine Linien können bei 16 px verschwinden – die kleinste Größe testen.

Das Packen läuft lokal mit festen Größenpaketen. Für „Zum Home-Bildschirm“ auf dem Handy brauchst du ggf. separate PNG-Dateien – eine ICO allein reicht nicht immer.