Créer un favicon pour votre site Web
Vous avez sans doute remarqué les icônes apparaissant dans chacun de vos onglets sur votre navigateur Web et vous vous demandez comment vous pourriez faire de même pour votre site Web, ou changer celui qui apparaît afin d’afficher une icône qui reflète mieux l’identité de votre site Web ? Dans ce nouveau tutoriel, on vous explique comment créer et mettre en place votre propre favicon !
L’utilité du favicon
Les favicons sont apparus pour la première fois sur Internet Explorer 5. Bien que pas forcément indispensable, le favicon est un ajout intéressant pour tout site Web. Il apportera une image soignée et professionnelle à votre site. Il aidera les internautes à rapidement identifier votre site parmi les différents onglets ouverts dans son navigateur en un seul coup d’œil. Il apparaitra également dans la liste des favoris de vos utilisateurs et contribuera même à améliorer un peu votre référencement. Enfin, le favicon sera le premier indicateur visuel de l’internaute lorsque la page prendra un peu plus de temps à charger que d’habitude. Vous l’aurez compris, le favicon est avant tout un élément visuel qui vient améliorer l’expérience de l’utilisateur.
Créer un favicon avec Photoshop
Il existe plusieurs outils pour créer un favicon et tout dépendra de votre envie. Pour un maximum de simplicité, vous pouvez choisir d’utiliser des outils en ligne ou directement Photoshop. Vous obtiendrez rapidement votre favicon et pourrez ensuite l’intégrer à votre site Web.
Autre solution, comme pour les icônes flat design, Photoshop est une solution idéale pour réaliser votre favicon. Travaillez alors sur un format carré que vous exporterez en .png, .gif ou encore .jpeg afin de répondre aux exigences du plus grand nombre de navigateurs. Si le format .ico, format propriétaire Windows, était autrefois privilégié, vous n’êtes plus obligé de vous y astreindre maintenant. Néanmoins, vous pouvez facilement convertir votre image dans ce format si vous le souhaitez en utilisant des outils en ligne comme celui-ci.
Démarrer Photoshop en version 32bits et créer un nouveau document de 16px/16px en 72 dpi
Créer votre icône. N’oubliez pas que votre favicon doit rester simple à cause de sa petite taille. Ainsi, on évite les textes, les traits fins ou les images avec trop de détails pour obtenir un résultat visuellement équilibré.
Intégrer votre nouveau favicon dans votre site Web
Dernière étape maintenant, il ne vous reste plus qu’à intégrer votre favicon fraichement réalisé à votre site Web. Pour cela, commencez tout d’abord par le placer dans le dossier image de votre site Web sur votre serveur. Il vous suffit ensuite de l’inclure dans le fichier header.php de WordPress ou entre les balises <head> et </head> de votre site Web en utilisant la balise <link rel="icon" type="image/png" href="favicon.png">.
