Apple-Touch-Icon-Generator

Erstellen Sie das 180×180 apple-touch-icon, das iOS für Startbildschirm-Lesezeichen verwendet — plus einen vollständigen Favicon-Satz — lokal in Ihrem Browser. Nichts wird hochgeladen.

Datenschutz zuerst: Jedes Bild wird lokal in Ihrem Browser verarbeitet. Nichts wird auf einen Server hochgeladen, gespeichert oder übertragen.

Das Icon, das iOS auf den Startbildschirm legt

Wenn jemand Ihre Website zum Startbildschirm seines iPhones oder iPads hinzufügt, sucht iOS nach einem 180×180 apple-touch-icon; ohne eines greift es auf einen unscharfen Screenshot zurück. Dieser Generator rendert genau diese Größe aus Ihrem Bild — mit einem einfarbigen Hintergrund, da apple-touch-icons nicht transparent sein sollten — und legt es dem Download neben der favicon.ico und den Android-Icons bei.

Ein Export, jede Plattform

Statt für jedes Gerät eine separate Datei von Hand zuzuschneiden, erzeugen Sie den ganzen Satz auf einmal: apple-touch-icon für iOS, 192- und 512px-PNGs für Android und PWAs sowie favicon.ico für Desktop-Browser, mit einem HTML-Schnipsel zum Einbinden. Alles läuft in Ihrem Browser, sodass Ihre Markengrafik Ihr Gerät nie verlässt.

Häufig gestellte Fragen

Wird mein Bild hochgeladen, um das Favicon zu erstellen?
Nein. Die favicon.ico, die PNG-Icons und das Manifest werden alle lokal in Ihrem Browser über die Canvas-API erzeugt. Ihr Bild verlässt Ihr Gerät nie.
Welche Größen und Dateien erhalte ich?
Eine favicon.ico mit mehreren Auflösungen (16, 32 und 48 px), PNG-Icons in 16, 32, 48, 180 (apple-touch-icon), 192 und 512 px, eine site.webmanifest und einen HTML-Schnipsel zum Einfügen in Ihren <head>.
Kann ich eine PNG oder SVG in eine ICO umwandeln?
Ja. Legen Sie eine PNG, JPG, SVG oder WebP ab und laden Sie eine echte favicon.ico herunter. SVG-Logos werden zuvor lokal in hoher Auflösung gerastert.
Welches Bild eignet sich am besten?
Ein quadratisches Bild mit einem einfachen, kontrastreichen Logo. Nicht-quadratische Bilder werden mittig zugeschnitten; verwenden Sie die Abstands- und Formregler, um es nach Wunsch zu rahmen.
Wie installiere ich das Favicon?
Entpacken Sie das Paket in das Stammverzeichnis Ihrer Website und fügen Sie den mitgelieferten HTML-Schnipsel in den <head> Ihrer Seiten ein. Die favicon.ico wird von den meisten Browsern automatisch erkannt.