Ajouter une favicon à Espace carré

Améliorez l’esthétique de votre site. Découvrez comment configurer une favicon d'onglet propre dans les paramètres Squarespace.

L'ajout d'un favicon à Squarespace ne prend que quelques minutes. Vous avez besoin d'une image de favicon appropriée, d'un accès au site Web Squarespace approprié et de la possibilité d'ouvrir ses paramètres de favicon. Dans ce guide, vous apprendrez comment préparer une favicon, la télécharger sur Squarespace, vérifier qu'elle fonctionne, la remplacer ou la supprimer et résoudre les cas où la nouvelle icône n'apparaît pas immédiatement.

Qu'est-ce qu'une favicon Squarespace ?

Un favicon, également appelé icône de navigateur, est la petite image carrée associée à votre site Web. Il apparaît généralement à côté du titre de votre page dans les onglets et les favoris du navigateur. Selon le navigateur ou l'appareil, il peut également apparaître dans d'autres interfaces de navigateur et parfois dans les résultats de recherche.

Chaque site Squarespace commence par le favicon de cube par défaut de Squarespace, sauf si vous en ajoutez un personnalisé. Le remplacer par votre propre icône donne aux visiteurs un identifiant visuel reconnaissable pour votre site Web.

Un favicon est distinct du logo de votre site Web. Votre logo peut apparaître en évidence dans l'en-tête de votre site, tandis que le favicon est conçu pour rester reconnaissable même dans une très petite taille.

Que devez-vous préparer avant d’ajouter une favicon à Squarespace ?

Avant d'ouvrir Squarespace, préparez l'image que vous souhaitez utiliser comme favicon. Les directives actuelles en matière de favicon de Squarespace recommandent ce qui suit :

  • Utiliser PNG : Squarespace recommande les fichiers .png pour les favicons et n'autorise pas le téléchargement de fichiers .ico.
  • Utilisez une image carrée : Un canevas carré fonctionne mieux car les favicons sont affichés sous forme de petites icônes carrées.
  • Visez 100 × 100 px à 300 × 300 px : Squarespace recommande cette gamme pour les images favicon. Bien que les favicons puissent s'afficher dans de très petites dimensions, telles que 16 × 16 px, une image source plus grande dans cette plage fonctionne mieux sur tous les navigateurs.
  • Conservez le fichier sous 100 Ko : Squarespace indique que les fichiers favicon ne peuvent pas dépasser 100 Ko.
  • Utilisez un design simple : Un favicon est beaucoup plus petit qu'un logo normal, donc les illustrations compliquées et les textes longs peuvent devenir méconnaissables.
  • Utilisez un contraste fort : L'icône doit rester distincte des interfaces de navigateur claires et sombres.
  • Évitez les détails excessifs : Les lignes fines, les petits caractères et les multiples éléments visuels sont difficiles à identifier à la taille d'un favicon.
  • Commencez avec une source de haute qualité : La réduction d'échelle d'une source propre et nette produit généralement un meilleur résultat que l'agrandissement d'une petite image.

Quel format de fichier Squarespace recommande-t-il ?

Pour un favicon en particulier, Squarespace recommande le format PNG et ne prend pas en charge le téléchargement d'un fichier .ico via son téléchargeur de favicon.

Ne confondez pas la prise en charge générale du téléchargement d’images Squarespace avec les exigences spécifiques aux favicon. Squarespace prend en charge plusieurs formats dans d'autres zones d'image, mais sa documentation favicon recommande spécifiquement PNG.

Comment ajouter une favicon à Squarespace ?

