Comment créer un favicon (logo d'URL) pour son site web

Le favicon (icône de favoris) ajoute une touche visuelle discrète mais efficace à votre site. Petites images utilisées par les navigateurs dans les onglets et la barre d'adresse, elles affichent un logo ou image associée à la marque, identifiant visuel à côté du titre/URL. Particulièrement utiles en navigation par onglets : l'espace texte pour les titres rétrécit drastiquement avec beaucoup d'onglets ouverts.

Étape 1 : Concevoir l'icône

Créez l'icône dans un logiciel graphique (Photoshop, Corel Draw, ou gratuits : Paint.NET, Pixlr). Reprenez un logo/image existant de votre marque et adaptez-le aux standards favicon : dimensions carrées, taille max supportée 256×256 px. Recadrez/redimensionnez pour un carré 256×256 si vous utilisez un « packer » d'icônes multi-tailles. Sinon, visez 16×16 px pour une version unique.

Étape 2 : Exporter en PNG

Exportez en PNG (format standard W3C pour favicons). Certains navigateurs acceptent JPG mais non standard. Les packers d'icônes peuvent ne pas fonctionner avec d'autres formats. GIF et ICO aussi supportés.

Étape 3 : Packer en ICO (recommandé)

Utilisez un convertisseur ICO (ex: en ligne). Il traite le PNG, le formate pour plusieurs tailles supportées (16, 32, 48, 256 px) et les embarque dans un seul fichier .ico. L'ICO fournit des favicons haute résolution pour les appareils qui les supportent.

Étape 4 : Héberger le fichier

Connectez-vous à votre hébergeur, uploadez le PNG ou ICO sur votre serveur média. Copiez l'URL du fichier (nécessaire pour l'étape suivante).

Étape 5 : Insérer le code HTML

Dans l'éditeur de votre site, ajoutez ce code dans la section <head> de vos pages :

<!-- Pour PNG -->
<link rel="icon" type="image/png" href="URL_DE_VOTRE_FICHIER.png">

<!-- Pour ICO -->
<link rel="shortcut icon" href="URL_DE_VOTRE_FICHIER.ico">

Si vous n'utilisez pas de CMS ou d'inclusion centralisée de <head>, ajoutez le code sur chaque page voulue. Le favicon apparaît après sauvegarde et mise à jour.

Astuce

Photoshop, Corel Draw, Paint.NET, Pixlr conviennent pour créer/formater l'icône.

⚠ Avertissement

Certains navigateurs associent automatiquement un fichier à /favicon.ico comme favicon, mais le W3C le déconseille : pas standard universel, contraire aux principes d'architecture web. De plus, beaucoup d'hébergeurs/CMS n'autorisent pas de placer des médias hors dossiers médias, rendant cette pratique impossible.