Les experts en branding parleront souvent de visibilité. En d'autres termes, les éléments de votre site destinés aux utilisateurs doivent pratiquement toujours refléter votre image de marque. Cependant, un projet que vous n'avez peut-être pas envisagé consiste à créer une icône de site pour votre site Web WordPress.

La bonne nouvelle est qu'il est plus facile que jamais de concevoir et de télécharger l'icône de votre site sur WordPress. En fait, il existe plusieurs façons d'accomplir la tâche, quels que soient votre expertise, votre temps et votre budget.

Dans cet article, nous verrons comment créer une icône de site pour votre site. Cependant, nous allons d'abord expliquer pourquoi vous voudriez envisager de créer une icône de site, ainsi que certaines considérations que vous devrez prendre en compte.

Qu'est-ce qu'une icône de site (et pourquoi vous en avez besoin)

Vous avez probablement vu une icône de site, même si vous n'êtes pas sûr de ce qu'elle est. En fait, vous en avez déjà regardé un – consultez le coin supérieur gauche de la fenêtre de votre navigateur :

L'icône du site WPKube.

Il s'agit essentiellement d'une petite icône qui s'affiche à côté de l'onglet de la page dans votre navigateur ou dans les pages de résultats des moteurs de recherche (SERP) :

Icônes du site affichées dans les SERP.

Considérez-le comme un équivalent numérique de la petite boule que vous attachez à l'antenne de votre voiture. Cependant, il y a une différence entre une icône de site et les 5 000 autres boules colorées du parking de Walmart : vous pouvez créer une icône de site spécifique à votre marque.

En ce qui concerne l'image de marque de votre site, les premières impressions sont importantes. De plus, les consommateurs cherchent à la cohérence d'une marque comme marqueur de confiance. Une icône de site peut aider à réaliser ces deux choses.

Certes, l'icône de votre site ne portera pas tout le poids de votre stratégie de marque. Cependant, la visibilité supplémentaire qu'elle apporte – en particulier si un client potentiel navigue sur votre site – pourrait avoir un impact positif sur toute la ligne.

Comment créer une icône de site pour votre site Web WordPress (en 3 étapes)

Il y a deux phases impliquées dans cette tâche. Tout d'abord, vous voudrez créer une icône de site. Ensuite, vous devrez le télécharger sur votre site Web WordPress. Voici trois étapes que vous pouvez suivre pour créer une icône de site pour votre site WordPress :

Nous vous montrerons ensuite trois façons de télécharger votre icône :

Il y a beaucoup à faire, alors commençons !

Étape 1 : Choisissez la bonne taille pour l'icône de votre site

Tout d'abord, la taille de l'icône de votre site. Vous auriez raison de penser que ces fichiers vont être petits. Cependant, bien que les tailles soient minuscules, comprendre les différentes dimensions peut être complexe. En effet, différentes plates-formes ont des exigences différentes en matière de tailles d'icônes de site (ou “favicon”).

De manière générale, la plupart des navigateurs prendront en charge un 32 x 32 pixels .ico fichier, qui est la norme depuis des décennies. Cependant, en pratique, vous voudrez utiliser un 512 x 512 pixels .png déposer. La raison en est que cela couvre pratiquement toutes les bases, de la taille par défaut de l'icône du site Chromejusqu'au minimum requis.

Incidemment, il s'agit également d'une recommandation explicite dans le back-end WordPress (dont plus tard). Une fois votre dimensionnement défini, il est temps de penser au design.

Étape 2 : Assurez-vous d'utiliser des pratiques optimales pour la conception de l'icône de votre site

La tentation pour la conception d'icônes de site est simplement d'utiliser une version réduite du logo de votre site et de l'appeler un jour. Cependant, compte tenu de nos conseils sur une image de marque optimale, vous devriez prendre le temps de travailler sur une icône de site personnalisée plutôt que de vous contenter de l'option facile.

De plus, la “salle” virtuelle dont vous disposez signifie que vous ne pourrez peut-être pas articuler votre image de marque à l'aide de votre logo habituel. En tant que tel, vous voudrez prendre en compte les éléments suivants lors de la création de l'icône de votre site :

  • Distillez votre image de marque jusqu'à une ou deux couleurs simples qui offrent cohérence et visibilité.
  • Réduisez votre logo aux éléments les plus essentiels et faites-en le sujet de l'icône de votre site.
  • Utilisez le contraste pour mettre l'accent sur les principaux aspects de l'icône de votre site.

Pour en offrir un exemple concret, regardez à nouveau l'icône du site WPKube. Il utilise le bleu et le blanc, qui offre un contraste élevé, et ne contient que le logo du site.

C'est tout ce qu'il faut. Il offre une visibilité, une cohérence avec les autres éléments de marque et garantit que vous pouvez repérer l'onglet sur les SERP et les écrans de navigateur.

