Favicon Webflow : comment ajouter un favicon et un webclip

Ajoutez un favicon et un webclip dans Webflow : où trouver le réglage Icônes, les tailles générées, la publication et que faire s'il ne se met pas à jour.

Questions fréquentes

Quelle taille de favicon faut-il pour Webflow ?

Le centre d'aide de Webflow indique un favicon de 32x32 et un webclip de 256x256. Dans le fonctionnement actuel, vous importez une seule image carrée et Webflow génère les autres tailles à votre place. Partez donc d'un fichier carré d'au moins 256x256 pixels, qui reste lisible une fois réduit.

Où importer un favicon dans Webflow ?

Ouvrez Site settings (Paramètres du site), allez dans General (Général) et repérez la section Icons (Icônes). Importez votre image carrée, choisissez les icônes à mettre à jour, appliquez la modification, puis publiez le site. Les anciens guides parlent de Project settings, mais c'est le même endroit.

Qu'est-ce qu'un webclip dans Webflow ?

Un webclip est l'icône plus grande utilisée lorsqu'un visiteur enregistre votre site sur l'écran d'accueil de son téléphone ou dans un raccourci similaire. Webflow l'indique en 256x256 pixels. Il est distinct de la petite icône affichée dans l'onglet du navigateur.

Pourquoi mon favicon Webflow ne s'affiche-t-il pas après l'import ?

La cause la plus fréquente est que le site n'a pas été publié après l'import : les icônes ne changent que sur le site publié. La deuxième est le cache du navigateur. Publiez, puis vérifiez dans une fenêtre de navigation privée ou un autre navigateur avant de conclure que l'import a échoué.

Webflow accepte-t-il les favicons SVG ou en mode sombre ?

Selon les notes de mise à jour de Webflow, vous pouvez importer des fichiers PNG, JPG, GIF, ICO ou SVG, et l'article d'aide mentionne une icône d'onglet facultative pour le mode sombre. Webflow convertit aussi les SVG en PNG pour garantir la compatibilité entre navigateurs : testez donc le résultat dans les navigateurs qui comptent pour vous.

Au bout de combien de temps Google affiche-t-il mon nouveau favicon Webflow ?

Il n'y a aucun délai garanti. C'est Google qui décide quand réexplorer le site et actualiser l'icône dans les résultats de recherche, et des témoignages de la communauté font état de plusieurs jours, voire de plusieurs semaines ou plus. Ce que vous maîtrisez, c'est que l'icône soit bien en ligne sur votre site publié.

En bref : dans Webflow, ouvrez Site settings > General > Icons, importez une image carrée, choisissez les icônes à mettre à jour (favicon clair, favicon facultatif pour le mode sombre, webclip), appliquez la modification, puis publiez le site. Webflow indique un favicon de 32x32 et un webclip de 256x256, et génère les autres tailles à partir de votre image. Rien ne change sur le site en ligne tant que vous n'avez pas publié. (Vérifié en novembre 2026 d'après le centre d'aide et les notes de mise à jour de Webflow.)

Ce que Webflow demande

Les anciens tutoriels décrivent deux champs d'import distincts, l'un pour un favicon de 32x32 et l'autre pour un webclip de 256x256. L'article d'aide actuel de Webflow décrit un fonctionnement plus simple : vous importez une seule image carrée et Webflow s'occupe des tailles. Voici à quoi sert chaque icône.

Icône	Taille indiquée par Webflow	Où elle s'affiche
Favicon (clair)	32x32	Onglets du navigateur et favoris
Favicon (mode sombre, facultatif)	32x32	Onglets lorsque le navigateur est en mode sombre
Webclip	256x256	Raccourcis sur l'écran d'accueil et liens enregistrés similaires
Versions générées automatiquement	favicon 48x48, icônes tactiles 180x180 et 192x192	Générées par Webflow à partir de votre image

Formats acceptés d'après les notes de mise à jour de Webflow : PNG, JPG, GIF, ICO et SVG. Les fichiers SVG sont convertis en PNG pour garantir la compatibilité entre navigateurs.

Pour un tour d'horizon plus complet des tailles selon les plateformes, consultez notre guide des tailles de favicon.

Préparez d'abord votre image

Un favicon s'affiche sur environ 16 à 32 pixels de large dans un onglet : l'image source compte donc plus que les réglages.

Partez d'un carré. Exportez un canevas carré de 256x256 ou plus, pour que le webclip ne soit pas agrandi.
Simplifiez. Utilisez un logotype réduit à un symbole ou à une seule lettre, pas un logo complet avec texte. Les détails fins deviennent illisibles à la taille d'un onglet.
Soignez le fond. Un PNG transparent rend bien sur un onglet clair, mais peut disparaître sur un onglet sombre. Si vous ajoutez un favicon pour le mode sombre, créez une version avec un symbole clair.
Choisissez un nom de fichier neutre. Le nom des fichiers importés peut se retrouver dans le HTML publié : évitez « final_v3_VRAI.png ».

