Quels fichiers favicon un site doit-il avoir, et quelles tailles

Un site a besoin d'un petit ensemble de fichiers d'icônes, et la plupart des choix concernent la taille. Placez un favicon.ico contenant des images de 16, 32 et 48 pixels à la racine du site, pour les onglets du navigateur et Windows. Ajoutez une icône Apple touch de 180 pixels pour les écrans d'accueil d'iPhone et d'iPad, ainsi que des icônes PNG de 192 et 512 pixels déclarées dans un manifeste d'application web. Le générateur de favicon crée toutes ces icônes à partir d'un seul logo et écrit les lignes HTML à coller dans vos pages.

Les fichiers et leurs tailles

Le ZIP téléchargé par le générateur contient les sept fichiers. Le fichier favicon.ico est composé de trois images PNG, de 16, 32 et 48 pixels, rangées dans un seul fichier. Chaque icône reprend le même logo, simplement dessiné plus petit. Le générateur part d'une version de 512 pixels de votre image et en tire chaque taille.

Les lignes HTML

Le générateur écrit quatre lignes pour l'en-tête de vos pages :

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

La première ligne pointe vers favicon.ico et le déclare en 48 sur 48. La deuxième donne le PNG de 32 pixels. La troisième désigne l'icône Apple touch, et la quatrième renvoie au manifeste, où les icônes de 192 et 512 pixels sont listées. Le PNG de 16 pixels se trouve dans le ZIP, mais pas dans ces lignes. Les navigateurs cherchent aussi /favicon.ico par eux-mêmes, si bien que le fichier reste trouvé même si la première ligne manque. Gardez les chemins tels quels, sauf si vos fichiers sont rangés ailleurs.

Pourquoi les petites tailles demandent des formes simples

À 16 sur 16 pixels, une icône compte 256 pixels au total. Une icône de 48 pixels en compte 2 304, et la source de 512 pixels en compte 262 144. La plupart des détails d'un logo disparaissent déjà à 16 pixels : un trait fin ou un petit mot devient une tache floue. Utilisez un symbole simple, ou une ou deux lettres bien contrastées.

L'option lettre accepte un ou deux caractères et les dessine en grand au centre de l'icône, en les réduisant s'ils sont trop larges. Les formes proposées sont Carré, Arrondi et Cercle. L'aperçu affiche côte à côte les résultats en 16, 32, 48, 180 et 512 pixels, sur des onglets clair et sombre, pour que vous jugiez les petites tailles avant de télécharger. Les aperçus se mettent à jour quand vous changez la forme, la marge ou le fond, si bien que vous pouvez tester chaque réglage au préalable.

Marge, fond et icône Apple

La marge a trois réglages : Aucune marge, Petite et Grande. Petite laisse vide 10 % de l'icône de chaque côté, et Grande en laisse 20 %. En mode image, Aucune marge recadre l'image sur son carré central, ce qui fait perdre les extrémités d'un logo large. Les réglages avec marge font au contraire tenir toute l'image dans le carré.

Les choix de fond sont Transparent, Blanc et Personnalisé, et Transparent est la valeur par défaut. L'icône Apple touch est toujours opaque. En mode image, ses zones transparentes prennent le fond choisi, ou le blanc si le fond est Transparent. En mode lettre, elles prennent la couleur de fond de la lettre. Les zones transparentes d'une icône Apple touch peuvent apparaître en noir sur iPhone et iPad, c'est pourquoi le générateur les remplit. Les autres tailles conservent la transparence que vous avez choisie. Pourquoi un PNG transparent devient noir explique la cause.

Un favicon est carré, donc un logo large a d'abord besoin d'un cadre carré. Le créateur de photo carrée fait tenir toute l'image dans un cadre 1:1, avec une bordure floutée, blanche, noire ou personnalisée, pour que rien ne soit coupé. Redimensionner l'image permet de fixer des pixels exacts. Avec Conserver les proportions activé et les deux côtés renseignés, l'image entre dans la boîte sans déformation. Les proportions des photos expliquées présente les formats courants.

Les modifications qui mettent du temps à apparaître

Les navigateurs gardent les favicons en cache. Un fichier modifié à la même adresse peut continuer d'afficher l'ancienne icône pendant un certain temps, si bien qu'un simple rechargement suffit rarement. Ouvrez directement l'adresse de l'icône pour vérifier que le nouveau fichier est bien sur le serveur, puis rechargez la page en contournant le cache. Si l'ancienne icône s'affiche encore, donnez un autre nom au nouveau fichier et mettez le lien à jour pour qu'il pointe vers lui.

Comment faire avec fixmint

1. Choisissez Image et déposez votre logo dans la zone, ou choisissez Lettre et saisissez un ou deux caractères.
2. Réglez Marge sur Aucune, Petite ou Grande, et Fond sur Transparent, Blanc ou Couleur personnalisée.
3. Vérifiez les icônes de 16, 32 et 48 px sur les onglets clair et sombre, ainsi que les aperçus de 180 et 512 px.
4. Cliquez sur Télécharger le ZIP pour les sept fichiers, ou sur Télécharger favicon.ico pour ce seul fichier.
5. Cliquez sur Copier le HTML et collez les lignes de HTML pour votre en-tête dans l'en-tête de chaque page.

Cas particuliers

• Votre image reste sur votre appareil. Le générateur crée les icônes dans votre navigateur, et rien n'est envoyé.
• Lettres de deux caractères. Deux caractères sont acceptés et sont dessinés plus petits pour tenir tous les deux, ce qui les rend plus difficiles à lire à 16 pixels qu'une seule lettre.
• Noms de fichiers. Gardez les noms utilisés par le HTML, car les liens pointent vers eux.
• Fichiers illisibles. Si une image ne peut pas être transformée en icônes, le générateur affiche le message « Impossible de créer les icônes à partir de cette source. Essayez une autre image. » et vide les résultats. Essayez un autre fichier, ou enregistrez à nouveau l'image dans un format courant.