Étape 3 : Sélectionnez le bon outil pour créer l'icône de votre site

La dernière étape une fois que vous avez trié la taille et la conception de l'icône de votre site consiste à la créer. Comme vous vous en doutez, il existe une myriade de façons de créer votre icône, et si vous avez un outil comme Canva, cela va être idéal. Alternatives comme DesignBold sont également parfaits pour la tâche, surtout si votre compte stocke déjà le logo de votre site :

L'application DesignBold.

Favicon.io est également fantastique pour créer rapidement une icône de site textuelle et télécharger toutes les différentes tailles dont vous avez besoin :

Le site Favicon.io.

Gardez à l'esprit que vous devrez enregistrer l'icône de votre site en tant qu'icône non transparente 8 ou 24 bits. .PNG fichier, car c'est le format le plus optimal. Favicon.io le fait pour vous, bien que vous deviez modifier les paramètres dans d'autres éditeurs génériques.

3 façons de télécharger l'icône de votre site sur WordPress

Comme c'est le cas avec WordPress, il existe une multitude de façons de télécharger l'icône de votre site. Nous aborderons ci-dessous les cas d'utilisation et l'adéquation, bien que vous soyez libre d'enquêter sur ceux qui pourraient vous convenir.

1. Utilisez la fonctionnalité intégrée de WordPress

La bonne nouvelle pour la plupart des utilisateurs de WordPress est que la plate-forme offre une fonctionnalité simple et rapide pour télécharger une icône de site.

Si vous recherchez une approche simple de la tâche, cette méthode est faite pour vous.

Étape 1. Accéder à l'écran d'identité du site dans WordPress

Tout d'abord, connectez-vous à WordPress. À partir du tableau de bord, vous voudrez vous diriger vers le panneau d'options de votre thème. Votre thème premium peut avoir des options dédiées, bien que pour les thèmes par défaut de WordPress, ce sera dans le Apparence > Personnaliser > Identité du site écran du Customizer :

L'écran Identité du site.

Une fois que vous êtes ici, vous pouvez passer à l'étape suivante.

Étape 2. Sélectionnez l'icône de votre site

Ensuite, jetez un oeil à la Identité du site rubrique pour la Sélectionner l'icône du site boite de dialogue:

La section Icône du site.

Ici, cliquez et téléchargez comme vous le feriez normalement avec les téléchargements de médias WordPress. N'oubliez pas de définir un “texte alternatif” approprié pour l'icône de votre site, afin d'améliorer votre accessibilité.

Étape 3. Vérifiez l'icône de votre site sur le front-end

Enfin, jetez un coup d'œil à l'avant de votre site, en particulier pour voir si l'icône de votre site a été téléchargée correctement. Vous remarquerez que WordPress offre un large aperçu de l'icône de votre site actuel, dans une maquette de navigateur :

Une icône de site affichée dans WordPress.

Cependant, vous devriez toujours regarder comment l'icône s'affiche dans un navigateur, principalement parce qu'elle montrera à quoi ressemble l'icône pour les autres utilisateurs – un facteur plus important.

2. Installez un plugin WordPress approprié

Pour de nombreux utilisateurs, l'installation d'un plugin WordPress est la solution incontournable. Cependant, étant donné que pratiquement tous les sites WordPress ont des options de personnalisation intégrées pour ce faire, un plugin peut être exagéré.

Nous recommandons cette approche si vous avez des exigences spécifiques pour l'icône de votre site ou si vous n'avez pas la possibilité d'en télécharger une à l'aide des options de votre thème.

Étape 1. Choisissez un plugin approprié

Le titre de cette étape est un léger abus de langage, car nous ne recommandons qu'un seul plugin : Favicon par RealFaviconGenerator:

Le plugin Favicon par RealFaviconGenerator.

Il s'agit essentiellement d'une version plugin du site Web populaire, et amplifie les fonctionnalités intégrées de WordPress. Il génère toutes les icônes de site requises à partir d'une seule image et les stocke dans la médiathèque.

Une fois que vous avez installé et activé le plugin, vous avez presque terminé.

Étape 2. Téléchargez l'icône de votre site en taille réelle

Une fois le plugin activé, vous remarquerez un nouveau Apparence > Favicon panneau dans votre tableau de bord WordPress. L'en-tête ici fait apparaître un ensemble simple d'options :

L'écran des options du plugin Favicon.

Bien que le libellé soit légèrement déroutant, vous téléchargez essentiellement vers (ou sélectionnez une image à partir de) le Médiathèque. N'oubliez pas d'ajouter du texte alternatif ici si vous ne l'avez pas déjà fait.

Pour commencer le processus de téléchargement, cliquez simplement sur le bleu Générer un favicon et passez à l'étape finale.

Étape 3. Téléchargez les icônes de votre site