Comment ajouter un favicon et un webclip dans Webflow

Ouvrez votre projet dans le Designer ou le tableau de bord Webflow, puis allez dans Site settings.
Sélectionnez l'onglet General et faites défiler jusqu'à Icons.
Cliquez sur Upload icon et choisissez votre image carrée.
Indiquez les icônes que l'image doit mettre à jour : le favicon, le favicon facultatif pour le mode sombre et le webclip.
Si vous voulez une icône différente pour le mode sombre, ajoutez-la dans l'emplacement dédié. Cette étape est facultative.
Cliquez sur Apply. Les intitulés de l'interface peuvent évoluer légèrement au fil des mises à jour de Webflow : repérez-vous aux libellés que vous voyez.
Publiez le site sur vos domaines. Enregistrer ne suffit pas à envoyer les icônes sur le site en ligne.
Ouvrez le site en ligne dans une fenêtre de navigation privée et vérifiez l'onglet.

Liste de contrôle à copier

`` [ ] Image source carrée, 256x256 ou plus [ ] Symbole assez simple pour rester lisible à la taille d'un onglet [ ] Testé sur un thème de navigateur clair et sur un thème sombre [ ] Importé via Site settings > General > Icons [ ] Modification appliquée (Apply) [ ] Publié sur le domaine en ligne (pas seulement sur le domaine de préproduction webflow.io) [ ] Vérifié dans une fenêtre de navigation privée [ ] Actualisation forcée ou cache vidé si l'ancienne icône persiste ``

Dépannage

Le favicon affiche toujours l'ancienne icône ou le logo Webflow

Procédez dans cet ordre :

Publiez de nouveau. Les icônes ne passent en ligne qu'avec une publication. Si vous publiez sur plusieurs domaines, incluez-les tous.
Testez dans une fenêtre de navigation privée. Les navigateurs mettent les favicons en cache de façon très agressive, et un onglet normal peut afficher l'ancienne icône pendant longtemps.
Forcez l'actualisation de la page, ou fermez puis rouvrez le navigateur.
Ouvrez le fichier directement. Vérifiez que l'URL de l'icône présente dans le code source de la page se charge dans son propre onglet.

L'import est refusé ou l'icône paraît déformée

Quelques discussions de la communauté signalent des erreurs de taille avec les anciens formulaires qui exigeaient des dimensions exactes. Si vous y êtes confronté, utilisez une image carrée et réessayez ; si le problème persiste, essayez un autre navigateur ou une fenêtre de navigation privée. Ce conseil vient de retours de forums, pas de la documentation de Webflow : considérez-le comme une solution de contournement.

Google affiche la mauvaise icône dans les résultats de recherche

L'icône affichée dans les résultats de recherche est contrôlée par Google, pas par Webflow. Des discussions de la communauté évoquent des mises à jour qui prennent des jours, des semaines, voire plus. Vérifiez que l'icône se charge bien sur votre site en ligne, puis patientez. Une icône carrée et stable, servie à une URL constante, aide.

L'icône est floue dans les onglets

C'est généralement le signe que l'image source contient trop de détails ou que sa résolution était trop faible dès le départ. Redessinez un symbole plus simple dans une taille plus grande, puis réimportez-le.

Quel format importer ?

Format	Idéal pour	Points de vigilance
PNG	La plupart des sites ; fiable et compatible avec la transparence	Doit avoir une résolution suffisante pour le webclip
SVG	Un visuel source net	Webflow le convertit en PNG : vérifiez le rendu
ICO	Les anciens flux de travail	Souvent inutile quand Webflow génère les tailles pour vous
JPG	Rarement un bon choix	Pas de transparence ; laisse un cadre de fond visible

En cas de doute, un PNG carré de 256x256 ou plus est le choix le plus sûr.

La place du favicon dans la préparation d'un lancement

Le favicon n'est qu'un petit élément d'une liste de contrôle de lancement, aux côtés des titres, des descriptions et des images pour les réseaux sociaux. Si vous comparez des plateformes avant de vous engager, nos pages comparatif Webflow et alternatives à Webflow détaillent les avantages et les limites de chacune, et le guide général pour changer de favicon vous sera utile si vous gérez des sites sur plusieurs plateformes.

Si vous préférez partir d'une mise en page toute prête, l'offre gratuite de We.Inc vous permet de publier jusqu'à trois sites à partir de modèles prêts à l'emploi ; le builder IA qui rédige un site à partir d'une simple description démarre avec l'offre Starter à $20 par mois. Vous pouvez vous inscrire ici.

Commencer gratuitement · Sans carte bancaire

Umair Ali Sadaqat

Fondateur de We.Inc

Umair est le fondateur de We.Inc. Il écrit sur la création de sites web avec l’IA, les agences et la gestion d’un studio web.

Prêt à créer quelque chose de grand ?

Rejoignez les 15,000+ entreprises qui utilisent We.Inc pour lancer, développer et automatiser, le tout depuis une seule plateforme.