RENDRE VOTRE SITE WEB OFFICIEL AVEC SON PROPRE FAVICON PERSONNALISÉ

RENDRE VOTRE SITE WEB OFFICIEL AVEC SON PROPRE FAVICON PERSONNALISÉ

Une favicon est la petite icône personnalisée qui apparaît dans l’onglet du navigateur, juste à gauche du titre de la page. Il s’agit le plus souvent du logo d’un site web réduit à 16 X 16 pixels. Vous trouverez ci-dessous un exemple de site qui a une favicon et un autre qui n’en a pas.

Lorsque quelqu’un place votre site dans ses favoris, votre favicon apparaîtra avec le titre de la page dans sa liste de favoris. C’est un moyen efficace de vous démarquer et de donner à votre site une image professionnelle et agréable.

Si votre site web n’a pas encore de favicon, ce guide simple vous aidera à en créer une et vous expliquera comment l’afficher lorsque les visiteurs viennent sur votre site. Même si vous n’êtes pas très calé en matière de technologie, il est en fait beaucoup plus facile que vous ne le pensez de créer votre propre favicon personnalisée.

Étape 1 : Créer votre image
Si vous avez déjà un logo ou une image qui représente votre site, il suffit d’ouvrir ce fichier avec un éditeur d’images comme Adobe Photoshop ou Fireworks. Si vous n’avez pas encore un tel éditeur sur votre ordinateur, d’autres options sont disponibles, comme pixlr.com, une excellente alternative en ligne qui est gratuite.

Si vous avez beaucoup d’espace blanc supplémentaire autour de votre logo, veillez à le recadrer. Si votre logo est un peu plus complexe et ne s’affiche pas bien comme une image 16 X 16, vous devrez peut-être le simplifier, voire utiliser une image différente. Toutefois, si vous optez pour cette solution pour votre favicon, vous devriez toujours essayer d’incorporer les mêmes couleurs primaires de votre site web dans la nouvelle image. Bien qu’il soit acceptable d’utiliser une image différente, il est recommandé d’utiliser votre logo dans la mesure du possible pour aider l’entreprise dans ses efforts d’image de marque.

Une fois que vous avez réduit la taille de l’image à 16 X 16 pixels, enregistrez votre fichier au format .jpg, .png, .gif, .bmp ou .tif.

Découvrez comment travailler avec nous !

Étape 2 : Conversion de votre image
Vous devez maintenant convertir votre image en un fichier .ico. Il existe plusieurs outils en ligne que vous pouvez utiliser pour ce faire. Un bon générateur d’icônes gratuit est disponible sur prodraw.net. Il vous suffit de télécharger votre image, de sélectionner la taille de l’icône, et voilà. Vous pouvez télécharger votre tout nouveau fichier .ico.

Étape 3 : Téléchargez votre image
Maintenant que vous avez votre fichier favicon.ico, vous pouvez le télécharger dans le répertoire racine de votre site. Ne le placez dans aucun dossier. L’image doit être visible lorsque vous vous rendez sur www.yourdomain/favicon.ico après l’avoir téléchargée (en remplaçant bien sûr « votredomaine » par votre nom de domaine réel). Ne placez pas le favicon dans un dossier d’image tel que : www.yourdomain/images/favicon.ico.

Étape 4 : Ajouter le code de base
La plupart des navigateurs modernes peuvent détecter que votre favicon est présente dans votre répertoire racine et l’afficher dans l’onglet du navigateur. Bien que vous n’ayez pas besoin d’ajouter de code à vos pages, vous voudrez tout de même ajouter du code simple dans la section de votre HTML pour vous assurer que tous les navigateurs affichent correctement votre favicon. Vous trouverez ci-dessous le code que vous devrez ajouter.

N’oubliez pas que la section de votre page web contiendra d’autres éléments, tels que la balise titre et la méta-description, ainsi que des références aux fichiers CSS dont vous disposez. Le code ci-dessus peut être ajouté n’importe où entre le début et la fin .

Note : Le type MIME « vnd.microsoft.icon » a remplacé l’ancien type « image/x-icon » comme type MIME officiel et standardisé pour les fichiers .ico sur le web.

 

Favicons pour les appareils Apple

Vous pouvez également créer des favoris pour les appareils Apple iOS. Il vous suffit de créer 4 tailles différentes de votre icône, et de les enregistrer sous forme de fichiers .png. La taille par défaut est de 57 X 57 pixels. Apple recommande également d’utiliser des coins à 90 degrés au lieu de coins arrondis lors de la création de ces images. Après la création de ces fichiers images, il vous suffira d’ajouter ce code dans la balise de votre HTML.

Si une favicon statique n’est pas assez cool pour vous, voici un excellent guide sur la création de favicons animées http://www.wikihow.com/Make-an-Animated-Favicons.

Il existe plusieurs autres excellents outils en ligne ainsi que différentes façons de créer une favicon personnalisée. Si vous avez une meilleure méthode ou un outil préféré, veuillez partager vos idées dans les commentaires ci-dessous.