Favicon-Konverter

Laden Sie ein Bild hoch, um alle Favicon-Größen für Ihre Website zu generieren.

Klicken Sie oder ziehen Sie ein Bild hierher

Unterstützt PNG, JPG, SVG, WEBP

Ein-Klick-Generierung

Laden Sie ein Bild hoch, um alle Favicon-Größen zu generieren, einschließlich ICO-, PNG-, SVG- und anderen Formaten

Plattformübergreifend kompatibel

Unterstützt alle Browser und Geräte, einschließlich Icon-Anforderungen für iOS-, Android-, Windows- und andere Plattformen

Professionelle Qualität

Automatische Bildqualitätsoptimierung, generiert hochwertige Favicon-Dateien, die den Standards aller Plattformen entsprechen

Was ist ein Favicon?

Favicon (Abkürzung für favorite icon) ist ein kleines Icon, das in Browser-Tabs, Lesezeichen und anderen Interface-Elementen angezeigt wird. Es hilft Benutzern, Ihre Website schnell in mehreren geöffneten Tabs und Lesezeichen zu identifizieren.

Wie man Favicons verwendet

Um ein Favicon zu Ihrer Website hinzuzufügen, müssen Sie:

Verwenden Sie unser Konvertierungstool, um Bilder in ICO- und andere Formate zu konvertieren.
Entpacken Sie das heruntergeladene ZIP-Paket und platzieren Sie alle Dateien im Root-Verzeichnis Ihrer Website.
Fügen Sie den folgenden HTML-Code im <head>-Bereich Ihrer Website hinzu:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="manifest" href="/site.webmanifest">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/android-chrome-512x512.png" sizes="512x512">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">HTML

Best Practices

Einfach halten: Favicons sind sehr klein, komplexe Designs werden schwer erkennbar.
Markenkonsistenz: Verwenden Sie Ihr Logo oder ikonische Elemente, die Ihre Marke repräsentieren.
Verschiedene Hintergründe berücksichtigen: Stellen Sie sicher, dass Ihr Icon sowohl bei hellen als auch bei dunklen Browser-Themen klar sichtbar ist.
Mehrere Formate bereitstellen: Neben .ico bieten Sie auch .png- und .svg-Formate für moderne Browser-Kompatibilität an, genau wie unser Tool generiert.

Erklärung verschiedener Formate

ICO-Format (.ico)

Traditionelles Favicon-Format, kompatibel mit allen Browsern einschließlich älterer Versionen von Internet Explorer. Enthält normalerweise mehrere Größen (16x16, 32x32, 48x48).

PNG-Format (.png)

Bevorzugtes Format für moderne Browser, unterstützt transparente Hintergründe, kleine Dateigröße. 16x16 für Tabs, 32x32 für Taskleiste, 48x48 für Desktop-Verknüpfungen.

Android Chrome-Icons

192x192 und 512x512 für PWA (Progressive Web Apps) auf Android-Geräten, angezeigt wenn Benutzer die Website zum Startbildschirm hinzufügen.

Apple Touch-Icons

180x180 speziell für iOS-Geräte (iPhone, iPad) entwickelt, verwendet wenn Benutzer die Website zum Startbildschirm hinzufügen. Apple fügt automatisch abgerundete Ecken und Glanzeffekte hinzu.

Safari-fixiertes Tab-Icon

SVG-Format-Einfarben-Vektoricon für die Safari-Browser-fixierte Tab-Funktion, unterstützt benutzerdefinierte Farben.

SVG-Format (.svg)

Modernes Vektorformat, unbegrenzt skalierbar ohne Qualitätsverlust, unterstützt Dark-Mode-Anpassung, kleine Dateigröße, ist der Trend der Zukunft.