Icon Workshop1Lade dein Bild hoch
Erstelle aus sicheren SVG-Grafiken ICO- und PNG-Websymbole. Prüfe das gerasterte Ergebnis in kleinen Größen und exportiere das Paket lokal.
Ein Bild. Jeder Bildschirm.
SVG-zu-Favicon-Konverter
Kleine Icons. Ein bleibender Eindruck.
Erstelle aus sicheren SVG-Grafiken ICO- und PNG-Websymbole. Prüfe das gerasterte Ergebnis in kleinen Größen und exportiere das Paket lokal.
PNG ICO PWA
Erstelle dein Icon-Paket
Mach aus deinem Bild Favicons, App-Icons und mehr.
- 1Hochladen
- 2Anpassen
- 3Herunterladen
Bild hierher ziehen
SVG · Bis zu 5 MB
Dein Bild wird im Browser verarbeitet und verlässt nie dein Gerät.
Passe dein Icon an
Stimme den Look für jeden Bildschirm ab.
Im Kontext ansehen(Bild hochladen, um dein Icon zu sehen)
Browser-Tab
×
https://example.com
iOS-Startbildschirm
Dein Icon hier
PWA / Android
Dein Icon hier
So erstellst du ein Favicon in 3 Schritten
Von einem Bild zu einem vollständigen Icon-Satz.
2Anpassen und Vorschau prüfen
Wähle Bildanpassung, Hintergrund und Innenabstand. Prüfe das Ergebnis in kleinen Größen.
3Herunterladen und zur Website hinzufügen
Exportiere dein Icon-Paket, lade die Dateien auf deine Website und füge die Icon-Links ins HTML ein.
Ein Logo, bereit für jeden Bildschirm
Sieh nach, wofür die erzeugten Dateien verwendet werden.
Website-Favicon
Meine Website×16 × 1632 × 32Icons mit 16 × 16 und 32 × 32 helfen Besuchern, deine Website in Tabs und Lesezeichen zu erkennen.
iPhone & iPad
Meine Website180 × 180Verwende ein Apple-Touch-Icon mit 180 × 180, wenn deine Website zum Startbildschirm hinzugefügt wird.
PWA & Android
App installieren192 × 192512 × 512192 × 192 und 512 × 512 sind gängige Bildgrößen für Web-App-Manifeste.
Was steckt in deinem Icon-Paket?
Ein gebrauchsfertiges Set von Icons für alle Plattformen.
- favicon.ico16 × 16, 32 × 32, 48 × 48, 256 × 256
- apple-touch-icon.png180 × 180
- icon-192.png192 × 192
- icon-512.png512 × 512
- site.webmanifestWeb-App-Manifest
Icons zur Website hinzufügen
Füge diese Links im <head> deines HTML ein.
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">- Entpacke das Icon-Paket in public/ im Stamm deines Nuxt-Projekts. Behalte die Dateinamen bei und lege site.webmanifest neben favicon.ico ab, nicht in app/.
- Füge den Code im script-setup-Block von app/app.vue ein. Ersetze alte Icon-Links, erstelle den Build neu und veröffentliche dein Projekt.
useHead({
"link": [
{
"rel": "icon",
"type": "image/x-icon",
"href": "/favicon.ico"
},
{
"rel": "apple-touch-icon",
"sizes": "180x180",
"href": "/apple-touch-icon.png"
},
{
"rel": "manifest",
"href": "/site.webmanifest"
}
]
})Öffne /favicon.ico, /apple-touch-icon.png und /site.webmanifest auf deiner Website. Prüfe erfolgreiche Antworten und echte Bild- oder JSON-Inhalte. Status 200 mit einer HTML-Fehlerseite bedeutet ebenfalls einen falschen Pfad. Prüfe auch alle Icon-URLs im Manifest.
Bei alten Icons prüfe doppelte Links im head und lade mit deaktiviertem Browsercache neu. Prüfe gegebenenfalls CDN- und Service-Worker-Caches. Vergleiche die echten Vorschauen mit 16 und 32 Pixeln: Vereinfache kleine Schrift und dünne Linien, statt nur die große Vorschau zu beurteilen.
Diese Dateien liefern Icons und Manifest-Metadaten. Sie allein machen eine Website nicht zur installierbaren PWA. Das Beispiel gilt für die Domainwurzel; passe bei Unterverzeichnissen alle Links und Manifest-Icon-Pfade an.
SVG-zu-Favicon-Konverter
Erstelle aus sicheren SVG-Grafiken ICO- und PNG-Websymbole. Prüfe das gerasterte Ergebnis in kleinen Größen und exportiere das Paket lokal.
Sichere SVG-Pfade bleiben Vektoren. Raster- und Textbilder werden nicht vektorisiert.
SVG muss sichere, eigenständige Grafiken enthalten.
Jetzt gestaltenHäufige Fragen
Was ist ein Favicon?
Ein kleines Bild, das deine Website in Browser-Tabs und Lesezeichen darstellt.
Welches Bildformat soll ich verwenden?
PNG eignet sich für transparente Logos. Du kannst auch JPG, WebP und sichere SVG-Dateien verwenden.
Kann ich ein nicht-quadratisches Bild verwenden?
Ja. Wähle Einpassen, Zuschneiden oder Strecken, um ein quadratisches Icon zu erstellen.
Warum sind mehrere Icon-Größen enthalten?
Browser und Startbildschirme nutzen unterschiedliche Größen. Kleine Icons bleiben in Tabs scharf; große eignen sich für App-Verknüpfungen.