So fügen Sie ein Favicon zu Ihrer Framer-Website hinzu

Um ein Favicon in Framer hinzuzufügen: Öffnen Sie die Website-Einstellungen (⌘ + ,), scrollen Sie zu „Site Images" → „Favicon", laden Sie eine 64x64 PNG-Datei hoch und veröffentlichen Sie Ihre Website. Das war's.

Lassen Sie uns nun die Details durchgehen und mögliche Probleme beheben.

Favicon-Spezifikationen für Framer

Framer erfordert bestimmte Favicon-Spezifikationen:

• Größe: 64 x 64 Pixel
• Format: PNG (empfohlen)
• Hintergrund: Transparent

Schritt 1: Website-Einstellungen öffnen

Zwei Möglichkeiten, die Einstellungen aufzurufen:

• Tastaturkürzel: Drücken Sie ⌘ + , (Mac) oder Ctrl + , (Windows)
• Menü: Klicken Sie auf das Framer-Symbol → Site Settings → Open Settings

Schritt 2: Favicon-Bereich finden

• Scrollen Sie nach unten zu „Site Images"
• Suchen Sie den Upload-Bereich „Favicon"

Schritt 3: Favicon hochladen

Framer bietet zwei Upload-Felder:

• Light Theme Favicon: Wird im hellen Modus des Browsers angezeigt
• Dark Theme Favicon: Wird im dunklen Modus des Browsers angezeigt

Laden Sie dasselbe Bild in beide Felder hoch, wenn Sie nur eine Version haben.

Schritt 4: Website veröffentlichen

• Klicken Sie auf den Publish-Button
• Das Favicon erscheint nur auf der Live-Website, nicht in der Vorschau

Hell- und Dunkelmodus-Unterstützung

Warum zwei Versionen verwenden?

• Dunkle Logos verschwinden auf dunklen Browser-Tabs
• Helle Logos verschwinden auf hellen Browser-Tabs
• Separate Versionen gewährleisten Sichtbarkeit in allen Modi

So erstellen Sie die Versionen

1. Beginnen Sie mit Ihrem regulären Favicon
2. Invertieren Sie die Farben für die alternative Version
3. Behalten Sie dieselbe Form und dasselbe Design bei
4. Verwenden Sie transparente Hintergründe für beide

Apple Touch Icon einrichten

Seit September 2024 unterstützt Framer Apple Touch Icons:

• Ort: Derselbe Bereich „Site Images"
• Größe: 180 x 180 Pixel
• Zweck: Startbildschirm-Symbol auf iOS-Geräten

Fehlerbehebung: Favicon wird nicht angezeigt

Grundlagen überprüfen

• Haben Sie die Website veröffentlicht?
• Erzwungene Aktualisierung: Cmd+Shift+R oder Ctrl+Shift+R
• Versuchen Sie ein Inkognito-Fenster

Upload-Ort überprüfen

• Muss in den Site Settings sein, nicht in den Seiteneinstellungen
• Datei muss ein gültiges PNG-Format haben

Fehlerbehebung: Google zeigt altes Favicon an

Google aktualisiert Favicons langsam (Tage bis Wochen).

Schritte zur Beschleunigung

1. Stellen Sie sicher, dass das Favicon auf Ihrer Website live ist
2. Öffnen Sie die Google Search Console
3. Verwenden Sie das URL-Inspektionstool für die Startseite
4. Fordern Sie eine Indexierung an

Fehlerbehebung: Safari-Probleme

Safari speichert Favicons sehr aggressiv im Cache.

Lösungsschritte

1. Safari-Cache vollständig leeren
2. Favicon-Cache löschen: ~/Library/Safari/Favicon Cache/
3. Safari beenden und neu starten

Fehlerbehebung: Framer-Logo erscheint noch

Häufige Ursachen:

• Website nach dem Favicon-Upload nicht veröffentlicht
• Browser-Cache-Problem
• Vorschau statt Live-Website angesehen

Lösung: Website veröffentlichen und Browser-Cache leeren.

Best Practices

• Dateien sichern: Bewahren Sie die Original-Favicon-Dateien auf
• Überall testen: Prüfen Sie auf Mac, Windows, iOS, Android
• Prüftools nutzen: Favicon.im validiert Ihr Setup
• Farben dokumentieren: Notieren Sie die genauen Hex-Codes für Markenkonsistenz

FAQ

Wie füge ich ein Favicon in Framer hinzu?

Öffnen Sie die Website-Einstellungen mit ⌘ + ,, scrollen Sie zu „Site Images", klicken Sie auf „Favicon", laden Sie eine 64x64 PNG-Datei hoch und veröffentlichen Sie Ihre Website.

Welche Größe sollte ein Framer-Favicon haben?

Framer empfiehlt 64 x 64 Pixel im PNG-Format mit transparentem Hintergrund.

Warum wird mein Framer-Favicon nicht angezeigt?

Häufigste Gründe: Website nicht veröffentlicht, Browser-Cache oder falscher Upload-Ort. Veröffentlichen Sie Ihre Website, erzwingen Sie eine Seitenaktualisierung oder versuchen Sie ein Inkognito-Fenster.

Wie lange braucht Google, um ein Favicon zu aktualisieren?

Google aktualisiert Favicons langsam – in der Regel Tage bis Wochen. Fordern Sie über die Google Search Console eine erneute Indexierung an, um den Prozess zu beschleunigen.

Unterstützt Framer Dunkelmodus-Favicons?

Ja. Seit September 2024 können Sie in Framer separate Favicons für helle und dunkle Themes in den Site-Images-Einstellungen hochladen.

Referenzen

1. How to set up a favicon in Framer - Offizielle Framer-Hilfe
2. September 2024 Update: Apple Touch Icon and Favicons - Framer Updates
3. Why isn't Safari displaying the favicon? - Framer Fehlerbehebung
4. Favicon.im - Favicon-Test- und Validierungstool