Favicon- und App-Icon-Generator (PNG, ICO, Manifest)
Macht aus einem Bild oder ein bis zwei Buchstaben einen kompletten Satz Favicons und App-Icons von 16 bis 512 px, mit ICO, apple-touch-icon und Manifest-Schnipsel, gespeichert als ZIP. Nichts verlässt Ihren Browser
Tool wird geladen…
Erstellt aus einem Logo oder aus ein bis zwei Buchstaben einen vollständigen Satz Favicons und App-Icons: alle Größen von 16 bis 512 px, eine favicon.ico, ein apple-touch-icon und ein Manifest in einem Download, für eine neue Website oder eine App auf dem Startbildschirm.
So geht’s
- Wählen Sie unter „Erstellen aus“ „Buchstaben“ oder „Bild“. Geben Sie unter „Buchstaben“ ein oder zwei Zeichen ein, oder legen Sie eine Bilddatei ab oder drücken Sie „Beispiel laden“.
- Passen Sie „Hintergrundform“, „Hintergrundfarbe“ und „Innenabstand“ an; die Vorschau wird sofort aktualisiert. Bei Bildern ist auch „Transparenter Hintergrund“ möglich.
- „Name der App oder Website“ und „Kurzname“ werden in site.webmanifest geschrieben. Für Android schalten Sie „Auch maskierbare Icons erstellen“ ein.
- Drücken Sie „Als ZIP speichern“, laden Sie die Dateien ins Stammverzeichnis Ihrer Website und kopieren Sie den „HTML-head-Schnipsel“ in das head-Element.
So wird gerechnet
- Zuerst wird ein 512-px-Original gezeichnet und schrittweise halbiert, bis die PNGs mit 16, 32, 48, 180, 192 und 512 px entstehen; so bleiben feine Linien auch in kleinen Größen scharf.
- favicon.ico enthält die PNGs mit 16, 32 und 48 px im ICO-Container; aktuelle Browser lesen PNG-Daten in einer ICO direkt.
- Ein maskierbares Icon hält seinen Inhalt in der mittleren sicheren Zone von 80 %, damit Android es zu einem Kreis oder abgerundeten Quadrat zuschneiden kann, ohne etwas abzuschneiden.
- Bilder und Text werden nur in diesem Browser verarbeitet und nie hochgeladen. Die Einstellungen bleiben für den nächsten Besuch in diesem Browser gespeichert.
Häufige Fragen
- Wie groß sollte ein Favicon sein?
- Browser-Tabs verwenden 16 und 32 px, Verknüpfungen 48 px, der iPhone-Startbildschirm 180 px, Android- oder PWA-Installationen 192 und 512 px. Diese Seite erstellt alle sechs auf einmal.
- Brauche ich noch eine .ico-Datei?
- Sie hilft älteren Browsern und Clients, die /favicon.ico automatisch anfordern. PNG-Links sind ebenfalls enthalten, daher bevorzugen aktuelle Browser die PNG-Dateien.
- Welche Schrift wird für Buchstaben-Icons verwendet?
- Eine auf Ihrem Gerät installierte Systemschrift aus der gewählten Familie. Ein anderes Gerät kann dieselbe Familie mit einer anderen Schrift darstellen.
- Kann das Icon einen transparenten Hintergrund haben?
- Bei Bildern ja: Schalten Sie „Transparenter Hintergrund“ ein, dann bleibt der PNG-Hintergrund leer. Buchstaben-Icons haben immer eine Hintergrundfarbe.