Une fois que le plugin commence à générer les icônes de votre site, vous remarquerez qu'il passe à une version d'application Web du site du développeur. C'est ici que vous trouverez toutes les différentes icônes de site pour différentes plates-formes et dimensions :

L'écran de téléchargement du plugin Favicon.

Notez que vous pouvez choisir ici des options supplémentaires spécifiques à la plate-forme, relatives à la conception et à la présentation de l'icône de votre site :

Options de personnalisation supplémentaires dans le plugin Favicon.

Cependant, une fois que vous êtes prêt, cliquez sur Générez vos favicons et code HTMLà quel point le plugin fonctionnera sa magie.

Enfin, vous serez redirigé vers votre tableau de bord WordPress, où vous verrez des aperçus des icônes de votre site dans diverses maquettes :

L'écran de prévisualisation du plugin Favicon.

L'icône de votre site devrait maintenant être prête à rouler – encore une fois, vous voudrez vérifier le front-end pour être sûr.

3. Travailler avec le code pour afficher l'icône de votre site

L'approche finale que nous inclurons est sans doute obsolète pour les utilisateurs moyens, compte tenu des alternatives. Pourtant, en utilisant le code pour afficher l'icône de votre site est idéal pour des besoins très précis, ou même si vous créez un thème personnalisé.

Étape 1. Accédez au serveur de votre site à l'aide du protocole de transfert de fichiers (FTP)

Pour cette approche, vous aurez besoin accès au serveur via FTP. De plus, vous aurez besoin d'un client approprié tel que Cybercanard ou FilezillaNameet compétences assez pointues. Comme nous allons travailler avec les fichiers de base de WordPress, il est également recommandé d'utiliser un thème enfant.

Une fois que vous les avez en place, connectez-vous à votre serveur en utilisant les informations d'identification trouvées dans votre panneau de contrôle d'hébergement. Si vous ne savez pas où les trouver, vous devez contacter les canaux d'assistance de votre hébergeur. Ils peuvent également être trouvés dans un e-mail que vous avez reçu lorsque vous avez initialement acheté l'hébergement.

Étape 2. Téléchargez les fichiers d'icônes de votre site sur WordPress

Une fois que vous avez accédé au serveur, votre client FTP devrait vous montrer une liste de répertoires de votre site :

Un annuaire WordPress dans Cyberduck.

Ici, prenez le fichier d'icône de votre site et téléchargez-le dans le dossier de votre thème principal (qui se trouve dans contenu wp > thèmes) et le répertoire racine de votre site.

À ce stade, vous avez presque terminé. La dernière étape consiste à coder en dur l'icône de votre site dans WordPress.

Étape 3. Ajouter du code à l'en-tête de votre site Web

Pour la dernière étape, vous voudrez retourner à WordPress, en particulier au Apparence > Éditeur de thème page:

Modification du fichier header.php dans WordPress.

Lorsque vous accédez pour la première fois à la page, une boîte de dialogue d'avertissement s'affiche. Les débutants à cet écran voudront lire l'avis, avant de cliquer sur je comprend.

L'écran proprement dit affichera le code qui compose l'ensemble de votre site WordPress ici, et tout est modifiable, alors procédez avec prudence.

Vous voudrez d'abord vérifier que vous travaillez avec le bon thème dans le Sélectionnez le thème à modifier menu déroulant:

Sélection du bon thème avec lequel éditer.

Ensuite, faites défiler le Fichiers de thème liste jusqu'à ce que vous trouviez En-tête de thème (header.php) option. Vous voudrez le sélectionner ici, ce qui affichera votre header.php fichier dans l'éditeur.

Vous aurez envie de rechercher une ligne de code qui commence, <link rel="shortcut icon" et se termine par /favicon.ico" />. Si vous le trouvez, remplacez-le par la ligne de code suivante :

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />

Si la ligne n'existe pas du tout, vous pouvez ajouter la ligne entre votre Mots clés:

Ajout de code à l'éditeur WordPress.

Enfin, cliquez sur le bleu Fichier de mise à jour bouton, puis consultez l'icône de votre site sur le front-end.

En résumé

En un mot, l'icône de votre site peut aider les utilisateurs à reconnaître votre marque et à améliorer votre visibilité. Toute opportunité de piéger des clients potentiels doit être envisagée ; étant donné le temps et les ressources dont vous avez besoin pour créer une icône de site, la décision de le faire est facile.

Dans cet article, nous avons vu comment créer une icône de site pour votre site Web WordPress en utilisant trois méthodes. Récapitulons rapidement :

  1. Utilisez la fonctionnalité intégrée de WordPress pour télécharger votre icône.
  2. Installez un plugin tel que Favicon par RealFaviconGenerator.
  3. Affichez l'icône de votre site à l'aide de code.

Une icône de site fera-t-elle partie de la stratégie de marque globale de votre site ? Partagez vos pensées dans la section des commentaires ci-dessous!