Favicon-Generator

Das kleine Symbol Ihrer Website in Browser-Tabs, bei Google und auf dem Startbildschirm von Handys. Aus Ihrem Logo oder Ihren Initialen, in wenigen Sekunden. Nichts wird gesendet: alles geschieht in Ihrem Browser.

Première fois ? Le déroulé, pas à pas
  1. Appuyez sur « Choisir mon logo », ou passez à l'onglet « Des initiales » et tapez vos lettres.
  2. Réglez la forme (« Carré », « Arrondi » ou « Rond »), la « Marge autour » et la couleur de fond en surveillant l'aperçu : onglet clair, onglet sombre, résultats Google et écran d'accueil.
  3. Remplissez « Nom du site (pour les téléphones) » : c'est le nom affiché sous l'icône sur l'écran d'accueil.
  4. Appuyez sur « Tout télécharger (.zip) », ou sur « Icône pour WordPress (512 px) » si votre site est sous WordPress.
Conseils
  • Fond transparent : l'icône de l'iPhone ne peut pas l'être, elle prend la « Couleur de fond » ; choisissez-la même si vous gardez la transparence.
  • Regardez l'aperçu sur l'onglet sombre : un logo foncé sur fond transparent s'y voit mal.
  • Wix, Squarespace, Shopify, Jimdo : l'image de 512 pixels du bouton « Icône pour WordPress (512 px) » suffit, à envoyer dans le réglage d'icône du service.
  • La nouvelle icône n'apparaît pas ? Les navigateurs gardent longtemps l'ancienne : vérifiez dans une fenêtre de navigation privée.
Form
Rand
6 %

Vorschau

Actualités
Météo

In den Google-Ergebnissen

https://votre-site.fr

Auf dem Startbildschirm

iPhone
Android

Ihr Logo bleibt auf Ihrem Gerät: die Symbole erstellt Ihr Browser, nichts wird gesendet oder gespeichert.

Symbole einrichten

Wie richte ich das Favicon in WordPress ein?
  1. Klicken Sie oben auf „Symbol für WordPress (512 px)“.
  2. Im Dashboard: Design › Customizer › Website-Informationen › Website-Icon (oder bei neueren Themes Einstellungen › Allgemein › Website-Icon).
  3. Bild wählen, dann Veröffentlichen. WordPress erstellt die übrigen Größen selbst: die .zip ist nicht nötig.
Wie richte ich es auf einer selbst gebauten Website (HTML, PHP) ein?
  1. Die .zip herunterladen und entpacken.
  2. Die Dateien ins Hauptverzeichnis der Website legen (neben die Startseite), per FTP oder mit dem Dateimanager Ihres Hosters.
  3. Den Code oben in den <head>-Bereich jeder Seite einfügen.
Und bei Wix, Squarespace, Shopify oder Jimdo?

Diese Dienste haben eine eigene Einstellung, meist „Favicon“ oder „Website-Symbol“ in den Website-Einstellungen. Laden Sie dort das 512-Pixel-Bild hoch (Schaltfläche „Symbol für WordPress“): es passt überall.

Gut zu wissen

Was tun, wenn mein Logo ganz klein unlesbar ist?
  • Im Tab ist das Symbol 16 Pixel groß: Text und feine Details verschwinden. Behalten Sie nur das Zeichen Ihres Logos, oder nehmen Sie Initialen.
  • Ein sehr breites Logo wird im Quadrat winzig: nutzen Sie seinen linken Teil (das Zeichen) oder den ersten Buchstaben.
  • Verringern Sie den Rand, damit das Motiv das Quadrat besser füllt.
Warum sehe ich mein neues Symbol nicht?

Browser behalten das alte Symbol lange im Speicher. Öffnen Sie Ihre Website zur Kontrolle in einem privaten Fenster. Bei Google kann die Änderung einige Tage bis Wochen dauern.

Wozu dienen all diese Dateien?
  • favicon.ico: Browser-Tab und Lesezeichen, überall lesbar, auch von alter Software.
  • icon.svg (wenn Ihr Logo ein SVG ist): ein in jeder Größe scharfes Symbol für aktuelle Browser.
  • apple-touch-icon.png: das Symbol, wenn jemand Ihre Website zum Startbildschirm eines iPhones oder iPads hinzufügt.
  • icon-192.png, icon-512.png, icon-maskable-512.png und site.webmanifest: dasselbe für Android, das das Symbol rund oder als abgerundetes Quadrat zuschneidet.
Welche Größe braucht ein Favicon?

Nicht eine Größe, sondern mehrere: 16, 32 und 48 Pixel in der Datei favicon.ico für Tabs und Lesezeichen, 180 Pixel für das iPhone, 192 und 512 Pixel für Android. Das Werkzeug erzeugt alle aus einem einzigen Bild; starten Sie mit einem quadratischen Logo von mindestens 512 Pixeln oder einem SVG.

Wird mein Logo an einen Server gesendet?

Nein. Die Symbole werden in Ihrem Browser auf Ihrem Gerät gezeichnet: Das gewählte Logo wird weder gesendet noch gespeichert.

Danach Ihre Website mit der kompletten Diagnose prüfen

Neu hier? Machen Sie den MinikursZuerst die wichtigsten Begriffe, dann das Werkzeug Schritt für Schritt, mit Bildschirmfotos und einem kleinen Quiz.
Anleitung