Zum Inhalt springen
IconHub
Kostenloses Tool

Favicon- und App-Icon-Generator

Wähle ein Icon oder lade dein Logo hoch, bestimme Form und Farben und lade fertige Icon-Sets für deine Website, deine Chrome-Erweiterung und deine iOS- und Android-App herunter.

Noch kein IconSVG, PNG oder JPG hier ablegen
Mit einem Icon starten
Anderes Icon suchen
Form
Hintergrundfarbe
62%
Noch kein Icon

Für deine Plattform herunterladen

Alles entsteht in deinem Browser. Hochgeladene Dateien verlassen dein Gerät nicht.

8 DateienWebsiteEin Favicon für jeden Browser, das Apple Touch Icon und Installations-Icons mit Web-App-Manifest.
Dateien in diesem ZIP
  • favicon.ico
  • favicon.svg
  • apple-touch-icon.png
  • icon-192.png
  • icon-512.png
  • icon-maskable-512.png
  • site.webmanifest
5 DateienChrome-ErweiterungIcons für Symbolleiste und Store mit dem Rand, den der Chrome Web Store verlangt. Funktioniert auch für Edge und Firefox.
Dateien in diesem ZIP
  • icons/icon16.png
  • icons/icon32.png
  • icons/icon48.png
  • icons/icon128.png
5 DateieniOS-AppEin 1024-px-App-Icon für Xcode plus dunkle und getönte Versionen für iOS 18 und neuer.
Dateien in diesem ZIP
  • AppIcon.appiconset/AppIcon-1024.png
  • AppIcon-1024-dark.png
  • AppIcon-1024-tinted.png
  • Contents.json
25 DateienAndroid-AppEin adaptives Icon mit einfarbiger Ebene für Designs, Launcher-Icons für ältere Geräte und ein 512-px-Icon für den Play Store.
Dateien in diesem ZIP
  • res/mipmap-*/ic_launcher.png
  • ic_launcher_round.png
  • ic_launcher_foreground.png
  • ic_launcher_monochrome.png
  • mipmap-anydpi-v26/*.xml
  • playstore-icon.png

Website-Icons einbinden

Entpacke das Website-Set in das öffentliche Stammverzeichnis deiner Seite und füge diese vier Zeilen in den head deiner Seiten ein.

index.html · <head>
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Fragen

Welche Favicon-Dateien braucht eine Website?

Eine favicon.ico mit 16, 32 und 48 px für Browser und Suchergebnisse, ein SVG-Favicon für moderne Browser, ein Apple Touch Icon mit 180 px sowie Icons mit 192 und 512 px in einem Web-App-Manifest. Das Website-ZIP enthält alles davon plus das HTML zum Einfügen.

Warum füllen die iOS- und Android-Icons das ganze Quadrat?

Beide Systeme schneiden Icons in ihre eigene Form und erlauben keine transparenten Ecken. Der Generator füllt das Quadrat mit deiner Hintergrundfarbe und hält das Motiv im sicheren Bereich, damit nichts abgeschnitten wird.

Was ist ein Maskable Icon?

Android und einige Browser schneiden installierte Web-Apps als Kreis oder abgerundetes Quadrat zu. Das Maskable Icon hält das Motiv in den mittleren 80 % des Bildes, damit der Zuschnitt es nie beschneidet.

Kann ich mein eigenes Logo verwenden?

Ja. Lade ein SVG, PNG oder JPG hoch, es wird direkt in deinem Browser in alle Größen umgewandelt. Die Datei wird nicht an IconHub gesendet. Ein SVG oder ein PNG mit mindestens 512 px liefert das schärfste Ergebnis.

Darf ich die Icons in einer kommerziellen App nutzen?

Ja. IconHub-Icons sind für private und kommerzielle Nutzung mit Namensnennung („Icons by IconHub“) kostenlos. Was du hochlädst, bleibt deins.