Comment créer un favicon

Lorsqu’ils ont été initialement introduits, le icône de favori désigné une image à afficher lorsque les utilisateurs ont enregistré un URL raccourci sur leur bureau. Aujourd’hui, le favicon de votre site Web peut être affiché dans les onglets du navigateur, les clients de messagerie, les partages sur les réseaux sociaux et les résultats de recherche.

Un favicon est désormais un élément de marque nécessaire sur chaque site Web, mais il est souvent négligé… il ne devrait pas l’être. Les favicons sont généralement affichés à divers endroits dans les navigateurs Web pour aider les utilisateurs à identifier et à ajouter des sites Web à leurs favoris. Voici quelques points clés concernant les favicons :

• Onglets du navigateur: Lorsque les utilisateurs ouvrent un site Web dans un navigateur Web, le favicon s’affiche dans l’onglet du navigateur à côté du titre de la page. Cela fournit un identifiant visuel pour l’onglet ouvert, permettant aux utilisateurs de trouver et de basculer plus facilement entre plusieurs onglets.
• Signets et favoris: Lorsque les utilisateurs marquent ou enregistrent un site Web comme favoris, le favicon est souvent affiché à côté du nom du site Web dans le menu des signets ou des favoris. Il aide les utilisateurs à identifier et à accéder rapidement à leurs sites Web enregistrés.
• Barre d’adresse du navigateur: Dans certains navigateurs, lorsque les utilisateurs visitent un site Web, le favicon s’affiche dans la barre d’adresse ou l’omnibox du navigateur. Cela ajoute un élément visuel à l’URL du site Web.
• Résultats de recherche: Certains moteurs de recherche peuvent afficher des favicons à côté des résultats de recherche, aidant ainsi les utilisateurs à identifier facilement les sites Web dans les listes de recherche.

Un favicon est une petite représentation emblématique d’un site Web qui améliore l’expérience utilisateur en fournissant des repères visuels pour l’identification du site Web, la mise en signet et la gestion des onglets dans les navigateurs Web. C’est un élément important de la conception Web et de l’image de marque.

Types de fichiers d’icônes

À l’origine, ils exigeaient un OIC fichier, mais ont évolué avec de nombreuses plates-formes capables d’afficher PNG et SVG des dossiers. Les fichiers ICO peuvent être considérés comme une compilation de plusieurs images d’icônes en un seul fichier. Lorsque vous créez un fichier ICO, vous compilez différentes images d’icônes de différentes tailles et profondeurs de couleurs dans un seul fichier avec une structure spécifique. Voici comment fonctionne un fichier ICO :

1. Images d’icônes multiples: Un fichier ICO contient généralement plusieurs images d’icônes avec différentes dimensions et profondeurs de couleur. Ces images représentent la même icône mais sont conçues pour être affichées dans des tailles différentes sans perte de qualité.
2. Répertoire d’icônes: Dans le fichier ICO, il existe un répertoire d’icônes qui spécifie les attributs de chaque image d’icône, y compris sa taille, sa profondeur de couleur et son emplacement dans le fichier.
3. Informations d’en-tête: Le fichier ICO comprend également des informations d’en-tête qui fournissent des détails essentiels sur le fichier, tels que le nombre d’images d’icônes stockées dans le fichier.
4. Données d’images: Chaque image d’icône du fichier ICO est stockée sous forme de données d’image brutes sans compression. Cela permet d’accéder et d’afficher rapidement les images d’icônes individuelles par le logiciel.
5. Récupération d’icône: Lorsqu’une application ou le système d’exploitation doit afficher une icône associée à un fichier, un dossier, un raccourci ou une application, il peut récupérer l’image d’icône appropriée à partir du fichier ICO en fonction de la taille et de la profondeur de couleur souhaitées.

Le choix du format de favicon dépend de vos exigences de conception et du niveau de compatibilité que vous souhaitez atteindre. ICO est un choix sûr pour une compatibilité plus large, PNG offre une qualité et une transparence sans perte, et SVG est idéal pour l’évolutivité et les conceptions complexes, mais nécessite un examen attentif de la prise en charge et des solutions de secours du navigateur. L’utilisation d’une combinaison de formats, comme le montrent les exemples suivants, peut garantir une compatibilité et une qualité maximales pour le favicon de votre site Web.

Comment créer un fichier ICO

C’est assez bizarre, à mon avis, qu’Adobe Illustrator et Photoshop ne créent pas de fichiers .ICO par défaut (des plugins sont disponibles). Cependant, vous pouvez générer chacune des différentes tailles d’image en les utilisant… puis les créer en utilisant l’une des méthodes suivantes :

• Gimp prend en charge nativement les fichiers ICO. Il s’agit d’une plate-forme gratuite et open source disponible pour tous les systèmes d’exploitation.
• ImageMagick est un service gratuit et open source que vous pouvez charger sur votre PC ou Mac, vous permettant de combiner vos multiples fichiers dans un fichier ICO. Exemple de commande :

