Kostenloser Favicon-Generator

Quelle

Schriftstärke

Stil

Form

Vorschau

16 px
32 px
48 px
180 px
192 px
512 px

Enthält favicon.ico (16, 32 und 48 px), PNGs in 16, 32, 180 (Apple), 192 und 512 (Android) sowie site.webmanifest.

Code zum Einfügen in den <head> Ihrer Website

<link rel="icon" href="/favicon.ico" sizes="any">
<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">

Legen Sie die Dateien aus dem ZIP im Stammverzeichnis Ihrer Website ab und fügen Sie dann diesen Code ein.

Alles wird in Ihrem Browser erzeugt: Ihr Logo wird nie hochgeladen.

Wie nutzt man diesen Rechner?

1. Wählen Sie eine Quelle: ein oder zwei Buchstaben (oder ein Emoji) oder Ihr Logo
2. Passen Sie Form, Farben und Innenabstand an und beobachten Sie die Vorschau
3. Laden Sie das ZIP-Paket mit allen Größen herunter
4. Legen Sie die Dateien im Stammverzeichnis Ihrer Website ab und fügen Sie den HTML-Code in den <head> ein

Kurze Antwort

Welche Favicon-Größen braucht man?

Planen Sie eine favicon.ico mit 16, 32 und 48 px für Browser, ein Apple Touch Icon mit 180 × 180 px für iPhone und iPad sowie PNGs mit 192 und 512 px für Android und installierbare Apps. Beispiel: Legen Sie das Paket ins Stammverzeichnis (ihreseite.de/favicon.ico) und fügen Sie die 5 Codezeilen in den <head> ein.

DateiGrößeVerwendet von
favicon.ico16, 32, 48 pxTabs, Lesezeichen, Google
favicon-32x32.png32 pxAktuelle Browser
apple-touch-icon.png180 pxiPhone, iPad
android-chrome-192x192.png (Icon)192 pxAndroid
android-chrome-512x512.png (Icon)512 pxStartbildschirm, PWA

Über den Favicon-Generator

Was ist das?

Der Favicon-Generator erstellt das kleine Symbol, das in Browser-Tabs, Lesezeichen und auf dem Startbildschirm von Smartphones erscheint. Gehen Sie von einer Initiale, einem Kürzel, einem Emoji oder Ihrem Logo aus, passen Sie Form und Farben an und laden Sie dann ein installationsfertiges Paket herunter.

Wozu dient es?

Eine Website ohne Favicon zeigt ein generisches Symbol: Das wirkt weniger professionell und ist zwischen Dutzenden Tabs schwer zu finden. Google zeigt das Favicon außerdem neben Ihrer Website in den mobilen Suchergebnissen an, was Aufmerksamkeit weckt und Vertrauen schafft.

Wie funktioniert es?

Jede Größe wird direkt in ihrer eigenen Auflösung gezeichnet (16, 32, 48, 180, 192 und 512 px), damit sie scharf bleibt, statt aus einem großen Bild verkleinert zu werden. Die Datei favicon.ico bündelt die Größen 16, 32 und 48 px als PNG-Bilder, ein Format, das jeder Browser erkennt. Das Apple-Icon ist immer ein deckendes Quadrat, weil iOS die Ecken selbst abrundet. Alles wird in Ihrem Browser berechnet.

Tipps zur Nutzung

  • Halten Sie es einfach: Bei 16 px sind ein oder zwei fette Buchstaben viel besser lesbar als ein detailliertes Logo
  • Wählen Sie einen starken Kontrast zwischen Text und Hintergrund, damit das Icon im hellen und dunklen Modus sichtbar bleibt
  • Gehen Sie bei einem Logo von einer quadratischen Version oder nur vom Symbol aus, ohne Markennamen
  • Leeren Sie den Cache oder testen Sie in einem privaten Fenster, wenn nach dem Livegang noch das alte Favicon erscheint
  • Google verlangt ein quadratisches Favicon von mindestens 48 px, erreichbar unter der im HTML-Code angegebenen Adresse
Dieses Tool auf Ihrer Website einbindenKostenlosKopieren Sie diesen Code in Ihre Website oder Ihren Blog: Das Tool erscheint direkt auf Ihrer Seite, kostenlos und ohne Anmeldung.Alle einbindbaren Tools

Ähnliche Tools