Le processus Squarespace actuel utilise un panneau Favicon dédié. L'itinéraire exact vers ce panneau peut varier en fonction de l'interface Squarespace que vous utilisez, alors concentrez-vous sur la localisation du paramètre favicon ou de l'icône du navigateur du site plutôt que de vous fier à un ancien chemin de menu.

  1. Connectez-vous à Squarespace : Ouvrez Squarespace et connectez-vous au compte qui gère votre site Web. Assurez-vous de disposer des autorisations de modification pour le site dont vous souhaitez modifier la favicon.
  2. Ouvrez le bon site Web : Depuis le tableau de bord de votre compte Squarespace, ouvrez le site Web que vous souhaitez modifier. Cela est important si votre compte gère plusieurs sites Web Squarespace. Le téléchargement d'un favicon sur un site ne modifiera pas le favicon sur un autre site.
  3. Ouvrez les paramètres de la favicon : Naviguez dans les paramètres ou les commandes de conception du site jusqu'à ce que vous atteigniez le panneau Favicon. La documentation d'aide actuelle de Squarespace fait spécifiquement référence à cette destination sous le nom de panneau Favicon. Les didacticiels plus anciens peuvent décrire le paramètre avec des étiquettes telles que l'icône du navigateur ou le placer sous différentes zones de l'interface. Ne présumez pas qu’un chemin plus ancien est toujours identique dans votre compte.
  4. Téléchargez votre favicon : Dans le panneau Favicon, faites glisser l'image de votre favicon dans le téléchargeur ou cliquez sur le téléchargeur pour sélectionner le fichier sur votre ordinateur. Sélectionnez le favicon PNG que vous avez préparé. Attendez la fin du téléchargement. Vérifiez que l'image téléchargée apparaît dans la zone favicon. Squarespace prend actuellement en charge une favicon alternative facultative pour le mode sombre. Un favicon par défaut doit être ajouté avant de pouvoir ajouter la version en mode sombre.
  5. Enregistrez les modifications : Cliquez sur Enregistrer une fois l'image téléchargée. L'enregistrement est important car le téléchargement ou la sélection de l'image à elle seule ne remplace pas le favicon publié tant que la modification n'est pas enregistrée. Les instructions actuelles de Squarespace demandent spécifiquement aux utilisateurs de cliquer sur Enregistrer après le téléchargement des images.
  6. Ouvrez votre site Web et vérifiez l'onglet du navigateur : Ouvrez l'URL publiée de votre site dans un navigateur. Regardez l'onglet du navigateur à côté du titre de la page. Votre nouveau favicon devrait remplacer l'icône Squarespace par défaut.

Si vous voyez toujours le favicon précédent, ne présumez pas immédiatement que le téléchargement a échoué. Les navigateurs peuvent mettre en cache les favicons de manière agressive, de sorte que l'ancienne icône peut continuer à apparaître même après que la nouvelle favicon a été enregistrée avec succès.

Où est le paramètre Favicon dans Squarespace ?

L'interface a changé au fil du temps, c'est pourquoi différents didacticiels Squarespace peuvent montrer différents chemins de navigation. La documentation actuelle de Squarespace identifie la destination comme étant le panneau Favicon.

Vous pouvez rencontrer des instructions plus anciennes faisant référence à :

  • Icône du navigateur
  • Logo et titre
  • Conception
  • Un paramètre d'icône de navigateur dans les contrôles de conception ou de marque du site

Ces étiquettes ne doivent pas être considérées comme universellement actuelles. Squarespace peut modifier l'emplacement ou le nom des contrôles entre les interfaces et les versions de plateforme. Le paramètre important est celui spécifiquement destiné au favicon ou à l'icône du navigateur du site. Ce n'est pas le même paramètre que le logo de votre site ou le titre de la page.

Comment créer un favicon pour Squarespace ?

Vous n’avez pas besoin de concevoir un favicon à partir de zéro. L’approche la plus simple dépend des actifs de marque que vous possédez déjà.

Créez une favicon à partir de votre logo

Si vous avez déjà un logo, créez-en une version carrée simplifiée. N'utilisez pas automatiquement l'intégralité du logo horizontal. Un nom d'entreprise long peut devenir illisible lorsqu'il est réduit aux dimensions d'un favicon. Une meilleure approche consiste souvent à utiliser un symbole reconnaissable du logo, une initiale unique, un monogramme ou une marque de marque simplifiée.

Créer un favicon à partir de texte ou d'initiales