convert image1.png image2.png image3.png favicon.ico

• Il existe également des outils en ligne qui peuvent vous aider à créer un fichier .ICO, mais vous devrez choisir avec soin. Beaucoup redimensionnent un seul fichier image téléchargé et les compressent mal. Favicon.io est un site en ligne gratuit qui vous permet de télécharger et de créer votre fichier ICO. Utilisez toujours la taille de fichier et la résolution les plus grandes lorsque vous utilisez la plate-forme, car cela créera automatiquement des tailles d’image plus petites.

Vous voudrez expérimenter votre fichier ICO. Le simple fait de réduire la taille de votre logo à une icône carrée de 16 pixels peut le rendre indiscernable. Vous verrez même que le nôtre n’est pas l’intégralité de notre logo, juste le M de notre logo.

Vérifiez le Favicon de votre site Web

Meilleures pratiques HTML pour les favicon

Les navigateurs priorisent la sélection des favicons en fonction de plusieurs facteurs, notamment le format, la taille et la présence de déclarations spécifiques. Voici comment les navigateurs hiérarchisent et sélectionnent généralement les favicons :

1. Priorité du format de fichier: Les navigateurs donnent généralement la priorité aux fichiers .ico lorsqu’ils sont présents, car il s’agit du format favicon traditionnel. Si vous fournissez une favicon .ico en utilisant <link rel="icon" type="image/x-icon" href="https://martech.zone/how-to-make-a-favicon/favicon.ico">il aura souvent préséance sur les autres formats.
2. Priorité à la taille: Les navigateurs prennent également en compte l’attribut size pour sélectionner le favicon le plus approprié au contexte. Si vous spécifiez des tailles différentes pour les favicons .png ou .svg, le navigateur choisira celle qui correspond le mieux aux exigences d’affichage de l’appareil.
3. SVG « n’importe quelle » taille: Lorsque vous utilisez la valeur « any » pour le sizes attribut dans une déclaration de favicon SVG (sizes="any"), cela indique que le SVG peut s’adapter à n’importe quelle taille. Les navigateurs peuvent donner la priorité à un SVG de « n’importe quelle » taille pour garantir qu’il s’adapte bien à différentes résolutions d’écran.
4. La dernière déclaration prévaut: Si vous fournissez plusieurs déclarations de favicon avec le même format et la même taille, le navigateur choisit généralement la dernière déclaration qu’il rencontre dans le HTML. Par conséquent, l’ordre de votre <link> les éléments comptent. Le dernier trouvé sera prioritaire.
5. Revenir à l’icône par défaut: Si aucune des favicons spécifiées ne correspond aux critères du navigateur ou s’il n’y a aucune déclaration de favicon, le navigateur peut utiliser une icône par défaut (par exemple, l’icône du navigateur) ou aucune icône.
6. Préférences de l’utilisateur: Certains navigateurs permettent aux utilisateurs de définir leurs préférences pour les favicons. Dans de tels cas, le choix de l’utilisateur peut remplacer le favicon spécifié par le site Web.

Si vous répertoriez d’abord une déclaration de favicon ICO mais que vous souhaitez que le SVG soit utilisé comme favicon préféré, cela peut ne pas toujours fonctionner comme prévu car certains navigateurs donnent la priorité à la première déclaration de favicon valide qu’ils rencontrent. Cependant, vous pouvez toujours vous assurer que le SVG est le favicon préféré en le spécifiant en dernier et en utilisant le n’importe lequel attribut de taille.

Voici comment procéder :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Website Title</title>

    <!-- Favicon Declarations -->

    <!-- .ico Format (for maximum compatibility) -->
    <link rel="icon" type="image/x-icon" href="https://martech.zone/how-to-make-a-favicon/favicon.ico">

    <!-- .png Format (for modern browsers) -->
    <link rel="icon" type="image/png" href="favicon.png" sizes="32x32">

    <!-- .svg Format (preferred) -->
    <link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any">

    <!-- Alternative Text for Accessibility -->
    <link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any" alt="Your Website Favicon">

    <!-- Additional Sizes (optional) -->
    <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
    <link rel="icon" type="image/png" href="favicon-48x48.png" sizes="48x48">

    <!-- End of Favicon Declarations -->

    <!-- Your other meta tags, styles, and scripts go here -->

</head>
<body>
    <!-- Your website content goes here -->
</body>
</html>

Dans cet exemple, le format .ico est toujours inclus pour une compatibilité maximale, mais le format SVG est spécifié en dernier avec le n’importe lequel attribut de taille. Cette configuration donne une préférence plus élevée au format SVG tout en fournissant le format .ico comme solution de secours pour les navigateurs qui le donnent la priorité. En précisant le SVG en dernier avec le n’importe lequel size, vous augmentez la probabilité que les navigateurs modernes choisissent le SVG comme format de favicon préféré, car il peut s’adapter à différentes tailles.