Text-Favicon-Icon-Generator
Empfohlen: 1-2 Zeichen für beste Ergebnisse
Text zu Icon
Geben Sie beliebigen Text ein, um professionelle Favicon-Icons mit verschiedenen Schriftarten und Stilen zu generieren
Anpassbare Stile
Reiche Anpassungsoptionen einschließlich Schriftart, Farbe, Hintergrundform und Hintergrundbild
Live-Vorschau
WYSIWYG-Live-Vorschau, passen Sie Parameter an und sehen Sie sofort die Ergebnisse
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 Tool, um Favicon-Pakete zu generieren und herunterzuladen.
- 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">
HTML
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, kleinere 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.