Un mashup des mots "favoris" et "icône", le favicon est le minuscule graphisme qui s'affiche devant le titre du site dans les onglets de votre navigateur et dans vos favoris.
Il va servir à identifier votre site. En effet, il reprend généralement une partie du logo ou est une version ultra simplifiée du logo.
En tout cas il doit être en cohérence visuelle avec votre image, votre site ou éléments de votre charte graphique. Et pour être efficace, il doit être facilement identifiable et mémorisable.
En gros, si je vous dis ça : 
(bon,c'est un peu facile !) 
Vous voyez le principe ? Vous les avez identifiés très facilement, n'est-ce pas ?
Si comme moi, vous gardez des tas d'onglets ouverts, vous pourrez repérer plus facilement les sites grâce à leur favicon, si celui-ci est bien conçu. Même chose pour les retrouver dans vos favoris. Vous pouvez aussi voir les favicons de vos sites préférés dans certains écrans d'accueil de navigateur, selon vos paramètres.
Petit mais costaud, tout comme votre logo et vos autres éléments graphiques et visuels, le favicon vient renforcer votre image pour en faire une image complète, cohérente et plus forte.
Le favicon fait partie des détails, des finitions, d'un site. Et, comme pour n'importe quelle réalisation (pensez à une construction de maison par exemple), les détails et les finitions c'est très important visuellement, ils viennent confirmer le côté "pro" de la réalisation. La cerise sur le gâteau.
Puisqu'il permet d'identifier votre site, il y a aussi une importance évidente dans le fait que les visiteurs vont retrouver plus facilement votre site en faisant l'association avec votre favicon.
Sans qu'il soit d'une importance capitale pour le référencement du site, il joue son petit rôle quand même à ce niveau. En effet, les robots lors du crawl de votre site noterons sa présence ou bien l'indiqueront en erreur 404 s'il est non-existant. Et l'on sait (enfin, si vous avez bien lu mon article sur les pages 404 personnalisées), que la multiplication des erreurs 404 ce n'est pas idéal pour le référencement d'un site.
En somme, il relève plutôt du détail, mais il est assez primordial d'accorder une importance aux détails, il en va de l'image que vous renvoyez.
La difficulté, c'est de créer une image qui est dans un petit, mais vraiment tout petit, format. Il va s'afficher la plupart du temps en 16px par 16px. Il est parfois aussi affiché en plus grand 32x32px ou 48x48px, par exemple sur la page d'accueil de votre navigateur.
Pas évident donc de créer le bon graphisme qui va être lisible, clair, faire penser à votre site ou entreprise, et qui doit aussi tenir dans un carré parfait. On pourra rarement écrire un mot de plus de 4 lettres par exemple. Quand on créé l'image et qu'on la visualise en 16x16 pixels on est souvent surpris de voir à quel point c'est petit ! On peut passer par pas mal de tests et de modifs avant d'arriver au favicon parfait.
Le favicon doit représenter et rappeler votre image, votre site. Souvent on s'inspire du logo, en créant une version très allégée. On utilise parfois juste une ou quelques lettre(s) initiale(s) de la marque, entreprise ou nom du site. Ou encore il peut être un symbole, un élément de votre identité visuelle. On en verra pas vraiment les détails, aussi le favicon est une image extrêmement épurée.
Une fois que vous avez créé votre image, vous pouvez l'exporter dans le format de votre choix.
Souvent en format .png pour gérer la transparence ou en .svg qui gère bien les redimmensionnements, ou encore en .gif pour un favicon animé (bien que pas idéal pour une bonne interprétation sur tous les navigateurs, ça peut être tentant) ou .jpg.
Il existe aussi un format spécialement dédié aux favicon .ico (santiaaaanooo), on l'aime pour son nom, mais celui-ci est de moins en moins utilisé et n'apporte rien de spécial de plus que les autres formats.
Pour faciliter le travail des navigateurs et robots des moteurs de recherches, la coutume veut que cette image soit nommée favicon (et extension de votre choix).
Vous pouvez ensuite envoyer votre image par FTP dans le dossier racine de votre hébergement.
Si vous utilisez un système CMS (wordpress, joomla, bla bla bla...), vous devriez avoir la possibilité aussi de charger votre favicon personnalisé à partir des options ou paramètres.
Si vous tapez directement dans le code (html, php...), dans vos fichiers de pages et pour le fichier index, vous pouvez ajouter cette ligne entre les balise head de votre site :
Remplacer la partie type en fonction de l'extension de votre favicon et le "favicon.ico" par le nom et extension exacts de votre favicon, par exemple :
Tout comme la page 404 ou les propriétés opengraph, j'aime bien garder la création / mise en place du favicon pour la fin quand je réalise un site. C'est la petite touche finale, le chouchoupinou du détail :)
Si vous venez de réaliser que vous avez une chanson de marin dans la tête, c'est tout à fait fortuit :)
