Comment créer un Favicon pour votre site

Par Trucs et astuces 3 minutes de lecture
Comment creer un Favicon pour votre site

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

123

Cliquez sur le bouton pour importer une image...

133

Sélectionnez votre image et cliquez sur "Ouvrir"...

141

Mettez "Keep dimensions" pour ne pas faire des changements au niveau des dimensions de votre logo, ou votre image de marque...

151

Vous pouvez en utilisant l'outil de transparence, créer un arrière plan transparent pour votre favicon, voir l'image ci-dessous...

161

Pour télécharger votre favicon, cliquez en dessous sur "Download Favicon"...

171

Envoyez ensuite votre Favicon sur votre serveur et descendez en-dessous pour voir comment l'ajouter sur votre site !

181

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

115

Tapez Ctrl+O pour ouvrir une image... Ou utilisez le fameux menu comme dans l'image ci-dessous...

213

Sélectionnez votre logo et cliquez sur Ouvrir...

34

Enregistrez-sous l'image juste après l'importation...

43

Comme le Favicon admet uniquement 16 couleurs, choisissez comme type le "Bitmap 16 couleurs"... Cliquez Enregistrer...

54

Le résultat après l'enregistrement, il faut faire des changements...

64

Utilisez le Paint pour colorer votre logo comme il faut...

74

Cliquez ensuite sur Image > Redimensionner...

84

Mettez en premier la taille 32x32 et enregistrez votre fichier en tant que PNG...

Puis redimensionnez la taille en 16x16 pixels...

93

Enregistrez-le cette fois en .ico... sans oublier le type en Bitmap 16 couleurs...

102

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 !

116

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 😊



Le partage est un plaisir :


Articles recommandés :


2 commentaires : Ajouter un commentaire

  • 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

Publier un commentaire

😊 😉 😀 😄 😆 😛 😂 😁 😎 😏 🥳 😇 🤭 🤣 😘 ❤️ 😍 👍 👏 🙌 🙏 🆒 👮 👽 🥷 🦹 🤔 😐 🤒 😢 😠 😮 😢 😲 😴 😈 🤨 😞