Pour un favicon textuel, utilisez une ou deux lettres proéminentes plutôt que le nom complet de votre entreprise. Par exemple, une entreprise appelée Digital Marketing Solutions pourrait utiliser DM au lieu d'essayer d'insérer le nom complet dans l'icône. Utilisez une police simple et audacieuse et suffisamment contrastée pour que les lettres restent reconnaissables.

Convertir un PNG existant en favicon

Si vous disposez déjà d'un logo ou d'une icône PNG approprié, vous pouvez le convertir en illustration prête pour les favicon à l'aide d'un outil de conversion d'image. Par exemple, PNGversFavicon.com peut convertir une image PNG en favicon. Ceci est utile lorsque vous avez déjà un PNG carré mais que vous avez besoin d'un fichier orienté favicon pour votre site Web.

Avant de télécharger le résultat sur Squarespace, vérifiez que l'image finale répond aux exigences de favicon de Squarespace, en particulier le format PNG, les dimensions carrées et la taille maximale du fichier de 100 Ko.

Gardez le design reconnaissable dans les petites tailles

Le test de conception le plus important est simple : réduisez considérablement l’icône et regardez-la sans zoomer. Si vous ne parvenez pas à identifier rapidement le symbole ou la lettre, simplifiez-le. Un favicon fonctionne normalement mieux comme une marque visuelle audacieuse que comme une version miniature de l'intégralité de votre logo.

Comment vérifier si votre favicon Squarespace fonctionne ?

Après avoir enregistré le favicon, vérifiez-le sur le site Web réellement publié.

  • Vérifiez l'onglet du navigateur : Ouvrez votre site Web et regardez l'icône à côté du titre de la page dans l'onglet du navigateur. Il s’agit du test le plus direct, car les onglets du navigateur sont l’un des principaux endroits où apparaissent les favicons.
  • Testez une nouvelle session de navigateur : Si l'ancienne icône reste visible, ouvrez une fenêtre privée ou incognito, visitez votre site Web et vérifiez à nouveau l'onglet du navigateur. Cela permet de déterminer si le problème est causé par les données de favicon mises en cache lors de votre session normale de navigateur.
  • Vérifiez un autre navigateur de bureau : Testez le site dans un autre navigateur tel que Chrome, Edge, Firefox ou Safari. Un favicon qui s'affiche correctement dans un navigateur mais pas dans un autre peut indiquer un comportement de mise en cache ou d'affichage spécifique au navigateur plutôt qu'un problème de téléchargement Squarespace. Safari peut afficher les favicons différemment des autres navigateurs. Squarespace note que Safari peut afficher le favicon lorsque vous cliquez sur la barre d'adresse ou lorsque plusieurs onglets sont ouverts, et qu'il peut ajouter une bordure ou un arrière-plan pour le contraste.
  • Vérifiez sur mobile : Ne considérez pas l'absence de favicon sur un navigateur mobile comme une preuve que le téléchargement a échoué. Squarespace indique que l'affichage du favicon sur mobile dépend du navigateur mobile et que, dans certains cas, le favicon ne s'affichera pas du tout.

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

Un favicon qui n'apparaît pas immédiatement est généralement un problème de mise en cache ou de configuration plutôt qu'une raison pour reconstruire l'intégralité du site Web.

Cache du navigateur

Problème: Votre navigateur affiche toujours l'ancienne favicon.
Réparer: Videz le cache du navigateur, fermez et rouvrez le navigateur, puis revisitez votre site. Squarespace recommande spécifiquement de vider le cache du navigateur et de redémarrer le navigateur lorsqu'un favicon ne se met pas à jour immédiatement.

Le favicon n'a pas été enregistré

Problème: L'image a été téléchargée mais la modification n'a pas été enregistrée.
Réparer: Revenez au panneau Favicon, confirmez que l'image correcte est présente, puis cliquez sur Enregistrer.

Vous avez modifié le mauvais site Web

Problème: Le favicon semble inchangé car l'image a été téléchargée sur un autre site Squarespace de votre compte.
Réparer: Confirmez le nom et le domaine du site Web avant de modifier le favicon.

L'image ne répond pas aux exigences des favicon

