Créer un favicon multisupport pour ton site

Want create site? Find Free WordPress Themes and plugins.

Je ne savais pas comment démarrer cet article alors je vais juste te dire que si tu n’as pas de favicon sur ton site, tu vas apprécier la suite !

WTF : What The Favicon ?

Un favicon, c’est une petite image qui s’affiche à côté du titre de ton site, dans les onglets de ton navigateur par exemple.

Exemple de favicon

 

Oui oui ça va, je vois déjà les commentaires du type #GoogleAddict en voyant ma barre de favoris …

Parenthèse close, le favicon est en quelques sortes l’image qui permettra d’identifier en un coup d’œil ton site, donc sans lire le titre.
Mais il faut savoir qu’aujourd’hui, le favicon n’est plus uniquement utilisé dans les onglets de navigation. Je suis sûr à 99.99% que toi, lecteur du Blog du khabouch, tu possèdes un téléphone portable ? Si tu dis non, tu es un menteur ou alors il ne te reste plus qu’à mettre ton épée au fourreau et partir en croisade.
Donc si tu enregistres le site khabouch.com dans les favoris de ton navigateur mobile, tu verras que notre favicon (qui est la petite fusée de notre logo) sera utilisé comme image pour illustrer notre site. Pas mal du tout avoue ?

Montage

 

« Hey ! Moi aussi je veux un favicon stylé ! »

T’as cru qu’on allait faire cet article sans te le dire ? Ah tiens, bonne idée, on y songera à l’avenir …

Un favicon simple, est une petite image (16px sur 16px en général) au format ICO ou PNG à héberger sur le serveur web de ton site. Ensuite, il te faut placer dans son en-tête (donc la balise <head>) la ligne de code suivante :

Le problème, c’est que ton favicon, obtenu de la sorte, ne permet pas d’être retenu par les appareils de Microsoft ou ceux d’Apple, par exemple pour l’avoir en signet comme montré plus haut ou bien sur l’écran d’accueil de l’interface Metro de Windows 8.
La solution, pour pas trop s’embêter avec le code, c’est d’aller faire un petit tour sur ce générateur de favicon :

Les choses sérieuses commencent – Favicons iOS et Android

Donc une fois sur le site, il t’est demandé d’envoyer l’image qui te servira de favicon dans une taille comprise entre 70×70 et 260×260. Tout est en anglais mais relativement bien expliqué, même pour un francophone.
Une fois que tu as envoyé ton image, le générateur va simuler l’application de ton favicon sur l’interface d’iOS. Tu peux alors régler la couleur de l’icône si tu as uploadé un PNG en transparence, et même changer le padding (marges intérieures).
Si tu as envoyé un JPG, tu n’as rien à modifier en général.

Favicon pour iOS et Android

 

Et le favicon de Windows 8 alors ?

Patience ! On y arrive …
Savais-tu que tu pouvais mettre directement dans ton écran d’accueil Windows 8 un lien internet (un favori quoi) ? Du coup, on va essayer de faire ça proprement. Dans le second bloc, dédié justement au favicon Windows, je te conseille d’uploader une version soit blanc, soit noir, de ton favicon au format PNG, avec la transparence (exemple avec notre petite fusée). Ensuite, tu n’as plus qu’à choisir ta couleur dominante pour la couleur de la tuile, et le tour est joué !

Favicon pour Windows

 

Placer ton favicon sur le site

Enfin le tour est joué, façon de parler …
Il te faut générer le favicon quand même en cliquant sur le bouton dédié (pas besoin de tuto pour ça). Et là, pif paf pouf, voilà du code !
No soucy man, tu es sur le Blog du khabouch, il peut rien t’arriver … ou presque !

Donc c’est très simple, il te suffit de suivre les instructions. D’abord tu télécharges ton pack de favicons (au format ZIP), et une fois descendu en local tu le dézippes. Tu vas voir, il y a une quinzaine d’images et un fichier. Tu ne supprimes rien, tu gardes tous les fichiers ensemble et tu envoies tout à la racine de ton site, sur ton serveur. Comme expliqué dans la deuxième consigne (ça va presque passer pour du plagiat), si ton site est http://tonsite.com, l’emplacement des fichiers doit être http://khabouch.com/favicon.ico.

Génération du code pour le favicon

 

Dernière étape, la plus délicate mais pas de panique, c’est de ses échecs qu’on apprend le mieux (je te mets trop en confiance là) !
Plus sérieusement, tu as dû obtenir le code présent sur l’image au-dessus.

Ce que je te conseille, c’est de tout copier-coller dans un fichier TXT et de l’enregistrer dans un répertoire concernant ton site, pour le garder bien au chaud, on sait jamais.

Ensuite, tu colles un nouvelle fois ce code dans la balise <head> de ton site, après l’appel de la feuille de style CSS par exemple (si tu en utilises une mouahah). Pour ceux qui utilisent WordPress, il faut coller ceci dans la balise <head> qui se trouve dans le fichier header.php.

Partager nous

Did you find apk for android? You can find new Free Android Games and apps.