Favicon-Generator
Kurze Antwort
Erstellt favicon.ico, Apple-Touch- und Web-App-Icons sowie die HTML-Tags aus einem Bild.
iOS zeigt transparente Bereiche des Apple-Touch-Icons schwarz an, daher erhalten diese beiden Icons einen einfarbigen Hintergrund. Die anderen Icons behalten die Transparenz.
Was es macht
Erstellt aus einem Bild einen vollständigen Favicon-Satz: favicon.ico mit 16, 32 und 48 px großen Icons, ein 180 px großes Apple-Touch-Icon, 192 und 512 px große Icons für das Web-App-Manifest, ein 512 px großes maskierbares Icon sowie die HTML-Tags zum Einfügen in Ihre Seiten. Ein hochgeladenes SVG wird ebenfalls als icon.svg mit aufgenommen.
Warum es wichtig ist
Browser zeigen das Favicon in Tabs und Lesezeichen, Smartphones verwenden das Touch-Icon auf dem Startbildschirm, und die Google-Suche kann das Favicon neben Ihren Seiten in den Ergebnissen anzeigen. Google zeigt es nur an, wenn das Icon quadratisch, mindestens 8×8 px groß ist (größer als 48×48 px wird empfohlen) und zusammen mit der Startseite crawlbar ist.
Wie es funktioniert
-
Ein quadratisches Bild wählen, idealerweise ein SVG oder ein PNG mit mindestens 512×512 px
-
Eine Hintergrundfarbe für das Apple-Touch-Icon und das maskierbare Icon wählen
-
Ihr Browser zeichnet jede Größe und packt die kleinen in favicon.ico
-
Die Dateien herunterladen, die HTML-Tags kopieren und das Ergebnis mit dem Favicon-Test prüfen
Beispiel-Ein- und Ausgabe
Bild: logo.svg Hintergrund: #ffffff
favicon.ico 16, 32, 48 px apple-touch-icon.png 180 px icon-192.png 192 px icon-512.png 512 px icon-512-maskable.png 512 px icon.svg Original-SVG manifest.webmanifest Manifest-Icons <link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="icon" href="/icon-192.png" type="image/png" sizes="192x192"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/manifest.webmanifest">
Wer es nutzt
-
Kleinunternehmer
Ein Logo in alle Icon-Dateien umwandeln, die eine neue Website benötigt.
-
Webentwickler
Den Icon-Satz und die Manifest-Icons für eine Progressive Web App erstellen.
-
Designer
Sehen, wie ein Logo bei 16 px aussieht, bevor es übergeben wird.
Häufig gestellte Fragen
Welche Dateien brauche ich?
Die meisten Websites verwenden favicon.ico, ein Apple-Touch-Icon sowie 192 und 512 px große Icons für das Web-App-Manifest. Ein SVG-Icon ist optional; Browser, die es unterstützen, können es in jeder Größe verwenden.
Warum enthält die ICO-Datei PNG-Bilder?
Das ICO-Format kann PNG-Bilder speichern, und jeder aktuelle Browser liest sie. Die Datei enthält Versionen in 16, 32 und 48 px, damit jeder Browser die passende Größe wählen kann.
Was ist ein maskierbares Icon?
Ein Icon mit zusätzlichem Freiraum um das Logo, damit Android es zu einem Kreis oder einer anderen Form zuschneiden kann. Das Tool hält das gesamte Bild innerhalb der Sicherheitszone, sodass nichts abgeschnitten wird.
Warum erhalten das Apple-Touch-Icon und das maskierbare Icon eine Hintergrundfarbe?
iOS zeigt transparente Bereiche des Touch-Icons schwarz an, und ein maskierbares Icon muss seine gesamte Form ausfüllen, daher erhalten beide die von Ihnen gewählte Farbe. Die anderen Icons behalten die Transparenz.
Wird mein Bild hochgeladen?
Nein. Die Icons werden in Ihrem Browser gezeichnet, und das Bild verlässt nie Ihr Gerät.