EasyTutoriel
L'image de marque ou le logo de votre site web est un élément très important pour se distinguer facilement des autres... Le Favicon, est beaucoup plus important !
Le Favicon, ou l'icône favoris de votre site web permet non seulement de faciliter la distinction de votre site web des autres sites ouverts dans votre navigateur, mais permet aussi de graver votre image de marque dans tout ce qui est barre de titre, raccourcis ou favoris...
Dans ce tutoriel, vous allez découvrir comment créer un Favicon de A à Z !
Comment créer le Favicon
Dans ce tutoriel je vais vous montrer deux méthode pour créer un Favicon, la première est la plus facile...
Méthode 1 : Créer le Favicon avec favicon.cc
L'avantage de cette méthode, c'est la rapidité... Mais nécessite une connexion internet 😊
Ouvrez ce site : http://www.favicon.cc
Pour importer une image, cliquez sur "Import Image"... (Vous même même créer un favicon sans rien importer, tout en utilisant le panneau de couleurs à droite...)
Cliquez sur le bouton pour importer une image...
Sélectionnez votre image et cliquez sur "Ouvrir"...
Mettez "Keep dimensions" pour ne pas faire des changements au niveau des dimensions de votre logo, ou votre image de marque...
Vous pouvez en utilisant l'outil de transparence, créer un arrière plan transparent pour votre favicon, voir l'image ci-dessous...
Pour télécharger votre favicon, cliquez en dessous sur "Download Favicon"...
Envoyez ensuite votre Favicon sur votre serveur et descendez en-dessous pour voir comment l'ajouter sur votre site !
Vous pouvez même utiliser d'autres sites pour créer votre favicon, voici une liste :
- http://www.favicon.fr/
- http://www.favicon.hu/
- http://tools.dynamicdrive.com/favicon/
- http://favikon.com/
Si vous voulez créer un Favicon en utilisant le MS Paint, lisez ce qui suit...
Méthode 2 : Créer le Favicon en utilisant le Paint
Commencez par ouvrir le Paint, cela en utilisant la barre de recherche dans votre menu Démarrer...
Tapez Ctrl+O pour ouvrir une image... Ou utilisez le fameux menu comme dans l'image ci-dessous...
Sélectionnez votre logo et cliquez sur Ouvrir...
Enregistrez-sous l'image juste après l'importation...
Comme le Favicon admet uniquement 16 couleurs, choisissez comme type le "Bitmap 16 couleurs"... Cliquez Enregistrer...
Le résultat après l'enregistrement, il faut faire des changements...
Utilisez le Paint pour colorer votre logo comme il faut...
Cliquez ensuite sur Image > Redimensionner...
Mettez en premier la taille 32x32 et enregistrez votre fichier en tant que PNG...
Puis redimensionnez la taille en 16x16 pixels...
Enregistrez-le cette fois en .ico... sans oublier le type en Bitmap 16 couleurs...
Voici le résultat, vous pouvez créer un plus pro en utilisant le Paint.NET ou le Photofiltre... Je n'ai jamais utilisé le Paint !
POURQUOI 2 FICHIERS ? En fait les navigateurs modernes (sauf le IE) acceptent tous la version PNG du Favicon, l'avantage d'un Favicon en PNG c'est la transparence alpha, ce qui n'est pas valable pour le Favicon .ico...
Dans la partie qui suit, vous allez voir comment ajouter le Favicon que vous venez de créer sur vote site web...
Comment intégrer le Favicon sur votre site web
Après la création du Favicon, envoyez-le sur l'hébergement de votre site web... Et utilisez les deux lignes de code ci-dessous pour l'intégrer sur votre site...
Dans le code HTML ci-dessous, j'ai mit deux balises <link> dans le <head> de la page du site, si vous utilisez WordPress, il suffit de mettre ces deux lignes dans le fichier header.php de votre thème...
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="http://votresite.com/dossier-images/favicon.ico" />
<link rel="icon" type="image/png" href="http://votresite.com/dossier-images/favicon.png" />
</head>
</html>Dans le code ci-dessus, j'ai mit deux Favicons, PNG et ICO, et comme je l'ai dit en haut, il est suffisant d'utiliser le Favicon .ICO, parcequ'il marche avec tous les navigateurs, y compris le meilleur, qui est Internet Explorer 😀
Et voilà !
N'hésitez pas à poster vos commentaires si vous avez des questions, des remarques ou des critiques 😊
salam soufiane , un grand merci a vous , tuto bien expliqué sur les deux plans (technique et pédagogique)
Merci soufiane
j'ai partager suf faccebook/google +1