Un développeur allemand, Tim Wehrle, a réussi un tour qui amuse beaucoup le web ces jours-ci : faire tenir une page entière dans un favicon, cette petite icône qui s’affiche dans l’onglet de votre navigateur, à côté du titre du site. Pas un lien vers la page. La page elle-même.
L’astuce repose sur une idée simple. Une image n’est qu’une grille de pixels, et chaque pixel porte trois valeurs de couleur : du rouge, du vert, du bleu. Wehrle s’en sert comme d’un minuscule espace de rangement.
Il prend le code HTML de sa page, le convertit en octets (les unités de base que manipule un ordinateur), puis glisse ces octets dans les couleurs. Le premier octet devient le rouge du premier pixel, le deuxième le vert, le troisième le bleu, et ainsi de suite jusqu’au bout.
Pour sa démonstration, la page pèse 208 octets de HTML. Avec un petit en-tête de 4 octets qui indique où s’arrête le contenu, il faut caser 212 octets, soit 71 pixels. L’image, elle, mesure 9 pixels sur 9, donc 81 cases en tout : remplie aux trois quarts environ.
Le choix du favicon n’a rien d’anodin pour qui s’intéresse au fonctionnement du web. Chaque navigateur télécharge automatiquement cette icône sur chaque site visité, sans rien demander. Les données voyagent donc dans une requête qui a lieu de toute façon. Et un favicon de taille normale, bien plus grand que ce carré de 9 pixels, pourrait en stocker bien davantage.
Envie de comprendre comment se fabrique une page web, des pixels au JavaScript ? Ce manuel reprend tout depuis le début.
Apprenez les langages HTML5, CSS3 et JavaScript → voir sur Amazon
Lien affilié Amazon. En tant que Partenaire Amazon, je réalise un bénéfice sur les achats remplissant les conditions requises.
Côté navigateur, le décodage se joue en quelques étapes. Le favicon se charge comme un fichier PNG des plus ordinaires. Un bout de code JavaScript le dessine ensuite sur un canvas, une zone de dessin invisible dans la page, relit les couleurs pixel par pixel, reconstitue les octets, puis reconstruit le texte d’origine.
Il y a quand même un piège, et Wehrle ne le cache pas. Le favicon ne contient pas le site complet, mais son contenu. Pour l’afficher, il faut toujours ce petit programme JavaScript qui lit l’image et fait le rendu. Sans lui, le favicon reste une image muette.
L’auteur l’assume : aucune application pratique en vue. C’est un exercice de limite, dans la lignée de ses bidouilles précédentes où il planquait déjà des données dans des recoins improbables. Le code et une démonstration qui marche sont en ligne, sur son site et sur GitHub.
Reste l’image qui fait sourire. Dans un web où la moindre page met une éternité à s’afficher entre les pubs, les bannières cookies et les traqueurs, voir un site complet tenir dans 81 pixels a quelque chose de réjouissant.
Crédit photo : Illustration générée par IA
