Welche Icons braucht eine Website oder App?
Jede Plattform verlangt ihr eigenes Icon in eigener Größe. Eine Website braucht favicon.ico, PNGs in 16 und 32 px und ein apple-touch-icon in 180 px für den iPhone-Homescreen. Eine PWA braucht Icons in 192 und 512 px, ein „Maskable“-Icon und ein Manifest. Eine iOS-App braucht ein 1024-px-Icon ohne Transparenz, eine Android-App Launcher-Icons in fünf Dichten.
Dieser Generator erstellt all das aus einem einzigen Bild, am besten einem SVG oder quadratischen PNG ab 512 px. Sie wählen Pakete, App-Namen, Hintergrundfarbe und Rand und laden ein geordnetes ZIP herunter: Web-Dateien im Stammverzeichnis, ein AppIcon.appiconset für Xcode und mipmap-Ordner für Android Studio.
Icons, die nicht transparent sein dürfen (Apple, iOS, Maskable, Google Play), erhalten Ihre Hintergrundfarbe. Dazu gibt es den HTML-Code für den <head>. Alles läuft im Browser. Mit ToolStudio Pro erstellen Sie Icons für mehrere Logos auf einmal.
So erstellen Sie Ihre App-Icons
- Ziehen Sie Ihr Logo (SVG oder quadratisches PNG) in das Werkzeug.
- Wählen Sie die Icons: Favicon, PWA, iOS und Android.
- Geben Sie den App-Namen ein, wählen Sie Hintergrundfarbe und Rand.
- Klicken Sie auf „Icons erstellen“ und laden Sie das ZIP herunter.
- Laden Sie die Web-Dateien ins Stammverzeichnis und fügen Sie den Code in <head> ein.
Wann Sie dieses Werkzeug nutzen
- Favicon und iPhone-Icon für eine neue Website.
- Eine Website mit Manifest und Icons als PWA installierbar machen.
- Das Icon einer iOS-App für Xcode vorbereiten.
- Android-Launcher-Icons in allen Dichten erzeugen.
Inhalt des ZIP
- Web: favicon.ico, favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png und favicon.svg bei SVG-Quelle.
- PWA: android-chrome-192x192.png, android-chrome-512x512.png, maskable-icon-512x512.png und site.webmanifest.
- iOS: ios/AppIcon.appiconset mit 1024-px-Icon und Contents.json (ab Xcode 14).
- Android: mipmap-mdpi bis mipmap-xxxhdpi mit ic_launcher und ic_launcher_round sowie das 512-px-Icon für Google Play.
- head-snippet.html mit den <link>- und <meta>-Tags.
Formate
- Eingabe: SVG, PNG, JPG, WebP, GIF, BMP, AVIF oder ICO.
- Ausgabe: ein ZIP mit PNG, ICO, JSON-Manifest und HTML-Code.
Häufig gestellte Fragen
Wird mein Logo hochgeladen?
Nein. Alle Icons werden in Ihrem Browser erstellt.
Wie groß sollte mein Bild sein?
Am besten ein SVG oder quadratisches PNG ab 512 px, oder 1024 px für das iOS-Icon.
Warum haben manche Icons einen Hintergrund?
Apple füllt Transparenz im apple-touch-icon schwarz, der App Store lehnt transparente iOS-Icons ab und Maskable-Icons müssen das Quadrat füllen. Diese Icons nutzen deshalb Ihre Hintergrundfarbe.
Was ist ein Maskable-Icon?
Ein PWA-Icon, das Android als Kreis oder andere Form zuschneiden kann. Das Werkzeug lässt einen Sicherheitsrand, damit das Logo nicht abgeschnitten wird.
Kann ich Icons für mehrere Logos erstellen?
Ja, mit ToolStudio Pro: Jedes Logo erhält einen eigenen Ordner im ZIP. Der kostenlose Test umfasst ein Logo.
Ist es kostenlos?
Kostenloser Test mit einem Logo. Für unbegrenzte Nutzung und Stapelverarbeitung kostet ToolStudio Pro 1,99 € im Monat.