Comment créer un favicon.

Ouvrez le Générateur de Favicon / ICO et choisissez Image. Téléchargez un PNG, JPG, JPEG, WebP ou GIF, ou sélectionnez Essayer un échantillon. L'exemple travaillé utilise favicon-orbit.png, une marque d'orbite violette de 512 × 512 pixels avec des coins transparents. L'entrée est de 202,491 octets.

Pour une marque sans logo fini, sélectionnez Texte sur la page de l'outil. Entrez une ou deux lettres et choisissez Continuer. L'éditeur propose des polices Sans moderne, Serif classique et Monospace, ainsi que des couleurs de texte et d'arrière-plan distinctes. Jusqu'à trois caractères sont acceptés, mais les caractères supplémentaires peuvent devenir difficiles à reconnaître à de petites tailles.

Conservez l'illustration originale. Le générateur crée de nouveaux fichiers d'icônes et ne remplace pas la source. L'entrée GIF devient une icône fixe plutôt qu'un favicon animé.

Pour un monogramme, le menu Police commence par trois styles inclus. Sélectionnez Utiliser les polices système sur un navigateur de bureau pris en charge et autorisez l'accès pour ajouter les polices installées sur votre appareil. Utilisez les chevrons précédent et suivant pour comparer les polices adjacentes, ou choisissez une famille et inspectez l'aperçu en direct, surtout à 16 pixels. Les polices restent sur votre appareil ; les styles inclus fonctionnent sans autorisation.

L'éditeur affiche des onglets de navigateur clairs et sombres ainsi que des aperçus aux tailles d'icônes courantes. Vérifiez d'abord l'exemple de 16 pixels ; c'est le test le plus strict pour savoir si la marque reste reconnaissable. L'aperçu Apple Touch représente une exportation de 180 pixels et est affiché plus petit dans l'espace de travail.

Sur un téléphone, ouvrez Paramètres. Laissez Créer à partir de réglé sur Image téléchargée et Ajustement de l'image réglé sur Afficher l'image entière. Pour cet échantillon, réglez Espace autour du contenu sur 0 et activez Arrière-plan transparent. La source contient déjà sa propre forme violette arrondie et des marges claires, elle n'a donc pas besoin d'un arrière-plan coloré supplémentaire.

Avec une source différente, Afficher l'image entière conserve ses bords, tandis que Remplir l'icône peut les recadrer. Carré arrondi, Carré et Cercle définissent la forme extérieure. L'arrière-plan transparent préserve les zones claires mais ne peut pas supprimer un arrière-plan opaque déjà dessiné dans une photo. Examinez le plus petit aperçu après chaque changement de cadrage.

Sous Télécharger, choisissez Pack d'icônes de site web (ZIP) pour cet exemple. Laissez Nom du site web sur My website pour l'exemple, ou remplacez-le par le nom de marque réel pour votre propre projet. Ce nom est utilisé dans site.webmanifest ; il n'est pas ajouté en tant que texte sur l'image.

Sélectionnez Démarrer. Le navigateur génère un favicon.ico à sept cadres avec des images carrées de 16, 24, 32, 48, 64, 128 et 256 pixels. Il crée également des icônes PNG de 16, 32, 48, 180, 192 et 512 pixels, un manifeste et des instructions d'installation. Le résultat est un seul fichier ZIP plutôt qu'un bouton de téléchargement séparé pour chaque icône.

Si vous n'avez besoin que d'un favicon.ico classique, choisissez plutôt ICO multi-taille. C'est utile lorsqu'une plateforme de site web accepte un téléchargement ICO et n'a pas besoin d'un pack séparé.

Télécharger enregistre website-icons.zip. L'exemple concret contient neuf fichiers et pèse 304,351 octets. La comparaison ci-dessus montre la source de 512 pixels à côté du cadre authentique de 256 pixels extrait du ICO exporté, plutôt qu'une capture d'écran de navigateur simulée.

Extrayez le ZIP, téléchargez les fichiers d'icônes à la racine de votre site web et lisez INSTALL.txt. Il inclut les balises de lien HTML pour le ICO, l'icône PNG, l'icône Apple Touch et le manifeste web. Si vous placez les fichiers dans un sous-dossier, mettez à jour à la fois les chemins HTML et les chemins d'icônes à l'intérieur de site.webmanifest.

Vérifiez votre site dans un nouvel onglet de navigateur et sur les appareils qui vous intéressent. Les navigateurs peuvent mettre en cache les favicons, donc une ancienne icône ne prouve pas immédiatement que l'installation a échoué. Gardez l'image source et le pack téléchargé avant d'actualiser l'éditeur, car une actualisation ramène à la page principale de l'outil.