Lorsque vous créez un site web, il est tout à fait normal de considérer les moindres détails de la page. De ce fait, toutes les pages web disposent d’une petite image propre à leur identité. La plupart du temps, ces illustrations plus communément appelées logo sont utilisées comme favicon. Par définition, un favicon est l’icône visible dans l’onglet du navigateur web. Comment réaliser ce genre d’image et comment le relier à votre site ? Voyons tout cela de plus près.
Sommaire
Comment créer un favicon ?
Les favicons ne se limitent pas à tout simplement apparaitre dans l’onglet du navigateur web. En effet, ces images permettent également aux internautes de retrouver votre site lorsque plusieurs onglets sont ouverts en même temps. D’ailleurs, cette icône donne un aspect professionnel à votre site web.
Pour la conception de votre favicon, vous avez deux options possibles : utiliser un générateur de favicon ou créer votre propre image. Si vous pensez utiliser un générateur de favicon, vous avez la possibilité d’avoir votre icône depuis une galerie. Ce genre de logiciel en ligne vous permet notamment de redimensionner et d’obtenir le format exact d’un favicon.
Dans le cas où désirez créer votre icône, vous pouvez utiliser un logiciel de d’édition d’images. Sachez que votre favicon doit représenter l’identité de votre et ainsi, cet élément doit se distinguer et ne doit en aucun cas copier une icône déjà existante. L’image que vous utiliserez comme favicon doit être enregistrée sous le format ico ou le format PNG.
Relier un favicon en utilisant HTML
Avant d’insérer votre favicon, notez que la forme du fichier doit être carrée. Dans ce cas, vous pouvez choisir la dimension 16×16, 32×32 ou même 64×64. En effet, il est recommandé d’utiliser une icône carrée pour le côté professionnel. Toutefois, rien ne vous empêche d’employer un logo rond tant que cela représente l’identité de votre site.
Si vous avez édité votre site internet en rédigeant tous les codes, vous utiliserez ainsi le code HTML pour intégrer votre favicon. Pour cela, vous devez utiliser la balise link dans la balise head de votre page d’accueil. Généralement, la balise link se trouve tout juste après la balise title.
Pour insérer votre icône, vous utiliserez trois attributs dans la balise link, à savoir rel, type et href. L’attribut rel permet de définir la relation entre le document et la ressource recherchée. Concernant l’attribut type, il est utilisé pour définir le type de l’élément à insérer. Pour l’attribut href, celui-ci permet de spécifier le chemin du fichier.
Si vous utilisez un chemin relatif pour l’emplacement de l’image, voici le code :
<head>
<title>Titre de ma page</title>
<link rel="shortcut icon" href="https://41mag.b-cdn.net/images/favicon.ico" type="image/x-icon">
</head>
Dans le cas où il s’agit d’un chemin relatif, voici le code :
<head>
<title>Titre de ma page</title>
<link rel="shortcut icon" href="https://www.votresite.fr/favicon.ico" type="image/x-icon">
</head>
Bien évidemment, vous remplacerez “votresite” par le vrai nom de votre domaine. En utilisant un client FTP, votre page d’accueil et votre fichier favicon.ico doivent être enregistrés à la racine de votre serveur.
Comment ajouter votre Favicon depuis WordPress ?
L’ajout d’un Favicon depuis WordPress est une autre option possible. D’ailleurs, sur WordPress, vous avez trois solutions pour l’ajout de l’icône, mais nous vous conseillons uniquement de vous servir de la fonction Icône du site :
- Utiliser la fonction Icône du site
- Se servir d’un plugin
- Insérer manuellement le favicon
Depuis la version 4.3 de WordPress, la fonctionnalité d’ajout d’Icône du site a été ajoutée. Cela permet ainsi d’intégrer les favicons pour tous les sites. Vous n’avez pas besoin de convertir votre image au format ico en suivant cette méthode. Assurez-vous tout simplement que votre logo soit carré avec une taille minimale de 512×512 pixels. Voici les étapes à suivre depuis le tableau de bord WordPress :
- Apparence puis Personnaliser
- Choisissez Identité du site
- Cliquez maintenant sur le bouton Sélectionner l’icône du site
- Cliquez sur Téléverser des fichiers et ensuite Sélectionner des fichiers
- Choisissez le fichier à utiliser comme favicon
- En haut de la page à gauche, cliquez sur Publier
Et voilà, le favicon de votre site est déjà actif et vous pouvez l’apercevoir dans l’onglet de votre navigateur.