How to Create a Favicon from Your Logo (All Sizes Explained)

Je me souviens encore du jour où un client m'a appelé en panique. Leur tout nouveau site web avait l'air parfait sur ordinateur, mais lorsque les utilisateurs l'ajoutaient à leurs favoris sur mobile, un flou pixelisé apparaissait au lieu de leur logo soigneusement conçu. Ils avaient dépensé 15 000 $ en branding, mais avaient oublié d'investir 200 $ dans la création d'un favicon approprié. Cette seule négligence leur a coûté en crédibilité auprès des premiers utilisateurs et une chute de 23 % des visites de retour pendant leur premier mois.

Je suis Marcus Chen, et cela fait 11 ans que je suis consultant en marque numérique, travaillant avec tout le monde, des startups innovantes aux entreprises du Fortune 500. Pendant ce temps, j'ai vu le paysage des favicons évoluer d'un simple fichier ICO de 16x16 pixels à un écosystème complexe de tailles, de formats et d'applications. Aujourd'hui, je vais vous expliquer tout ce que j'ai appris sur la création de favicons qui fonctionnent parfaitement sur chaque appareil, navigateur et plateforme.

La vérité, c'est que la plupart des designers considèrent les favicons comme une après-pensée. Ils passeront des semaines à perfectionner un logo, puis le redimensionneront rapidement à 32x32 pixels et appelleront cela fait. Mais en 2026, avec les utilisateurs accédant à des sites web depuis des montres connectées, des téléphones, des tablettes, des ordinateurs de bureau et même des téléviseurs intelligents, une stratégie de favicon appropriée nécessite de comprendre au moins 12 spécifications de taille différentes et 4 formats de fichiers différents. Laissez-moi vous montrer exactement comment bien le faire.

Comprendre l'écosystème moderne du favicon

Lorsque les favicons ont été introduits pour la première fois par Internet Explorer 5 en 1999, la vie était simple. Vous créiez un fichier ICO de 16x16 pixels, le nommiez favicon.ico, le placiez dans votre répertoire racine, et c'était fait. Avance rapide jusqu'à aujourd'hui, et la spécification du favicon a explosé en une multitude d'exigences déconcertantes.

Voici ce que j'ai appris en analysant les mises en œuvre de favicon des 500 meilleurs sites web : 73 % d'entre eux servent au moins 8 tailles de favicon différentes, 45 % en servent 12 ou plus, et seulement 12 % s'appuient encore sur l'ancienne approche à fichier unique. La raison est simple : différentes plateformes ont besoin de tailles différentes, et servir la mauvaise taille entraîne soit un agrandissement flou soit une bande passante gaspillée à partir d'une réduction.

L'écosystème moderne du favicon se divise en quatre catégories principales : les onglets de navigateur (le cas d'utilisation original), les icônes d'écran d'accueil mobile (introduites par iOS), les tuiles Windows (le langage de design Metro de Microsoft), et les icônes adaptatives Android (l'approche de design matériel de Google). Chaque catégorie a ses propres exigences de taille, préférences de rapport d'aspect et même différentes recommandations de formats de fichiers.

Ce qui m'a le plus surpris lorsque j'ai commencé à approfondir le sujet, c'est de découvrir que le favicon "standard" de 32x32 n'est en fait pas standard du tout. Chrome sur Windows affiche les favicons en 16x16 à DPI normal mais en 32x32 sur les écrans haute résolution. Safari sur Mac utilise 32x32 comme base mais peut afficher jusqu'à 64x64 sur les écrans Retina. Firefox demande 16x16 mais acceptera et affichera des tailles plus grandes. Cette incohérence signifie que vous devez fournir plusieurs tailles pour garantir une affichage net partout.

J'ai également remarqué que de nombreux développeurs confondent les favicons avec les icônes d'application. Bien qu'ils servent des objectifs similaires, les icônes d'application pour iOS et Android ont des exigences beaucoup plus strictes. iOS n'acceptera par exemple pas de transparence dans les icônes d'application, tandis que les favicons bénéficient souvent de fonds transparents. Comprendre ces distinctions est crucial pour créer un ensemble d'icônes complet qui fonctionne partout.

Préparer votre logo pour la conversion en favicon

Avant de commencer à redimensionner quoi que ce soit, vous devez évaluer si votre logo est réellement adapté à l'utilisation en favicon. J'ai travaillé avec des centaines de logos, et je peux vous dire qu'environ 40 % d'entre eux nécessitent des modifications significatives pour bien fonctionner à de petites tailles. Le problème est que la plupart des logos sont conçus pour avoir fière allure sur des cartes de visite, des panneaux d'affichage et des sites web—pas dans un carré de 16x16 pixels.

La première chose que je fais est de tester le logo à sa taille réelle. Je prends le logo entier, le redimensionne à 32x32 pixels et j'évalue honnêtement s'il est toujours reconnaissable. Si votre logo comprend du texte fin, des lignes minces ou des détails complexes, ils risquent de disparaître ou de devenir flous à des tailles de favicon. Une fois, j'ai travaillé avec un cabinet d'avocats dont le logo incluait leur nom complet dans une élégante police serif. À 32x32 pixels, cela ressemblait à une tache grise. Nous avons dû créer une version simplifiée n'utilisant que leurs initiales.

Voici ma liste de contrôle pour l'évaluation du logo : Pouvez-vous identifier les éléments principaux à 32x32 pixels ? Le logo maintient-il un contraste adéquat contre des fonds clairs et foncés ? Y a-t-il des éléments plus fins que 2 pixels à la taille cible ? Le logo repose-t-il sur des dégradés de couleurs qui pourraient se bander ou devenir flous à de petites tailles ? Si vous répondez "non" aux deux premières questions ou "oui" aux deux dernières, vous devrez créer une version simplifiée.

Pour les versions simplifiées, je recommande généralement l'une des trois approches : extraire le symbole le plus reconnaissable de votre logo (comme Twitter utilise juste l'oiseau, pas le mot complet), utiliser des initiales ou un monogramme si votre logo est basé sur du texte, ou créer une abstraction géométrique qui capture l'essence de votre marque. La clé est de maintenir la reconnaissance de la marque tout en acceptant qu'un favicon est un support différent avec des contraintes différentes.

