Ein Bild. Jeder Bildschirm.

PNG-zu-ICO-Konverter

Kleine Icons. Ein bleibender Eindruck.

Wandle ein PNG in ein ICO mit mehreren Größen um. Transparenz bleibt erhalten; prüfe kleine Vorschauen und lade die Symbole lokal herunter.

PNG ICO PWA

Erstelle dein Icon-Paket

Mach aus deinem Bild Favicons, App-Icons und mehr.

1Hochladen
2Anpassen
3Herunterladen

Warten auf ein Bild

Bild hierher ziehen

PNG · Bis zu 5 MB

Dein Bild wird im Browser verarbeitet und verlässt nie dein Gerät.

16 × 16

32 × 32

48 × 48

180 × 180

192 × 192

512 × 512

Passe dein Icon an

Stimme den Look für jeden Bildschirm ab.

Bildanpassung

Hintergrund

Transparent

Einfarbig

#FFFFFF

Innenabstand6%

Eckenradius0%

ICO-Größen (Mehrfachauswahl möglich)

256

Maskierbare Symbole

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.

1Lade dein Bild hoch

Wandle ein PNG in ein ICO mit mehreren Größen um. Transparenz bleibt erhalten; prüfe kleine Vorschauen und lade die Symbole lokal herunter.

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 × 16

32 × 32

Icons mit 16 × 16 und 32 × 32 helfen Besuchern, deine Website in Tabs und Lesezeichen zu erkennen.

iPhone & iPad

Meine Website

180 × 180

Verwende ein Apple-Touch-Icon mit 180 × 180, wenn deine Website zum Startbildschirm hinzugefügt wird.

PWA & Android

App installieren

192 × 192

512 × 512

192 × 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.

Nuxt 4 · public/ · Nuxt 4 · useHead