Comment utiliser All in One Favicon pour ajouter plus à WordPress

Avant de nous lancer dans ce tutoriel sur le plugin All in One Favicon, revenons un instant en arrière.

Au siècle dernier, presque tous les navigateurs Web proposaient une liste de favoris ou de signets. Au fur et à mesure que le Web s’est développé, la liste des favoris est passée d’une fonctionnalité intéressante à un ajout nécessaire. Fichier favicon. Mais si votre liste de favoris était longue, il était parfois difficile de trouver le site Web que vous recherchiez.

Un développeur avisé de Microsoft a donc créé la favicon. Il s’agit d’une image de 16 x 16 pixels qui apparaît à côté du titre du site Web, facilitant ainsi son identification. Tant que votre site possédait le fichier .ico dans son répertoire racine, il s’affichait dans la liste des favoris.

Très vite, tous les autres navigateurs ont adopté la favicon et, dans Internet Explorer, elle a commencé à apparaître à côté de la barre d’adresse. Maintenant, bien sûr, le graphique apparaît dans l’onglet du navigateur. Et si vous y pensez, les onglets ne seraient pas aussi pratiques sans l’humble favicône.

Créer une image favicon n’est pas toujours facile

Le format de fichier .ico est un format Windows. Il n’a donc pas toujours été facile de créer votre propre favicon. La plupart des programmes graphiques ne pouvaient pas créer ce fichier. Même Photoshop avait besoin d’un plugin pour enregistrer un fichier .ico.

Aujourd’hui, bien sûr, il existe des sites Web qui convertissent votre fichier image de 16 x 16 pixels en .ico à partir de presque tous les formats.

Mais pourquoi utiliser un site Web quelconque pour créer un fichier .ico si vous n’y êtes pas obligé ?

Je vais vous montrer comment créer un favicon pour votre site WordPress en utilisant un plugin, All In One Favicon.

Le plugin All In One Favicon WordPress vous permet même d’ajouter différents graphiques à votre site public et aux pages d’administration. Vous pouvez télécharger un favicon, ou télécharger une image pour en créer un. Le plugin créera l’image à partir d’un fichier .ico, .png, .gif ou Apple Touch Icon.

Il s’agit d’un simple plugin à fonction unique, mais passons en revue les étapes pour définir votre favicon.

Installation du plugin All In One Favicon

Connectez-vous à votre panneau d’administration WordPress.

Dans la colonne de navigation de gauche, passez la souris sur le lien “Plugins” et cliquez sur le lien “Add New”.

Dans la case “Rechercher des plugins…”, entrez “All In One Favicon”.

Une fois que vous avez localisé le plugin, cliquez sur le bouton “Installer maintenant”.

Enfin, cliquez sur le bouton “Activer”.

Création d’un favicon

Par défaut, WordPress utilise un favicon parfaitement acceptable.

Mais l’idée ici est de s’en débarrasser. Parce qu’il n’est pas facile de trouver votre site dans la liste des favoris de quelqu’un s’il a le même graphique que vingt autres sites.

Nous allons donc suivre les étapes pour en créer un nouveau et distinguer votre site de tous les autres.

Dans la colonne de navigation de gauche, passez la souris sur le lien “All in one Favicon” et cliquez sur le lien “All in one Favicon”.

La page du plugin comporte des sections “Frontend Settings” et “Backend Settings”. Il s’agit des contrôles séparés pour le favicon public (paramètres frontaux) et le graphique de la zone d’administration (paramètres dorsaux).

Nous allons simplement créer un favicon frontal pour les zones publiques du site. Mais tout ce que nous faisons ici s’applique également aux paramètres du backend.

Il est important de noter que si vous ne spécifiez pas de favicon pour votre zone d’administration, aucun ne sera affiché. L’image que vous spécifiez pour le frontend n’apparaîtra pas sur vos pages d’administration.

Comme vous pouvez le voir, il y a quatre options pour votre fichier : .ico, .png, .gif ou Apple Touch Icon.

Comme il se trouve que j’ai un fichier PNG à portée de main, je vais cliquer sur le bouton “Upload” dans la ligne “PNG Frontend”. Cela ouvre une boîte de dialogue standard de sélection de fichier.