Problème: Le fichier est trop volumineux, utilise un format inapproprié ou présente des dimensions qui produisent un résultat médiocre.
Réparer: Réexportez l'image au format PNG, conservez-la en dessous de 100 Ko et utilisez une image carrée entre 100 × 100 px et 300 × 300 px comme le recommande Squarespace.

La favicon a été modifiée récemment

Problème: Squarespace a enregistré la nouvelle favicon, mais votre navigateur affiche toujours une ancienne version.
Réparer: Testez dans une fenêtre de navigation privée/privée ou dans un autre navigateur avant d'apporter des modifications supplémentaires.

Vous testez le mauvais domaine ou la mauvaise page

Problème: Vous vérifiez un domaine Squarespace intermédiaire, un aperçu, intégré ou un domaine différent de celui que vous avez modifié.
Réparer: Ouvrez l'URL exacte du site Web publié associé au site Squarespace que vous avez modifié.

Comportement du navigateur mobile

Problème: Le favicon apparaît sur le bureau mais pas sur votre téléphone.
Réparer: Vérifiez le même site sur un navigateur de bureau avant de supposer que le téléchargement a échoué. Le comportement des favicon mobiles varie selon le navigateur, et Squarespace note que les navigateurs mobiles peuvent ne pas afficher du tout les favicon.

Combien de temps faut-il pour qu'une favicon Squarespace soit mise à jour ?

Il y a trois événements distincts à distinguer :

  1. Squarespace enregistre le favicon : Cela se produit lorsque vous téléchargez l'image et enregistrez les paramètres du favicon.
  2. Votre site Web utilise la nouvelle favicon : La configuration du site enregistrée doit fournir l'icône mise à jour aux visiteurs.
  3. Votre navigateur affiche la nouvelle favicon : Le navigateur peut continuer à utiliser une favicon précédemment mise en cache.

Étant donné que les navigateurs peuvent conserver les données des favicon, il n'existe pas de temps de mise à jour universel fiable garantissant que la nouvelle icône apparaîtra immédiatement. Squarespace avertit spécifiquement que les navigateurs peuvent persister à propos des favicons mis en cache. Testez une fenêtre de navigateur privée ou un autre navigateur avant de conclure que la modification a échoué.

Comment modifier ou remplacer une favicon Squarespace ?

Le remplacement d'un favicon existant suit essentiellement le même processus que l'ajout d'un favicon pour la première fois.

  • Connectez-vous à Squarespace.
  • Ouvrez le site Web que vous souhaitez modifier.
  • Ouvrez le panneau Favicon.
  • Sélectionnez le téléchargeur de favicon existant.
  • Téléchargez la nouvelle image PNG. (Si vous utilisez un favicon en mode sombre, mettez à jour cette version séparément si nécessaire.)
  • Cliquez sur Enregistrer.
  • Ouvrez le site Web publié et vérifiez l'onglet du navigateur. Testez dans une fenêtre privée si le favicon précédent continue d'apparaître.

Squarespace autorise une favicon en mode sombre facultative, mais la favicon par défaut doit exister avant qu'une version alternative en mode sombre puisse être ajoutée.

Comment supprimer une favicon Squarespace ?

Si vous souhaitez arrêter d'utiliser votre favicon personnalisé, ouvrez les paramètres du favicon et recherchez le contrôle de suppression ou de suppression disponible à côté de l'image téléchargée. Le contrôle exact peut varier en fonction de l'interface Squarespace actuelle, alors ne vous fiez pas à un ancien didacticiel qui spécifie un nom de bouton particulier.

Après avoir supprimé le favicon personnalisé, enregistrez les paramètres et testez à nouveau le site Web. Squarespace indique que les sites sans favicon personnalisé commencent par son favicon cube par défaut.

