Favicon pour Webflow

Le téléchargement de favicon de Webflow fait partie du panneau Paramètres du projet, qui est distinct du canevas Designer. Cliquez sur le nom du projet dans le tableau de bord Webflow, puis accédez à Paramètres du projet > Général. Faites défiler jusqu'à la section Favicon & App Icon, cliquez sur la zone de téléchargement et choisissez votre fichier image. Webflow accepte les formats PNG, ICO et GIF.

Un PNG de 32 × 32 pixels est la taille minimale requise pour le téléchargeur de favicon de Webflow, mais à partir de 512 × 512 produit un résultat beaucoup plus net. Webflow sous-échantillonne votre image pour l'affichage des onglets et toutes les variantes générées par CDN. Fournissez toujours la plus grande source propre dont vous disposez : le générateur facilite la création d’un PNG 512×512 à partir de n’importe quel logo.

Webflow héberge le favicon sur son propre CDN avec une URL générée automatiquement (généralement au format uploads-ssl.webflow.com/...). Vous n'avez pas besoin de fournir manuellement un chemin CDN. Après le téléchargement, cliquez sur Enregistrer puis sur Publier votre projet. Le favicon est injecté lors de la publication, pas seulement lors de la sauvegarde : les modifications non publiées ne sont pas visibles sur votre domaine en direct.

Les arrière-plans transparents fonctionnent correctement avec les téléchargements de favicon Webflow. Le CDN préserve les canaux alpha PNG, de sorte qu'une icône en arrière-plan transparent s'affiche proprement par rapport aux thèmes du navigateur en mode sombre. Si votre logo a un arrière-plan uni blanc ou coloré, il apparaîtra sous la forme d'un carré dans les onglets du navigateur. Exportez votre logo sans remplissage d’arrière-plan avant de le télécharger.

Le téléchargeur de favicon intégré de Webflow ne prend pas en charge les fichiers SVG. Si vous souhaitez un favicon vectoriel SVG pour un rendu net à n'importe quelle échelle et une prise en charge du mode sombre, ajoutez-le via une injection de code personnalisé. Accédez à Paramètres du projet > Code personnalisé > Code principal et ajoutez : `<link rel='icon' type='image/svg+xml' href='https://yourdomain.com/favicon.svg'>`. Hébergez le fichier SVG sur votre propre serveur ou sur un service CDN.

L'ajout d'un apple-touch-icon pour les installations sur l'écran d'accueil iOS nécessite également un code personnalisé dans Webflow, car le téléchargeur intégré ne gère que le favicon standard. Téléchargez votre 180×180 apple-touch-icon.png sur un hôte de fichier (ou Webflow Assets si votre plan le prend en charge), puis injectez `<link rel='apple-touch-icon' size='180x180' href='URL_TO_YOUR_FILE'>` dans le champ Paramètres du projet > Code personnalisé > Code principal.

La prise en charge des icônes PWA de Webflow est limitée par rapport aux frameworks comme Next.js. Il n’existe pas de générateur de manifeste Web natif dans Webflow. Pour une prise en charge complète de l'installation de PWA, créez manuellement un fichier JSON site.webmanifest, hébergez-le en externe et injectez la balise de lien manifeste via un code personnalisé. Incluez les entrées 192 × 192 et 512 × 512 PNG dans le tableau des icônes du manifeste.

Si vous créez un site Webflow pour un client, le favicon est souvent défini tard dans le projet puis oublié. Un processus utile consiste à définir une favicon d'espace réservé au début du projet et à la remplacer avant le transfert. Webflow ne gère pas l'historique des favicon — une fois que vous enregistrez un nouveau favicon, l'ancien disparaît des paramètres du projet, bien qu'il puisse rester accessible via son URL CDN pendant un certain temps.

Les sites Webflow multi-domaines – où le même projet est publié sur plusieurs domaines personnalisés – partagent une seule favicon Paramètres du projet. Il n'y a pas de remplacement de favicon par domaine dans Webflow natif. La même icône apparaît sur tous les domaines publiés. Si vous avez besoin d'icônes par domaine, utilisez l'injection de code personnalisé pour remplacer la balise de lien d'icône de manière conditionnelle (cela nécessite un CMS Webflow ou une logique personnalisée).

Les mises à jour des favicon dans Webflow peuvent prendre du temps à se propager en raison de la mise en cache CDN. Après la publication d'un nouveau favicon, l'ancien peut apparaître dans les navigateurs pendant 24 à 48 heures. Ouvrez votre site en direct dans une fenêtre privée/incognito pour voir l'icône mise à jour sans interférence du cache du navigateur local. Si votre audience utilise des pages mises en cache CDN, le délai de propagation dépend des paramètres CDN TTL de Webflow.

Pour les utilisateurs de Webflow Editor (clients modifiant du contenu sans accès Designer), le favicon ne peut pas être modifié via l'éditeur : il est verrouillé dans les paramètres du projet. Seuls les collaborateurs disposant d'un accès Designer ou les propriétaires de compte peuvent mettre à jour le favicon. Communiquez-le clairement aux clients afin qu'ils sachent où demander les futures mises à jour des favicon.

Après avoir publié votre favicon Webflow, utilisez le favicon tester pour confirmer qu'il est résolu sur votre domaine de production. Comparez le résultat avec la taille attendue : 32×32 pour les onglets, 180×180 pour iOS si vous avez ajouté le apple-touch-icon. Consultez également le guide best favicon size pour comprendre quelles tailles améliorent le score d'exhaustivité des icônes de votre site.