Favicon Generator

Generate favicons in all sizes (16x16 to 512x512). Multi-format export (ICO, PNG, SVG).

Brand Kit Wizard

1
Logo
2
Colors
3
Favicon
4
Slogan
5
Website

91,284+ favicons generated and counting

Live Preview

512px
16px
32px
48px
180px
My Website

Download

Got your favicon? Build the website to match.

How It Works

1

Upload or Design

Upload an image or create a design from scratch with text and colors.

2

Preview All Sizes

See your favicon at 16x16, 32x32, 180x180, and 512x512 instantly.

3

Export & Use

Download as ICO, PNG, or SVG and add to your website in seconds.

Why Every Website Needs a Favicon

A favicon is the small icon displayed in browser tabs, bookmarks, and search results. It helps users quickly identify your site among dozens of open tabs and builds brand recognition.

Without a favicon, your site shows a generic browser icon, which looks unfinished and reduces trust. Adding one takes seconds and makes a lasting impression.

Supported Formats & Sizes

ICO

Classic format supported by all browsers. Includes multiple sizes in one file.

PNG

High-quality raster format. Perfect for modern browsers and Apple Touch icons.

SVG

Scalable vector format. Crisp at any size, ideal for retina displays.

Haeufig gestellte Fragen

Welche Groesse sollte ein Favicon haben?+
Die Standardgroessen sind 16x16 und 32x32 Pixel fuer Browser-Tabs, 180x180 fuer Apple Touch Icons und 512x512 fuer PWA-Manifeste. Unser Generator exportiert alle Groessen auf einmal, damit Sie keine verpassen.
Welches Dateiformat ist am besten fuer Favicons?+
ICO ist das universell kompatibelste Format, unterstuetzt von jedem Browser einschliesslich aelterer Internet-Explorer-Versionen. Fuer moderne Browser funktioniert PNG hervorragend und ist leichter. SVG ist ideal, wenn Sie eine einzelne Datei moechten, die perfekt auf jede Groesse skaliert und CSS-Media-Queries unterstuetzt.
Wie fuege ich ein Favicon zu meiner Website hinzu?+
Platzieren Sie die Favicon-Datei im Stammverzeichnis Ihrer Seite und fuegen Sie ein <link>-Tag in Ihrem HTML-<head> hinzu: <link rel="icon" href="/favicon.ico">. Fuer PNG verwenden Sie type="image/png". Fuer Apple Touch Icons verwenden Sie <link rel="apple-touch-icon" href="/apple-touch-icon.png">.
Kann ich einen transparenten Hintergrund verwenden?+
Ja. PNG- und SVG-Formate unterstuetzen Transparenz vollstaendig. ICO-Dateien koennen auch transparente Icons enthalten. Unser Generator bewahrt jede Transparenz in Ihrem hochgeladenen Bild, was grossartig fuer Logos und Icons auf verschiedenen Hintergruenden ist.
Muss ich mich anmelden, um dieses Tool zu nutzen?+
Nein. Dieser Favicon-Generator ist voellig kostenlos ohne Anmeldung. Generieren und laden Sie so viele Favicons herunter, wie Sie brauchen, ohne Wasserzeichen oder taegliche Limits.
Was ist der Unterschied zwischen favicon.ico und favicon.png?+
Favicon.ico ist ein Container-Format, das mehrere Bildgroessen (16x16, 32x32, 48x48) in einer einzelnen Datei enthalten kann. PNG ist ein Standard-Bildformat, das eine Groesse pro Datei enthaelt. Moderne Browser unterstuetzen beide, aber ICO wird fuer volle Kompatibilitaet mit aelteren Browsern benoetigt. Best Practice ist, beide einzubinden.
Wie erstelle ich ein Favicon fuer iOS (Apple Touch Icon)?+
iOS erfordert ein 180x180 PNG-Bild namens Apple Touch Icon. Fuegen Sie es mit <link rel="apple-touch-icon" href="/apple-touch-icon.png"> in Ihrem HTML-Head hinzu. Anders als regulaere Favicons sollten Apple Touch Icons keine Transparenz haben — iOS zeigt sie mit abgerundeten Ecken auf dem Homescreen an.
Koennen Favicons Dark Mode unterstuetzen?+
Ja, SVG-Favicons koennen sich an den Dark Mode anpassen, indem CSS-Media-Queries innerhalb der SVG-Datei verwendet werden. Sie koennen @media (prefers-color-scheme: dark) verwenden, um Fuellfarben zu aendern. PNG- und ICO-Favicons koennen sich nicht dynamisch aendern, waehlen Sie also Farben, die sowohl auf hellem als auch dunklem Browser-Chrome funktionieren.
Welche Favicon-Groessen braucht eine PWA?+
Progressive Web Apps benoetigen Icons mit mindestens 192x192 und 512x512 Pixeln, referenziert in Ihrem Web-App-Manifest (manifest.json). Diese werden fuer den Installations-Splashscreen, die App-Schublade und das Homescreen-Icon verwendet. Unser Generator exportiert beide Groessen einsatzbereit.
Funktionieren SVG-Favicons in allen Browsern?+
SVG-Favicons werden in Chrome, Firefox, Edge und Opera unterstuetzt. Safari hat Unterstuetzung ab Version 15+ hinzugefuegt. Fuer volle Browser-Abdeckung fuegen Sie ein Fallback-ICO- oder PNG-Favicon neben Ihrem SVG ein. Verwenden Sie <link rel="icon" href="/favicon.svg" type="image/svg+xml"> gefolgt von <link rel="icon" href="/favicon.ico">.