Erreurs courantes de favicon Squarespace à éviter

  • Utiliser une image compliquée : Simplifiez le design pour que l'icône reste reconnaissable dans une petite taille.
  • À l'aide d'une petite image source : Commencez avec une source propre et de taille adéquate plutôt que d’agrandir une image basse résolution.
  • Mauvais contraste : Une icône qui se fond dans l'arrière-plan d'un navigateur peut apparaître invisible.
  • Utiliser trop de texte : Les noms complets d’entreprises restent rarement lisibles dans une favicon.
  • Téléchargement du mauvais type de fichier : Squarespace recommande le format PNG pour les favicons et n'autorise pas les téléchargements .icon.
  • Dépassement de la limite de taille de fichier : Les fichiers Favicon ne peuvent pas dépasser 100 Ko.
  • Oublier de sauvegarder : Enregistrez toujours une fois le téléchargement de l’image terminé.
  • Vérification d'un seul navigateur : Utilisez un autre navigateur ou une fenêtre privée lors des tests.
  • En supposant qu'une icône en cache signifie que le téléchargement a échoué : Videz le cache avant d'apporter des modifications inutiles.
  • S'attendre à ce que les navigateurs mobiles se comportent comme les navigateurs de bureau : La prise en charge et l'affichage des favicon mobiles varient selon le navigateur.

FAQ sur les favicons Squarespace

Puis-je ajouter une favicon PNG à Squarespace ?

Oui. Squarespace recommande le format PNG pour les téléchargements de favicon. La documentation actuelle du favicon de Squarespace indique également que les fichiers .icon ne peuvent pas être téléchargés via le paramètre favicon.

Quelle doit être la taille d’une favicon Squarespace ?

Squarespace recommande de télécharger un favicon entre 100 × 100 px et 300 × 300 px. Il indique également que le fichier favicon ne doit pas dépasser 100 Ko.

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

L'explication la plus courante est la mise en cache du navigateur. Videz le cache de votre navigateur, redémarrez le navigateur ou testez le site dans une fenêtre privée ou un autre navigateur. Confirmez également que vous avez enregistré le favicon et que vous vérifiez le bon site Web publié.

Puis-je modifier mon favicon Squarespace ?

Oui. Ouvrez le panneau Favicon, téléchargez l'image de remplacement et enregistrez la modification.

Squarespace redimensionne-t-il automatiquement une favicon ?

La documentation actuelle de Squarespace recommande de télécharger des illustrations de favicon entre 100 × 100 px et 300 × 300 px, tout en notant que les favicons s'affichent dans de très petites tailles telles que 16 × 16 px. L'approche la plus sûre consiste à préparer l'image dans une taille carrée appropriée plutôt que de s'appuyer sur un petit fichier source.

Comment créer un favicon pour Squarespace ?

Créez une simple icône carrée à partir de votre logo, de vos initiales ou d'un symbole de marque reconnaissable. Exportez-le au format PNG, conservez-le sous 100 Ko et utilisez des dimensions comprises entre 100 × 100 px et 300 × 300 px. Un outil de conversion tel que PNGversFavicon.com peut aider à transformer un fichier PNG existant en illustration prête pour les favicon.

Combien de temps faut-il pour mettre à jour une favicon Squarespace ?

Il n’existe pas d’heure universelle fiable pour la mise à jour de l’affichage du navigateur. Squarespace peut enregistrer la modification immédiatement, mais le navigateur peut continuer à afficher une version en cache du favicon précédent. Videz le cache ou testez dans une fenêtre privée lors de la vérification de la mise à jour.

Puis-je utiliser mon logo comme favicon Squarespace ?

Oui. Un logo peut être utilisé comme favicon, mais il doit être simplifié si nécessaire afin qu'il reste reconnaissable même dans de petites dimensions. Squarespace note également que son propre outil Squarespace Logo peut créer des logos PNG pouvant être utilisés comme favicons.

Conclusion

Pour ajouter un favicon à Squarespace, préparez un simple PNG carré, ouvrez le panneau Favicon du site, téléchargez l'image et enregistrez la modification. Vérifiez-le ensuite dans un onglet du navigateur. Le point de dépannage le plus important est la mise en cache. Un téléchargement réussi de favicon peut ne pas apparaître immédiatement car les navigateurs peuvent conserver le favicon précédent. Testez dans une fenêtre privée, videz le cache ou vérifiez un autre navigateur avant de supposer que le téléchargement Squarespace a échoué.