Favicon- und App-Icon-Generator
Erstellen Sie pixelgenaue Favicons, Apple-Touch-Icons, Android-Manifeste und Windows-Kacheln. Passen Sie Abstände und Hintergründe an und laden Sie Ihr komplettes Paket sofort als ein ZIP-Archiv herunter.
Branding Customization
PWA Manifest Metadata
Files to Generate
Upload a logo to view source metadata.
Funktionen des Favicon- und App-Icon-Generators
- Sofortige Größenänderung im Browser: Skalieren Sie Ihr Ausgangsbild direkt im Browser auf mehrere Standardformate. Keine Upload-Warteschlangen, keine Konvertierungszeiten.
- Alle wichtigen Geräteplattformen: Erzeugt Standard-Web-Favicons, Apple-Touch-Icons, Android-Manifest-Icongrößen und Microsoft-Kachelkonfigurationen in einem Arbeitsgang.
- ZIP-Download mit einem Klick: Kompiliert alle skalierten Bilder, die site.webmanifest- und browserconfig.xml-Dateien in einem ZIP-Archiv zum Download.
- 100 % clientseitige Privatsphäre: Alle Pixeloperationen, Canvas-Zeichnungen und die binäre Dateikompilierung laufen lokal. Ihre Markenassets werden nie an einen Server gesendet.
Warum Sie ein Favicon- und App-Icon-Set brauchen
Moderne Webentwicklung erfordert mehr als ein einzelnes 16x16-Icon. Browser, Mobilgeräte und Betriebssysteme suchen eigene Icons in bestimmten Größen, um sie in Tabs, Lesezeichenleisten, mobilen Startbildschirmen und Task-Managern anzuzeigen. Ein vollständiges Icon-Set sorgt für ein professionelles Markenbild Ihrer Website auf allen Plattformen, einschließlich iOS, Android und Windows.
Der site.webmanifest-Standard
Android-Geräte und Chrome-Browser nutzen das Web-App-Manifest (`site.webmanifest`), um festzulegen, wie sich Ihre Website verhält, wenn sie zum Startbildschirm eines Nutzers hinzugefügt wird. Das Manifest listet Pfadangaben für App-Icons in Standardauflösungen (192x192 und 512x512) und Konfigurationsdetails (etwa Name und Themefarben) und ermöglicht so Verhalten wie bei Progressive Web Apps (PWA).
Windows-Kacheln und browserconfig.xml: Microsoft-Windows-Systeme und Edge/IE-Browser nutzen Live-Kacheln, um ans Startmenü angeheftete Websites anzuzeigen. Das System liest `browserconfig.xml`, um die Speicherorte der Kachelbilder (etwa 150x150 Pixel) und die Hintergrundfarben zu ermitteln. Diese Konfiguration sorgt für eine saubere, native Integration in Windows-Plattformen.
Spezifikationen des Apple-Touch-Icons
Apple-iOS-Geräte nutzen ein bestimmtes hochauflösendes PNG-Icon (180x180 Pixel), um auf dem mobilen Startbildschirm gespeicherte Websites anzuzeigen. iOS legt eine Standardsystemmaske an, um das Icon mit abgerundeten Ecken zuzuschneiden. Empfohlen ist ein quadratisches, nicht transparentes Bild oder eine eigene Vollton-Hintergrundfarbe, um sichtbare Lücken im Layout zu vermeiden.
ICO-Dateiformate und Paketierung
Das `.ico`-Format ist ein Altbestand-Container von Microsoft, der mehrere Icon-Bilder in verschiedenen Auflösungen in einer Binärdatei bündelt. Standardbrowser nutzen `.ico`-Dateien, um ältere Anzeigen (16x16, 32x32) zu unterstützen. Dieses Tool kompiliert Ihre skalierten PNG-Bilder zu einer einzigen spezifikationskonformen ICO-Datei im Browser, ohne Ihre Daten an einen entfernten Server zu senden.
Leitfaden zur Einbindung in den HTML-<head>: Nach dem Herunterladen und Entpacken des Icon-ZIP legen Sie alle Dateien im Wurzelverzeichnis Ihrer Website ab. Fügen Sie anschließend die erzeugten HTML-<link>-Tags direkt in die <head>-Vorlage Ihrer Website ein. Damit erfahren Suchmaschinen-Crawler und Browser genau, wo jedes Icon zu finden ist – das verbessert SEO und Erscheinungsbild Ihrer Website.
Häufig gestellte Fragen
Das Paket erzeugt ein Standard-Favicon in 16x16 und 32x32, eine mehrstufige favicon.ico, ein Apple-Touch-Icon in 180x180, Android-Manifest-Icons in 192x192 und 512x512 sowie ein Windows-Kachelbild in 150x150. Damit sind alle modernen Anforderungen von Browsern, Mobilgeräten und Systemen abgedeckt.
Die webmanifest-Datei ist eine JSON-Konfiguration, die Google Chrome und Android-Geräte benötigen. Sie definiert Darstellung, Name, Themefarben und Icons Ihrer Web-App, wenn sie auf dem Startbildschirm angeheftet wird, und ermöglicht so ein natives App-ähnliches Erlebnis für PWAs.
Kopieren Sie den vom Generator bereitgestellten HTML-Code und fügen Sie ihn in den <head>-Tag Ihrer Startseite ein. Achten Sie darauf, dass die href-Attribute dem Verzeichnispfad entsprechen, in dem Sie die entpackten ZIP-Dateien auf Ihrem Server abgelegt haben.
Moderne Browser unterstützen zwar PNG-Favicons, dennoch ist eine klassische favicon.ico im Wurzelverzeichnis empfehlenswert. Sie dient als zuverlässiger Fallback für ältere Browser und Webcrawler, die das Icon standardmäßig unter /favicon.ico erwarten.
Apple-iOS-Geräte legen auf dem Startbildschirm eine Maske mit abgerundeten Ecken über Touch-Icons. Hat Ihr Bild einen transparenten Hintergrund, füllt das System die Transparenz mit Schwarz – das sieht schlecht aus. Eine Vollton-Hintergrundfüllung sorgt für ein professionelles Erscheinungsbild.
Ja. Das Tool unterstützt transparente PNGs und Vektor-SVGs vollständig. Sie können transparente Hintergründe beibehalten oder eine eigene Volltonfarbe hinter dem Logo wählen – ideal für die Formate iOS Safari und Android Chrome.
Nein. Der Favicon- und App-Icon-Generator arbeitet zu 100 % lokal in Ihrem Browser. Alle Größenanpassungen, Canvas-Renderings und die ZIP-Kompilierung erfolgen auf Ihrem Gerät. Wir übertragen oder speichern Ihre Dateien nicht – für absolute Privatsphäre und Offline-Sicherheit.