Bild komprimieren
Verkleinere JPEG-, WebP- und PNG-Bilder direkt im Browser. Passe die Qualität an, entferne Metadaten und lade mehrere Ergebnisse einzeln oder als ZIP herunter.
Lokale VerarbeitungFavicon-Generator
Über dieses Tool
Erstelle aus einem quadratischen Logo im PNG- oder SVG-Format ein vollständiges Symbolpaket für deine Website. Das ZIP-Paket enthält PNG-Dateien in den Größen 16×16, 32×32, 180×180, 192×192 und 512×512 Pixel sowie eine favicon.ico-Datei mit mehreren Größen. Prüfe die Darstellung auf hellen und dunklen Hintergründen, bevor du das Paket herunterlädst.
Funktionen
- PNG-Symbole in mehreren Größen
- favicon.ico-Datei mit den gebräuchlichen Größen
- Empfohlene Größen für Apple Touch und PWA
- Vorschau auf hellen und dunklen Hintergründen
- Download als ZIP-Datei
Anleitung
- Logo hochladen: Verwende ein quadratisches Bild mit mindestens 512×512 Pixeln, damit die verkleinerten Symbole möglichst deutlich bleiben.
- Größen prüfen: Prüfe, ob das Logo auch bei 16 und 32 Pixeln noch gut erkennbar ist.
- ZIP-Datei herunterladen: Lege die Dateien im öffentlichen Verzeichnis deiner Website ab und verweise im HTML-Dokument sowie im Web-App-Manifest auf die entsprechenden Größen.
Beispiele
- Favicons für statische Websites mit Vite oder React erstellen
- PWA-Symbole und Web-App-Manifest nach einer Änderung der Marke aktualisieren
- Ein Apple-Touch-Symbol für iOS-Lesezeichen erzeugen
- Schnell ein vollständiges Symbolpaket ohne zusätzliche Befehlszeilentools erstellen
Einschränkungen
- Logos mit sehr vielen Details können bei 16×16 Pixeln unkenntlich werden; vereinfache das Motiv bei Bedarf
- SVG-Dateien werden für die Ausgabe in PNG- und favicon.ico-Dateien mit der ausgewählten Maximalgröße umgewandelt
- Das hochgeladene Logo wird direkt im Browser verarbeitet und nicht an einen Server gesendet.
FAQ
- Welche Größen sind enthalten?
- Das Paket enthält üblicherweise die Größen 16, 32, 48, 180, 192 und 512 Pixel sowie eine favicon.ico-Datei mit mehreren Größen.
- Wie sieht ein transparentes Logo auf einem dunklen Browser-Tab aus?
- Nutze die Vorschau auf dunklem Hintergrund. Bei kleinen Symbolen kann ein dezenter Hintergrund die Erkennbarkeit verbessern.
- Wie installiere ich die Symbole auf der Website?
- Lege die Dateien im Verzeichnis public/ ab und gib die entsprechenden Größen im HTML-Dokument und im Web-App-Manifest an.