Comment ajouter un favicon à votre site Framer : mode sombre, Apple Touch Icon et dépannage

Pour ajouter un favicon dans Framer : ouvrez les paramètres du site (⌘ + ,), descendez jusqu'à "Site Images" → "Favicon", téléversez un fichier PNG de 64x64 pixels, puis publiez votre site. C'est tout.

Voyons maintenant les détails et résolvons les éventuels problèmes que vous pourriez rencontrer.

Spécifications du favicon pour Framer

Framer exige des spécifications précises pour le favicon :

• Taille : 64 x 64 pixels
• Format : PNG (recommandé)
• Arrière-plan : Transparent

Étape 1 : Ouvrir les paramètres du site

Deux façons d'accéder aux paramètres :

• Raccourci clavier : Appuyez sur ⌘ + , (Mac) ou Ctrl + , (Windows)
• Menu : Cliquez sur l'icône Framer → Site Settings → Open Settings

Étape 2 : Trouver la section Favicon

• Descendez jusqu'à "Site Images"
• Repérez la zone de téléversement "Favicon"

Étape 3 : Téléverser votre favicon

Framer propose deux emplacements de téléversement :

• Favicon thème clair : S'affiche dans les navigateurs en mode clair
• Favicon thème sombre : S'affiche dans les navigateurs en mode sombre

Téléversez la même image dans les deux emplacements si vous n'avez qu'une seule version.

Étape 4 : Publier votre site

• Cliquez sur le bouton Publier
• Le favicon n'apparaît que sur le site en ligne, pas dans l'aperçu

Support du mode clair et sombre

Pourquoi utiliser deux versions ?

• Les logos sombres disparaissent sur les onglets de navigateur sombres
• Les logos clairs disparaissent sur les onglets de navigateur clairs
• Des versions séparées garantissent la visibilité dans tous les modes

Comment créer les deux versions

1. Partez de votre favicon habituel
2. Inversez les couleurs pour la version alternative
3. Conservez la même forme et le même design
4. Utilisez des arrière-plans transparents pour les deux versions

Configuration de l'Apple Touch Icon

Depuis septembre 2024, Framer prend en charge les Apple touch icons :

• Emplacement : Même section Site Images
• Taille : 180 x 180 pixels
• Utilité : Icône sur l'écran d'accueil des appareils iOS

Dépannage : le favicon ne s'affiche pas

Vérifiez les bases

• Avez-vous publié le site ?
• Actualisez la page : Cmd+Shift+R ou Ctrl+Shift+R
• Essayez une fenêtre de navigation privée

Vérifiez l'emplacement du téléversement

• Le favicon doit être dans les paramètres du site, pas dans les paramètres de page
• Le fichier doit être au format PNG valide

Dépannage : Google affiche l'ancien favicon

Google met à jour les favicons lentement (de quelques jours à quelques semaines).

Étapes pour accélérer la mise à jour

1. Assurez-vous que le favicon est en ligne sur votre site
2. Ouvrez Google Search Console
3. Utilisez l'outil d'inspection d'URL sur votre page d'accueil
4. Demandez l'indexation

Dépannage : problèmes avec Safari

Safari met les favicons en cache de manière agressive.

Étapes de résolution

1. Videz complètement le cache de Safari
2. Supprimez le cache des favicons : ~/Library/Safari/Favicon Cache/
3. Quittez et rouvrez Safari

Dépannage : le logo Framer apparaît toujours

Causes courantes :

• Le site n'a pas été publié après le téléversement du favicon
• Problème de cache du navigateur
• Vous consultez l'aperçu au lieu du site en ligne

Solution : publiez le site et videz le cache du navigateur.

Bonnes pratiques

• Sauvegardez vos fichiers : Conservez les fichiers originaux du favicon
• Testez partout : Vérifiez sur Mac, Windows, iOS et Android
• Utilisez des outils de vérification : Favicon.im valide votre configuration
• Documentez les couleurs : Notez les codes hexadécimaux exacts pour la cohérence de votre marque

FAQ

Comment ajouter un favicon dans Framer ?

Ouvrez les paramètres du site avec ⌘ + ,, descendez jusqu'à "Site Images", cliquez sur "Favicon", téléversez un fichier PNG de 64x64 pixels, puis publiez votre site.

Quelle taille doit avoir un favicon Framer ?

Framer recommande 64 x 64 pixels au format PNG avec un arrière-plan transparent.

Pourquoi mon favicon Framer ne s'affiche-t-il pas ?

Raisons les plus courantes : le site n'est pas publié, le cache du navigateur ou un mauvais emplacement de téléversement. Publiez votre site, actualisez la page ou essayez une fenêtre de navigation privée.

Combien de temps faut-il à Google pour mettre à jour un favicon ?

Google met à jour les favicons lentement — généralement de quelques jours à quelques semaines. Demandez une réindexation via Google Search Console pour accélérer le processus.

Framer prend-il en charge les favicons en mode sombre ?

Oui. Depuis septembre 2024, Framer vous permet de téléverser des favicons distincts pour les thèmes clair et sombre dans les paramètres Site Images.

Références

1. How to set up a favicon in Framer - Aide officielle de Framer
2. September 2024 Update: Apple Touch Icon and Favicons - Mises à jour Framer
3. Why isn't Safari displaying the favicon? - Dépannage Framer
4. Favicon.im - Outil de test et de validation des favicons