Bildwerkzeug

Erstelle alle wichtigen Website-Symbole aus einem Bild

Prüfe das Ergebnis, passe die Einpassung an und lade Symbole für Browser, Apple und installierbare Apps samt Einbindungsdateien herunter.

Keine Bild-Uploads
ICO, PNG und Webmanifest
Browser- und App-Vorschauen

Schritt 1 · Bild hinzufügen

Wähle das Bild, das deine Website oder App darstellen soll

Verwende möglichst ein quadratisches Bild. PNG, JPG, WebP, HEIC, HEIF und SVG werden unterstützt.

Das Bild bleibt auf diesem Gerät und wird beim Ersetzen oder Schließen der Seite freigegeben.

Du kannst auch ein Bild in diesen Bereich ziehen.

Paket konnte nicht erstellt werden{{ errorMessage }}

Schritt 2 · Symbole gestalten

Einmal anpassen und jedes Ziel prüfen

Quellbild

{{ source.file.name }} {{ t('editor.dimensions', { width: source.width, height: source.height }) }}

Dieses Bild ist kleiner als 512 × 512 Pixel. Große App-Symbole können unscharf wirken.

Erscheinungsbild

Wie soll das Bild eingepasst werden? Ganzes Bild zeigenBehält das vollständige Bild und zeigt den Hintergrund darum. Symbol ausfüllenFüllt das Quadrat und kann Bildränder abschneiden.

{{ t('editor.artworkSize', { value: artworkSize }) }} Symbolhintergrund {{ backgroundColor }} Favicon-Hintergrund transparent lassenApple- und App-Symbole verwenden weiterhin den gewählten Hintergrund. {{ t('editor.maskableSize', { value: maskableSafeArea }) }} Wichtige Bildteile gehören in die Markierung. Geräte können den Außenbereich kreisförmig oder anders zuschneiden.

Manifestdetails

Diese Werte werden in site.webmanifest geschrieben.

App-Name Kurzname Start-URL

Designfarbe {{ themeColorError }}

Anzeigemodus

Live-Vorschauen

Browser-Tab

Apple-Home-Bildschirm

Maskierbares App-Symbol

Schutzbereich

Paket konnte nicht erstellt werden{{ errorMessage }}

{{ statusMessage }}

{{ t('result.fileCount', { count: resultFiles.length }) }}

Symbolpaket ist fertig

Zehn erzeugte Dateien können jetzt zur Website hinzugefügt werden.

Paketdateien

{{ file.name }}{{ formatBytes(file.blob.size) }}

Füge dies in den <head> deiner Seite ein

Bild hier ablegen

Enthaltene Dateien

Ein kompaktes Paket für aktuelle Browser und Geräte

Browser-Symbole

favicon.ico enthält Bilder mit 16, 32 und 48 Pixeln sowie separate PNG-Dateien mit 16 und 32 Pixeln.

Apple-Touch-Symbol

Ein 180-Pixel-PNG mit deckendem Hintergrund ist für „Zum Home-Bildschirm“ vorbereitet.

Installierbare App-Symbole

Das Manifest verweist auf Standardsymbole mit 192 und 512 Pixeln sowie separate maskierbare Versionen für den Zuschnitt durch Geräte.