Bienvenue cher visiteur, avez-vous des questions ? Cherchez-vous des réponses ? Inscrivez-vous et découvrez la communauté qui vous aide :)

Bonjour,

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 !

Si vous n’avez pas encore créé un logo pour votre site web, je vous invite à lire ce tutoriel sur comment créer un logo de A à Z : http://www.easytutoriel.com/comment-creer-un-logo-professionnel-et-creatif-2/

Allons-y !

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 :

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 32×32 et enregistrez votre fichier en tant que PNG…

Puis redimensionnez la taille en 16×16 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 PhotofiltreJe 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]

<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>

[/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 :D

Et voilà !

N’hésitez pas à poster vos commentaires si vous avez des questions, des remarques ou des critiques :)

Soufiane – Easytutoriel.com





Avatar de Soufiane Sabiri
31600

A propos de :

Soufiane est un jeune informaticien, aimant la créativité. Spécialiste en web-design, connait pas mal de choses du monde informatique. Ce passionné aime aider les gens à innover et à en savoir plus du monde informatique...

[fbcomments]

Commentaires :

# hamza depuis 3 années
Avatar de hamza

Merci soufiane
j’ai partager suf faccebook/google +1

# This has to be the most depuis 2 années

This is Incredible Cutting edge great article,great article.

# youcef depuis 1 année
Avatar de youcef

salam soufiane , un grand merci a vous , tuto bien expliqué sur les deux plans (technique et pédagogique)

3 Pings / Trackbacks :

Rédiger un commentaire :

xD oO ^_^ =] =) ;-( ;) :| :woot: :whistle: :sleep: :sick: :police: :p :o :ninja: :mm: :love: :lol: :kiss: :hmm: :evil: :bandit: :angel: :alien: :D :) :( 8)