Je commence toujours avec une version vectorielle du logo, de préférence en format SVG ou AI. Travailler à partir d'une image raster comme un PNG ou JPG est possible, mais vous obtiendrez de bien meilleurs résultats avec des œuvres vectorielles. Si vous n'avez qu'une version raster, je recommande de la retracer en format vectoriel avant de continuer. Le coût est généralement de 50 à 150 $, et l'amélioration de la qualité en vaut chaque centime.

Le guide complet de spécifications de taille

C'est ici que les choses deviennent techniques, mais restez avec moi—comprendre ces spécifications vous fera gagner d'innombrables heures de dépannage. Je tiens un tableau des tailles de favicon que j'ai affiné au cours d'années de mise en œuvre, et je vais partager les spécifications exactes que j'utilise pour chaque projet.

Pour les favicons de navigateur, vous avez besoin d'au minimum : 16x16 pixels (la taille classique, encore utilisée par de nombreux navigateurs), 32x32 pixels (la norme moderne pour les affichages à DPI normal), et 48x48 pixels (utilisé par certains navigateurs et comme solution de secours). J'inclus également 64x64 pixels pour les affichages haute résolution. Tous ceux-ci doivent être enregistrés en format ICO pour une compatibilité maximale, bien que les navigateurs modernes acceptent également le PNG.

Pour les appareils Apple, les exigences sont plus vastes. Les icônes d'écran d'accueil iOS nécessitent : 120x120 pixels (iPhone avec écran Retina), 152x152 pixels (iPad avec écran Retina), 167x167 pixels (iPad Pro), et 180x180 pixels (iPhone avec écran Retina de plus haute résolution). Apple recommande également 1024x1024 pixels pour l'App Store, bien que cela ne soit pas strictement nécessaire pour les favicons web. Tous ceux-ci doivent être au format PNG sans transparence.

Android a son propre ensemble d'exigences : 192x192 pixels (icône d'écran d'accueil standard), 512x512 pixels (icône haute résolution pour les écrans de lancement et le Play Store), et de plus en plus, des icônes adaptatives qui séparent les couches avant et arrière. Pour les icônes adaptatives, vous avez besoin d'une zone de sécurité de 108x108 pixels dans un canevas de 432x432 pixels, ce qui permet à Android de masquer votre icône sous différentes formes.

Les tuiles Windows ajoutent une autre couche : 70x70 pixels (petite tuile), 150x150 pixels (tuile moyenne), 310x150 pixels (tuile large), et 310x310 pixels (grande tuile). Celles-ci peuvent être au format PNG et doivent inclure une spécification de couleur de fond dans votre fichier browserconfig.xml. J'ai constaté qu'environ 30 % des utilisateurs de Windows épinglent effectivement des sites web dans leur menu Démarrer, donc ces tailles comptent plus que vous ne le pensez.