Utilia
Kategorien ▾
Sprache: de ▾

Favicon-Generator

favicon.ico, PNG-Icons, apple-touch-icon und site.webmanifest aus einem Bild oder Emoji erstellen, mit fertigen HTML-Tags. ZIP-Download, ohne Upload.

Quelle

Einpassung
site.webmanifest

So erstellen Sie ein Favicon

  1. Wählen Sie unter Quelle entweder Bild oder Text oder Emoji. - Bild: Ziehen Sie ein PNG, JPG, WebP oder SVG hinein. Am besten eignet sich ein quadratisches Logo mit mindestens 512 × 512 px. Wählen Sie Ganzes Bild, um es vollständig ins Icon einzupassen, oder Füllen und zuschneiden, um das Quadrat auszufüllen. - Text oder Emoji: Geben Sie einen Buchstaben, Initialen oder ein Emoji ein und wählen Sie Schriftart, Fett und Textfarbe.
  2. Legen Sie die Hintergrundfarbe fest oder aktivieren Sie Transparenter Hintergrund. Wählen Sie eine Form (Quadrat, Abgerundet oder Kreis) und einen Innenabstand (%), um Platz um den Inhalt zu lassen.
  3. Öffnen Sie bei Bedarf site.webmanifest, um App-Name (Web-Manifest), Kurzname, Designfarbe und die Ordner-URL der Icons einzutragen (lassen Sie /, wenn die Dateien ins Stammverzeichnis Ihrer Website kommen).
  4. Klicken Sie auf Favicons erzeugen. Die Icons erscheinen in echter Größe neben einem nachgebildeten Browser-Tab. Danach aktualisiert jede Änderung sie sofort.
  5. Klicken Sie auf ZIP herunterladen, laden Sie die Dateien auf Ihre Website hoch, klicken Sie dann auf Tags kopieren und fügen Sie sie in den <head> Ihrer Seiten ein.

Was steckt im ZIP?

Datei Größe Verwendet von
favicon.ico 16, 32 und 48 px Browser-Tabs, Lesezeichen, alte Browser, Windows
favicon-16x16.png 16 × 16 Browser-Tabs
favicon-32x32.png 32 × 32 Tabs auf hochauflösenden Bildschirmen, Taskleisten-Verknüpfungen
apple-touch-icon.png 180 × 180 Home-Bildschirm von iPhone und iPad
android-chrome-192x192.png 192 × 192 Android-Startbildschirm (Web-Manifest)
android-chrome-512x512.png 512 × 512 Startbildschirme bei der Installation (Web-Manifest)
site.webmanifest — Name, Farben und Icons einer installierbaren Website
favicon-tags.html — Die HTML-Tags zum Nachschlagen

Die ICO-Datei enthält drei PNG-Bilder – ein Format, das Windows (seit Vista) und alle aktuellen Browser lesen. Das apple-touch-icon wird immer auf einem deckenden Hintergrund gespeichert, weil iOS transparente Pixel schwarz darstellt; bei transparentem Hintergrund wird Weiß verwendet.

Die HTML-Tags

Die erzeugten Tags sehen so aus (mit Ihrer Ordner-URL):

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

Browser fragen /favicon.ico im Stammverzeichnis Ihrer Domain außerdem automatisch ab. Liegt die Datei dort, hilft das auch auf Seiten ohne die Tags.

Gestaltungstipps

  • Halten Sie es einfach. Bei 16 × 16 px verschwinden Details. Ein einzelner Buchstabe, ein kräftiges Symbol oder die einfachste Version Ihres Logos ist am besten lesbar.
  • Prüfen Sie die Vorschau in echter Größe. Das 16-px-Icon im nachgebildeten Tab ist das, was Besucher tatsächlich sehen.
  • Denken Sie an den Dunkelmodus. Ein dunkles Logo auf transparentem Hintergrund kann in dunklen Browser-Designs verschwinden; ein farbiger Hintergrund oder ein kleiner Innenabstand hilft.
  • Emojis sehen auf jedem System anders aus, weil jede Plattform Emojis im eigenen Stil zeichnet. Die PNG-Dateien behalten das Aussehen Ihres Geräts.

Häufige Fragen

Welche Größen braucht ein Favicon?

In der Praxis: eine favicon.ico mit 16, 32 und 48 px, ein apple-touch-icon mit 180 px und PNGs mit 192 und 512 px für das Web-Manifest. Dieses Tool erzeugt alle aus einer einzigen Quelle.

Kann ich ein SVG-Logo verwenden?

Ja. SVG-Dateien werden in hoher Auflösung gezeichnet, bevor die Icons entstehen. Das SVG wird als einfaches Bild dargestellt, seine Skripte werden also nie ausgeführt.

Wie erstelle ich ein Emoji-Favicon?

Wählen Sie Text oder Emoji, tippen oder fügen Sie das Emoji ein, wählen Sie einen Hintergrund oder lassen Sie ihn transparent, und erzeugen Sie die Icons. Das Ergebnis sind echte PNG- und ICO-Dateien, die in jedem Browser funktionieren.

Warum wird mein neues Favicon nicht angezeigt?

Browser speichern Favicons hartnäckig im Cache. Laden Sie die Seite mit geleertem Cache neu, öffnen Sie sie in einem privaten Fenster oder hängen Sie eine Version an die URL an, etwa /favicon.ico?v=2.

Wird mein Bild hochgeladen?

Nein. Icons, ZIP und Manifest werden in Ihrem Browser erstellt; nichts verlässt Ihr Gerät.

Ähnliche Tools