Aller au tutoriel
lil cactus

Comment créer un fichier favicon ICO

Débutant4 minutesMis à jour le

En bref

Dans Lil Cactus, ouvrez votre illustration et choisissez Fichier puis Exporter puis ICO… Dans le champ Nom du fichier, remplacez le nom par favicon.ico. Sous Tailles d’icône, laissez les six tailles cochées (de 16 à 256 px ; c’est le réglage par défaut), puis cliquez sur Exporter. Le téléchargement contient les six versions carrées dans un seul fichier ICO.

Les six tailles d’icône de la feuille exportées, sur des bandes claire et sombre : 16, 32, 48, 64, 128 et 256 pixels sur chaque rangée du haut, avec 16 et 32 pixels agrandis quatre fois en dessous
Les six tailles contenues dans favicon.ico, sur fond clair et sur fond sombre : 16, 32, 48, 64, 128 et 256 px sur la rangée du haut, avec 16 et 32 px agrandis 4× en dessous.
Durée
4 minutes
Niveau
Débutant
Il vous faut
Une icône ou une autre illustration ouverte dans l’éditeur
Formats pris en charge
PNG, JPG, SVG, PSD et projets Lil Cactus (la transparence est conservée)
Ouvrir l’exemple dans Lil CactusUtiliser votre propre photo

Gratuit, sans inscription. Votre photo reste sur votre ordinateur.

Un favicon est la petite icône affichée à côté de l’onglet ou du favori d’un site web. Les formes simples aux grandes zones de couleur se lisent plus facilement en petit. Cet exercice utilise une feuille bicolore avec une seule nervure claire.

Exporter un favicon ICO en quatre étapes

  1. Ouvrir l’illustration

    Ouvrez l’illustration d’entraînement depuis cette page. Pour votre propre fichier, choisissez Fichier puis Ouvrir… et sélectionnez l’image. Le damier autour de la feuille indique son fond transparent. Un bref message sur le lissage des bords SVG peut apparaître ; il se ferme tout seul.

    Menu Fichier avec Ouvrir entouré
    Chargez l’illustration à transformer en icône.

  2. Choisir Fichier › Exporter › ICO…

    Choisissez Fichier puis Exporter puis ICO… La boîte de dialogue Exporter en ICO s’ouvre avec un aperçu de l’illustration.

    Menu Fichier et sous-menu Exporter avec ICO entouré
    Ouvrez la boîte d’exportation ICO.

  3. Choisir le nom du fichier et les tailles

    Dans le champ Nom du fichier, remplacez le nom par favicon.ico. Dans Tailles d’icône, laissez cochées les cases 16, 32, 48, 64, 128 et 256. Ce sont les six tailles disponibles.

    Champ Nom du fichier de l’export ICO rempli avec favicon.ico, entouré
    Nommez le fichier d’icône téléchargé.
    Options d’exportation ICO avec 16, 32, 48, 64, 128 et 256 cochés et le groupe Tailles d’icône entouré
    Chaque nombre donne à la fois la largeur et la hauteur d’une icône carrée, en pixels.

  4. Exporter l’ICO

    Vérifiez que le bas de la boîte indique 6 tailles d’icône, puis cliquez sur Exporter. Votre navigateur enregistre favicon.ico selon ses réglages de téléchargement ou d’emplacement d’enregistrement.

    Bas de la boîte ICO affichant 6 tailles d’icône, Annuler et le bouton Exporter entouré
    Vérifiez le nombre de tailles sélectionnées avant d’exporter.

Utiliser l’icône sur votre site web

Envoyez favicon.ico dans le dossier racine de votre site, pour qu’il s’ouvre à l’adresse /favicon.ico. Vous pouvez aussi y faire référence dans la section <head> de la page avec <link rel="icon" href="/favicon.ico"> (voir la référence de MDN sur les icônes).

Les navigateurs mettent les favicons en cache : une icône mise à jour peut demander un rechargement ou un certain temps avant d’apparaître.

Si l’icône de 16 px est difficile à lire

Simplifiez l’illustration : moins de détails, des formes plus grandes et des traits plus épais. La figure en haut de cette page montre ce qui reste lisible à 16 px : les deux grandes zones de couleur de la feuille et son unique nervure épaisse.

Vérifiez que la forme ressort sur les barres d’onglets claires comme sombres. Dans la figure, la moitié vert foncé de la feuille disparaît presque sur le fond sombre, et c’est la moitié vert clair qui porte la forme. Une illustration d’une seule couleur sombre y serait difficile à voir.

Pour la suite

Favicons ICO : questions et réponses

Peut-on transformer un PNG ou un JPG en ICO ?

Oui. Dans Lil Cactus, les deux formats peuvent être ouverts puis exportés avec les réglages ICO. L’illustration visible devient l’icône.

Un fichier ICO peut-il avoir un fond transparent ?

Oui. Dans Lil Cactus, l’ICO conserve la transparence déjà présente dans votre illustration. Supprimez d’abord le fond uni si vous voulez que l’espace autour de l’icône soit vide.

Que devient une image rectangulaire dans un ICO ?

Dans Lil Cactus, l’image est ajustée à l’intérieur de chaque carré sélectionné, sans déformation. Une marge transparente comble l’espace restant.

Peut-on exporter un ICO avec une seule taille ?

Oui. Dans Lil Cactus, ne laissez cochée que la taille voulue sous « Tailles d’icône ». L’ICO ne contiendra que cette taille.

Peut-on créer un ICO de 512 × 512 px ?

Non. Dans Lil Cactus, la plus grande taille d’ICO est 256 × 256 px. Utilisez le PNG pour des dimensions en pixels plus grandes.

Mon image est-elle envoyée sur un serveur quand je crée un ICO ?

Non. Lil Cactus crée l’ICO dans votre navigateur et le télécharge sur votre appareil ; l’image n’est pas envoyée à un serveur. Les statistiques d’utilisation facultatives sont décrites sur la page de confidentialité.

Publié le  · Vérifié le