Après avoir sélectionné le fichier sur votre ordinateur, il semble que rien ne se soit passé. Le plugin ne vous donne aucune indication que votre fichier a été téléchargé avec succès.

Mais si vous cliquez sur le bouton “Enregistrer les modifications” :

Vous verrez un chemin vers votre fichier téléchargé apparaître dans le champ :

Et croyez-le ou non, c’est tout ce qu’il y a à faire.

L’image nouvellement téléchargée apparaîtra maintenant comme votre favicon.

Favicônes et cache du navigateur

Malheureusement, nous ne pouvons pas mettre à jour les favicons en rafraîchissant une page – chaque navigateur stocke les favicons d’une manière différente : (Creer fichier favicon). Et vider le cache de votre navigateur juste pour voir une nouvelle image est généralement exagéré.

C’est pourquoi je vous suggère d’ouvrir un autre navigateur et de visiter votre site pour voir la nouvelle favicon. Elle finira par s’afficher dans votre navigateur principal. Mais cela peut ne pas se produire avant que vous ne fermiez et rouvriez le logiciel.

Quelques comportements étranges et intéressants

Comme vous pouvez le voir sur notre site de test, il est possible de télécharger plusieurs fichiers favicon :

Je n’ai pas pu trouver d’informations sur la hiérarchie, mais je vais vous transmettre ce que j’ai trouvé par essai et erreur.

La liste des formats, telle qu’elle est présentée, avec .ico en premier, puis .gif, .png et Apple, est la hiérarchie. Ainsi, si vous téléchargez un fichier .png, puis un .gif, le .gif sera le favicon (Creer fichier ico). Si vous téléchargez un fichier .ico, il occupera la première place. Les fichiers .gif et .png que vous avez téléchargés précédemment sont toujours là, mais ils ne sont pas utilisés (Fichier favicon site). Le plugin utilise par défaut le fichier le plus élevé dans cet ordre.

Je ne suis pas sûr de l’avantage qu’il y a (s’il y en a un) à avoir plusieurs types de fichiers téléchargés, mais voilà.

Que se passe-t-il si vous désinstallez le plugin All In One Favicon ?

Si vous désinstallez le plugin, votre favicon cessera de fonctionner.

C’est parce que le plugin ne crée pas un fichier de 16 x 16 pixels et ne le place pas dans votre répertoire racine. Il utilise la méthode alternative d’ajout :

dans le répertoire de votre site

Vous pouvez copier le lien de l’icône avant de désinstaller le plugin, puis l’ajouter manuellement à l’en-tête de votre thème. Ouvrir fichier favicon. Mais bien sûr, si vous faites cela, je vous recommande d’utiliser un thème enfant. Et c’est une couche supplémentaire de complexité que vous ne voulez peut-être pas prendre.

Il est facile de négliger les choses simples.

Lorsque vous créez un nouveau site Web et que vous cherchez un hébergement, le favicon est probablement la dernière chose à laquelle vous pensez. Si vous avez oublié un favicon et que vous avez besoin d’un moyen facile d’en créer un, voici ce qu’il vous faut.

Ou peut-être que vous avez remis à plus tard la modification ou la mise à jour de votre favicon parce que c’est trop compliqué. Quel que soit le bateau dans lequel vous vous trouvez, j’espère que ce tutoriel sur le plugin WordPress favicon vous aidera.

Ce n’est pas souvent qu’une technologie web précoce reste en place aussi longtemps que celle-ci. Vous vous souvenez des cadres ? Que pensez-vous de ? Désolé de vous rappeler le . Pardonnez-moi. Et à quand remonte la dernière fois où vous avez entendu quelqu’un se faire appeler “webmaster” ? Je parie que ça fait un moment.

(Et non, votre grand-mère qui essaie de décrire votre travail pendant le dîner de Thanksgiving ne compte pas. Elle a le droit de dire “webmaster”).

Le fait que nous utilisions encore la favicon aujourd’hui est un signe de son utilité durable. Il est toujours essentiel d’établir cette image pour que vos visiteurs puissent vous trouver lorsqu’ils veulent revenir.

Avez-vous déjà mis en place un favicon à l’ancienne ? Depuis combien de temps n’avez-vous pas mis à jour votre favicon ? Faites-le moi savoir dans les commentaires.