Générateur de favicon

Le favicon et les icônes de site jouent un rôle essentiel dans l’identité visuelle et la présence en ligne d’un site Web. Ils s’affichent dans les onglets des navigateurs, sur les écrans d’accueil des appareils mobiles et au sein des applications web progressives (PWA). Le processus de création de ces fichiers nécessite de respecter des formats et des dimensions spécifiques pour garantir un affichage net sur tous les écrans.

Le traitement de votre image s’effectue localement: votre image devient des icônes dans votre navigateur et rien n’est téléversé vers BroBroGo.

Les différents types d’icônes et leurs usages

Un site Web moderne requiert plusieurs fichiers d’icônes pour répondre aux exigences des différents systèmes d’exploitation et navigateurs:

• Le fichier favicon.ico: Ce format traditionnel regroupe plusieurs résolutions dans un seul conteneur. Il contient les versions en 16, 32 et 48 pixels. Il sert principalement d’icône d’onglet classique pour les anciens navigateurs et certains systèmes de bureau.
• Les icônes PNG: Générées aux dimensions de 16, 32, 180, 192 et 512 pixels. Les tailles de 16 et 32 pixels servent d’icônes d’onglets au format PNG. La taille de 180 pixels est spécifiquement calibrée pour l’écran d’accueil iPhone et iPad (Apple touch icon). Les tailles de 192 et 512 pixels sont destinées à Android et applis web installées.
• Le fichier vectoriel SVG: Si votre image de départ est un SVG, le fichier vectoriel lui-même est inclus dans le pack. Il est pris en charge par les navigateurs modernes et reste parfaitement net à toutes les tailles.
• Le fichier site.webmanifest: Ce petit fichier texte référence les grandes icônes (notamment celles de 192 et 512 pixels). Il indique aux appareils où trouver les icônes et comment les afficher lors de l’installation d’une application web.

Sélection de l’image de départ: SVG ou matriciel

Le choix du format et de la résolution de votre image source détermine la netteté finale de vos icônes.

L’utilisation d’un fichier SVG (Scalable Vector Graphics) constitue la méthode idéale. Comme le SVG repose sur des vecteurs mathématiques, chaque icône du pack est redessinée directement depuis le fichier vectoriel, ce qui assure une netteté absolue, de la plus petite taille de 16 pixels jusqu’aux grands formats.

Si vous utilisez une image matricielle au format PNG ou JPG, il est recommandé de partir d’une résolution d’au moins 512 × 512 pixels. Le générateur accepte les fichiers d’une taille maximale de 50 Mo. Si vous soumettez un fichier trop petit, l’outil affiche l’avertissement suivant: « Image de départ petite ({w} × {h} px): les grandes icônes peuvent paraître floues. Visez 512 × 512 ou plus, ou un SVG. ». Les images de faible résolution doivent en effet être agrandies pour générer les icônes de 192 et 512 pixels, ce qui peut leur donner un aspect flou ou adouci.

Gestion du recadrage et des proportions

Les icônes de site doivent obligatoirement s’inscrire dans un format carré. Si votre image source n’est pas carrée, l’outil propose deux options pour adapter le visuel sans le déformer:

1. Ajuster: L’image reste entière, centrée avec des marges autour. Cette option ajoute un espace vide (ou transparent) sur les côtés les plus courts pour obtenir un carré parfait.
2. Remplir: L’image remplit le carré; les bords qui dépassent sont rognés. Le centre de l’image est préservé, tandis que les extrémités superflues sur l’axe le plus long sont coupées.

Choix du fond: transparence ou couleur unie

Le traitement de l’arrière-plan de vos icônes dépend de l’usage principal de votre site:

• Transparent: Par défaut, le fond reste transparent. Cette option convient parfaitement pour l’affichage dans les onglets des navigateurs, car l’icône s’intègre naturellement à la couleur du thème du navigateur.
• Couleur: Vous pouvez définir une couleur de fond spécifique. Cette option est fortement recommandée pour les icônes destinées aux appareils iOS. En effet, l’écran d’accueil des iPhone et iPad affiche les zones transparentes en noir. L’application d’une couleur de fond unie évite cet effet visuel indésirable et sécurise le rendu sur les terminaux Apple.

Intégration et installation sur votre site Web

Une fois le processus terminé, l’outil génère un fichier ZIP unique contenant l’ensemble des icônes ainsi que le code HTML nécessaire à leur intégration.

Pour installer les icônes sur votre serveur:

1. Téléchargez et extrayez le fichier ZIP obtenu.
2. Téléversez l’ensemble des fichiers (les images PNG, le fichier favicon.ico et le fichier site.webmanifest) dans le dossier racine de votre site Web. Il est important que le fichier favicon.ico soit accessible directement à l’adresse /favicon.ico pour les anciens navigateurs qui le recherchent à cet emplacement par défaut.
3. Copiez le code HTML généré par l’outil et collez-le dans la section head (<head>) de chaque page de votre site. Ce code indique aux navigateurs et aux systèmes d’exploitation mobiles le chemin d’accès et la taille de chaque icône, leur permettant de choisir automatiquement le fichier le plus adapté à l’écran de l’utilisateur.