Ihre Favicon-Dateien
favicon.ico16, 32 und 48 px in einer Datei, für jeden Browser.favicon.svgBei jeder Größe scharf, für aktuelle Browser.favicon-16x16.png, favicon-32x32.png, favicon-48x48.pngDie kleinen Größen als PNG.apple-touch-icon.png180 × 180 px, für die Home-Bildschirme von iPhone und iPad.android-chrome-192x192.png, android-chrome-512x512.pngFür Android und installierte Web-Apps.site.webmanifestDer Website-Name und die Icons für Android.head-tags.htmlDie folgenden Tags zum Einfügen in den <head> der Seite.<link rel="icon" href="/favicon.ico" sizes="48x48"> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> <meta name="application-name" content="Acme Studio"> <!-- Erstellt mit Elfsight: https://de.elfsight.com/tools/favicon-generator/ -->
yoursite.com/favicon.ico das Symbol öffnet.<head> vor dem schließenden </head> ein.Bereiten Sie ein quadratisches PNG von mindestens 512 × 512 px vor.
WordPress 6.5 oder neuer: Gehen Sie zu Einstellungen → Allgemein und klicken Sie auf Website-Icon auswählen.
Ältere Versionen: Gehen Sie zu Design → Anpassen → Website-Identität und wählen Sie das Website-Icon.
Wählen Sie Ihr Bild aus und speichern Sie.
Ein eigenes Favicon braucht einen Premium-Tarif und eine verbundene Domain, und die Website muss veröffentlicht sein.
Gehen Sie in Ihrem Dashboard zu Einstellungen → Website-Einstellungen.
Klicken Sie unter Favicon auf Bild hochladen und wählen Sie Ihre Datei.
Speichern Sie Ihre Änderungen.
Gehen Sie in Ihrem Shopify-Admin zu Onlineshop → Themes und klicken Sie auf Theme bearbeiten.
Öffnen Sie die Theme-Einstellungen (Zahnradsymbol) und dann je nach Theme Logo oder Favicon.
Klicken Sie unter Favicon-Bild auf Bild auswählen und wählen Sie Ihre Datei.
Klicken Sie auf Speichern. Das Favicon wird in Ihrem Live-Shop angezeigt, nicht in der Vorschau des Theme-Editors.
Laden Sie die erzeugten Dateien in den Stammordner Ihrer Website hoch.
Fügen Sie die erzeugten <link>-Tags auf jeder Seite innerhalb von <head> ein, oder zumindest auf der Startseite.
Stellen Sie sicher, dass sich die Dateien in einem Browser öffnen lassen, zum Beispiel /favicon.ico.
Leeren Sie den Browser-Cache, um das neue Symbol zu sehen.
Google zeigt ein Favicon neben Ihrem Ergebnis nur an, wenn es es auf Ihrer Startseite finden und abrufen kann. Prüfen Sie diese Punkte aus der Favicon-Anleitung von Google:
Das Tag steht auf der Startseite. Google liest das Tag <link rel="icon"> im <head> Ihrer Startseite. Auch shortcut icon, apple-touch-icon und apple-touch-icon-precomposed funktionieren.
Es ist quadratisch. 1:1, mindestens 8 × 8 px. Google empfiehlt mehr als 48 × 48 px, damit es scharf aussieht.
Das Format wird unterstützt: ICO, PNG, GIF, JPEG, BMP, PPM oder TIFF. SVG steht nicht auf der Liste von Google, fügen Sie also neben einem SVG-Symbol ein ICO oder PNG hinzu.
Google kann es crawlen. Die robots.txt darf weder die Symboldatei (für Googlebot-Image) noch Ihre Startseite (für Googlebot) blockieren.
Die URL bleibt gleich. Ändern Sie die Favicon-Adresse nicht oft.
Ein Favicon pro Hostname. example.com und shop.example.com können unterschiedliche Symbole haben. example.com/shop nicht; es verwendet das Symbol der Website.
Es steht für Ihre Marke. Google ersetzt unpassende Symbole durch ein Standardsymbol.
Änderungen erscheinen, nachdem Google Ihre Startseite erneut gecrawlt hat, was Tage oder Wochen dauern kann. Sie können die Indexierung der Startseite im URL-Prüftool der Search Console anfordern. Manche Website-Baukästen sagen noch, die Größe müsse ein Vielfaches von 48 px sein. Das war die alte Regel von Google, und diese Größen funktionieren weiterhin problemlos.
Symbol gestalten
Verwenden Sie einen oder zwei Buchstaben oder ein Emoji, oder laden Sie ein quadratisches Logo hoch.
ZIP-Datei herunterladen
Sie enthält favicon.ico, PNG-Größen für Telefone, ein SVG, das Web-Manifest und die HTML-Tags.
Dateien hochladen
Legen Sie die Dateien in den Stammordner Ihrer Website und fügen Sie die Tags in den <head> ein. Website-Baukästen haben meist ein Favicon-Feld: Laden Sie dort das PNG mit 512 px hoch.