Favicon-Generator Vergleich

FunktionKleapFavicon.ioRealFaviconGeneratorCanva
PreisKostenlosKostenlosKostenlosKostenlos / 13$/Monat
Alle Groessen (16-512px)JaJaJaEingeschraenkt
SVG-ExportJaNeinNeinNur Pro
PWA-Manifest-IconsJaNeinJaNein
Dark-Mode-adaptivJa (SVG)NeinNeinNein
Website-Builder inklusiveJa (KI-gestuetzt)NeinNeinEinfach

Nutzer fragen auch

Ist ein Favicon dasselbe wie ein Logo?+
Nein. Ein Logo ist Ihr vollstaendiges Markenzeichen fuer Marketingmaterialien, waehrend ein Favicon ein winziges Icon (normalerweise 16x16 oder 32x32 Pixel) ist, das in Browser-Tabs und Lesezeichen angezeigt wird. Viele Marken vereinfachen ihr Logo zu einem Favicon — verwenden nur einen Anfangsbuchstaben, ein Symbol oder Icon, das in kleinen Groessen erkennbar bleibt.
Beeinflusst ein Favicon die SEO?+
Ein Favicon selbst ist kein direkter Ranking-Faktor, hilft aber indirekt bei SEO. Google zeigt Favicons in mobilen Suchergebnissen an, und ein erkennbares Icon erhoeht die Klickrate. Seiten ohne Favicons wirken weniger vertrauenswuerdig, was die Absprungrate erhoehen kann — ein Signal, das Suchmaschinen verfolgen.
Wie oft sollte ich mein Favicon aktualisieren?+
Aktualisieren Sie Ihr Favicon nur beim Rebranding oder einer wesentlichen Aenderung Ihrer visuellen Identitaet. Favicons werden von Browsern stark gecacht (manchmal wochenlang), sodass haeufige Aenderungen von wiederkehrenden Besuchern moeglicherweise nicht gesehen werden. Wenn Sie aktualisieren muessen, aendern Sie den Dateinamen oder fuegen Sie einen Versions-Querystring hinzu.
Kann ich ein Emoji als Favicon verwenden?+
Ja, mit SVG-Favicons koennen Sie ein Emoji direkt einbetten: <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>&#x1F680;</text></svg>">. Das ist grossartig fuer schnelle Prototypen, aber nicht fuer Produktionsseiten empfohlen, da es keine Markenerkennung bietet.
Warum wird mein Favicon nicht angezeigt?+
Die haeufigsten Gruende sind: falscher Dateipfad im Link-Tag, aggressives Browser-Caching (versuchen Sie einen harten Refresh mit Strg+Umschalt+R), das Favicon befindet sich nicht im Stammverzeichnis oder ein fehlender Content-Type-Header auf dem Server. Pruefen Sie auch, ob Ihre favicon.ico eine gueltige ICO-Datei ist und nicht nur eine umbenannte PNG.

Wie Sie ein Favicon zu Ihrer Website hinzufuegen

Ein Favicon hinzuzufuegen dauert nur wenige Minuten. Folgen Sie diesen vier Schritten, damit Ihr Icon in Browser-Tabs, Lesezeichen und mobilen Homescreens angezeigt wird.

Schritt 1: Generieren Sie Ihre Favicon-Dateien

Verwenden Sie den Kleap Favicon-Generator oben, um alle benoetigten Groessen zu erstellen. Laden Sie Ihr Logo oder Design hoch, sehen Sie eine Vorschau in verschiedenen Groessen und laden Sie das vollstaendige Favicon-Paket einschliesslich ICO, PNG und SVG herunter.

Schritt 2: Dateien im Stammverzeichnis platzieren

Laden Sie favicon.ico, favicon.png (32x32), apple-touch-icon.png (180x180) und Ihre 192x192 + 512x512 Icons in den Stammordner Ihrer Website hoch. Die meisten Browser suchen standardmaessig nach /favicon.ico.

Schritt 3: Link-Tags in Ihren HTML-Head einfuegen

Fuegen Sie diese Tags innerhalb von <head> hinzu: <link rel="icon" href="/favicon.ico" sizes="any">, <link rel="icon" href="/favicon.svg" type="image/svg+xml"> und <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Das deckt alle Browser und Geraete ab.

Schritt 4: Web-App-Manifest aktualisieren

Wenn Sie eine PWA haben oder Installations-Support moechten, fuegen Sie Icon-Eintraege zu Ihrer manifest.json hinzu: {"icons": [{"src": "/icon-192.png", "sizes": "192x192"}, {"src": "/icon-512.png", "sizes": "512x512"}]}. Das stellt sicher, dass Ihre App auf mobilen Homescreens und App-Schubladen grossartig aussieht.

Build your full website with AI

Got your favicon? Now create the website to go with it. Kleap builds professional sites in minutes.

Start Building Free

Related Free Tools

Business Name GeneratorColor Palette GeneratorSlogan Generator
Favicon Generator - Free Online Tool | Kleap