Les graphismes des icônes des outils PuTTY

• Les icônes de PuTTY conservent un style ancien, créé entre la fin des années 1990 et le début des années 2000, tout en ayant été rerendues plusieurs fois pour s’adapter à l’évolution des tailles d’écran et des exigences des plateformes
• Les premières versions étaient des images 32×32 dessinées pixel par pixel dans l’éditeur d’icônes de MSVC, reflétant les contraintes de l’époque comme la palette 16 couleurs recommandée par Windows et les icônes en noir et blanc
• Des éléments comme deux ordinateurs et un éclair, un document, un chapeau, une clé ou une clé à molette servaient à distinguer le rôle de chaque outil tout en leur donnant l’apparence d’une suite PuTTY
• Vers 2007, comme l’affichage des icônes 48×48 dans Windows dégradait la qualité des icônes 32×32 agrandies, les versions 48×48, 32×32, 16×16 et noir et blanc ont commencé à être générées automatiquement par script
• Par la suite, un script de génération SVG a été créé pour pallier les limites du script bitmap aux grandes tailles, mais pour les petites icônes, l’ancien script produit de meilleurs résultats

---

Le point de départ des icônes PuTTY

• En mars 2025, un e-mail demandant l’origine et l’évolution du « logo », c’est-à-dire l’icône de l’exécutable Windows de PuTTY, a servi de déclencheur pour remettre les choses en ordre
• L’ossature du design actuel des icônes a été créée entre la fin des années 1990 et le début des années 2000, puis conservée sans changement stylistique majeur
• Avec le temps, les icônes ont dû être rerendues sous diverses contraintes, ce qui relevait à la fois du graphisme et d’un problème technique

L’époque du dessin pixel par pixel à la main

• Au début, il n’avait pas été anticipé que des icônes de plusieurs tailles seraient nécessaires : elles étaient donc dessinées directement dans l’éditeur d’icônes de MSVC, sans automatisation
• Un programme GUI Windows sans icône étant moins identifiable, PuTTY a eu besoin d’une icône dédiée dès ses débuts

• PuTTY lui-même

  • La plus ancienne icône PuTTY encore disponible est une version utilisée début 1999 ; l’historique de gestion de source remontant au début du projet, à l’été 1996, n’existe plus
  • L’icône mesure 32×32 pixels et utilise une palette limitée composée de couleurs primaires et de nuances de gris
  • Au milieu des années 1990, les écrans non truecolour étaient courants, et Windows recommandait l’utilisation d’une palette fixe de 16 couleurs pour les icônes
  • L’idée était que toutes les icônes de l’interface graphique réutilisent les mêmes 16 entrées de palette afin de consommer moins de ressources couleur à l’écran
  • Une version noir et blanc était également fournie, conformément aux recommandations de l’époque
  • Je ne me souviens pas avoir réellement vu d’écran noir et blanc sous Windows après Win95, mais cela pourrait avoir été lié à Win32s, qui permettait de tenter d’exécuter des programmes 32 bits sous Windows 3.1
  • Le design représente deux ordinateurs, de type moniteur CRT et unité centrale courant dans les années 1990, reliés par un éclair
  • L’éclair suggère une communication électrique
  • La raison précise de l’utilisation d’un éclair jaune et d’un écran bleu n’est plus clairement documentée
  • L’écran bleu ne désignait pas le Blue Screen of Death de Windows, car dans un usage normal de PuTTY, un seul côté est sous Windows et aucun des deux n’est en état de crash

• PSCP et PSFTP

  • En 1999, un contributeur a envoyé une implémentation de SCP, donnant naissance à PSCP, avec une icône dédiée
  • Comme PSCP ne peut pas être utilisé sans arguments en ligne de commande, il n’y avait pas de grand besoin pratique de l’exécuter depuis l’interface graphique ou de l’identifier dans le menu Start
  • L’icône de PSCP reprend l’icône de PuTTY en remplaçant l’un des ordinateurs par un document, l’autre ordinateur et le document étant reliés par un éclair
  • Plus tard, l’outil de transfert de fichiers PSFTP a réutilisé la même icône
  • PSFTP peut être lancé sans arguments en ligne de commande et permet de saisir la cible de connexion dans une invite interactive, ce qui rendait cette icône plus utile en pratique que pour PSCP
  • Le fait que les deux outils utilisent la même icône oblige à faire attention pour les distinguer dans Explorer, mais il n’a pas été trouvé de façon simple de représenter visuellement leur différence

• Pageant

  • Pageant est un agent SSH ; au départ, l’idée était de dessiner comme icône le visage d’un agent secret
  • La représentation du visage a échoué, mais le chapeau à large bord dessiné de façon satisfaisante a été conservé tel quel, posé sur l’ordinateur PuTTY
  • La réutilisation du même design d’ordinateur l’intégrait visuellement à la suite, et convenait aussi au fait que l’agent de Pageant n’est pas humain mais informatisé
  • L’icône initiale de Pageant n’avait pas de version noir et blanc ; en revanche, il fallait une petite icône 16×16 pour la System Tray
  • Comme Windows réduisait mal les icônes 32×32, l’anticrénelage du ruban du chapeau et du contour du moniteur a été ajusté à la main pour la petite taille
  • Le contour est resté noir afin de se distinguer du fond

• PuTTYgen

  • L’icône de PuTTYgen combine un ordinateur, un éclair et une clé
  • La clé est un faible jeu visuel indiquant que l’outil sert à générer et manipuler des clés cryptographiques
  • PuTTYgen ne faisant pas de communication réseau, l’éclair est fonctionnellement inexact, mais il est présent pour apporter une cohérence visuelle avec les outils de la suite PuTTY
  • Contrairement à PSCP, l’orientation de la disposition entre l’ordinateur et l’objet est inversée, ce qui rend les deux icônes plus faciles à distinguer

• Boîte de dialogue de configuration

  • L’entrée taskbar de la boîte de dialogue de configuration de PuTTY utilisait l’icône de fenêtre Windows par défaut, ce qui n’était pas très esthétique
  • Au lieu de réutiliser telle quelle l’icône principale, une icône a été dessinée avec une grande clé à molette superposée pour représenter la configuration et la modification
  • Cette icône incluait de nouveau une version noir et blanc, peut-être parce qu’elle modifiait une icône qui disposait déjà d’une version noir et blanc

Des icônes redessinées par script

• Vers 2007, des plaintes ont commencé à apparaître au sujet de l’aspect médiocre des icônes 32×32
• Les écrans devenant plus grands et Windows affichant par défaut des icônes 48×48, les icônes d’applications ne disposant que d’une version 32×32 étaient agrandies
• Comme 48 n’est pas un multiple de 32, Windows étirait les icônes de manière non uniforme, ce qui dégradait encore le résultat
• Plutôt que de redessiner à la main un nouveau jeu complet d’icônes, un script de génération dessinant chaque composant d’icône par programme a été écrit
• Ce script générait automatiquement des icônes 48×48, 32×32 et 16×16 pour tous les outils
  • Les incohérences où seules certaines icônes disposaient d’une petite version ou d’une version noir et blanc ont disparu
  • Toutes les icônes ont désormais toutes les versions
• La partie la plus difficile était celle des icônes 16×16
  • Il fallait reproduire en code les décisions d’anticrénelage qui avaient été prises à la main pour Pageant
  • La même approche devait être appliquée à tous les composants graphiques
• Le résultat du script n’est pas parfaitement identique aux dessins d’origine faits à la main
  • L’icône de PuTTY en était très proche, avec seulement quelques pixels différents
  • L’icône de Pageant a changé non seulement au niveau de l’anticrénelage du ruban du chapeau, mais aussi de la taille de l’ordinateur
• Le script a aussi été conçu pour pouvoir générer des icônes noir et blanc
  • En 2007, l’usage de Windows sur des écrans noir et blanc devait être encore plus rare
  • Grâce à l’automatisation, il a même été possible de créer des icônes noir et blanc de 48 pixels

pterm et les icônes X11

• En 2002, une grande partie du code de PuTTY a été portée sous Linux, donnant naissance à une version GUI de PuTTY pour Linux et à l’émulateur de terminal X11 pterm
• Les programmes X11 peuvent définir un bitmap d’icône dans les propriétés de leur fenêtre
  • Le gestionnaire de fenêtres peut l’utiliser comme icône de minimisation, entrée de taskbar, icône dans le cadre de fenêtre, etc.
• En 2002, on pensait que GTK 1 ne prenait pas en charge la définition de l’icône de fenêtre, et fournir plusieurs formats de fichiers bitmap était également fastidieux ; aucune icône n’a donc été créée
• Après l’arrivée du script de génération, produire plusieurs formats de sortie est devenu facile, et il s’est avéré que GTK 1 permettait bien de définir la propriété d’icône
• L’icône de pterm ne représente qu’un seul ordinateur en grand, sans éclair, car pterm ne fait pas de communication réseau
• La boîte de dialogue de configuration de pterm réutilise la superposition de clé à molette, comme l’icône de configuration de PuTTY
• En 2021, il est devenu possible de créer un pterm fonctionnant sous Windows, et cette icône a alors également été utilisée pour pterm sous Windows

Icône de l’installateur et gestion des couleurs

• Le script de génération pouvant aussi produire des icônes true colour, il n’était plus nécessaire de se limiter à l’ancienne palette 16 couleurs
• L’icône de l’installateur PuTTY contient une boîte en carton ondulé ouverte et un éclair qui en sort en direction de l’ordinateur
  • L’image voulue était celle de « PuTTY jaillissant de la boîte vers la machine de l’utilisateur »
• La boîte en carton avait besoin de brun, mais le brun n’existait pas dans l’ancienne palette 16 couleurs des icônes Windows
• Les icônes true-colour pouvaient utiliser un vrai brun
• Des icônes 16 couleurs ont tout de même été conservées pour la compatibilité descendante
  • En mélangeant à parts égales du rouge foncé #800000 avec respectivement du noir #000000, du jaune foncé #808000 et du jaune #ffff00, on obtient trois couleurs proches du brun
  • En true-colour, la couleur moyenne est utilisée ; dans la version 16 couleurs, elle est représentée par tramage en demi-teinte, en alternant les pixels des deux couleurs de la palette

Un jeu d’icônes recréé en SVG

• Le script d’icônes existant fonctionne bien en 32×32 et 48×48, et la réduction en 16×16 reste correcte, mais la qualité devient mauvaise quand on l’agrandit davantage
• Lors d’une tentative infructueuse de portage sur Mac, le dock de MacOS nécessitait des icônes 128×128, et la sortie du script existant à cette taille n’était pas satisfaisante
• Le portage sur Mac a été pratiquement abandonné, mais des icônes entièrement extensibles peuvent être utiles à d’autres fins
  • Elles peuvent être utilisées hors du contexte des icônes d’interface graphique
  • Des usages comme des t-shirts ou des autocollants pour ordinateur portable deviennent aussi possibles
• Le second script de génération d’icônes imite la logique du script existant, mais produit des fichiers SVG au lieu de bitmaps
• La version SVG actuelle comprend 8 icônes : PuTTY, configuration de PuTTY, pterm, configuration de pterm, PSCP, Pageant, PuTTYgen et l’installateur
• Pour les petites icônes, le SVG ne peut pas connaître les choix d’anticrénelage appropriés ; l’ancien script produit donc un meilleur rendu
• Pour les grandes icônes, en particulier lorsqu’un grand bitmap true colour est nécessaire, il est recommandé de rendre l’image à partir du SVG

Pourquoi conserver ce style ancien

• L’état actuel du jeu d’icônes PuTTY consiste à conserver le style des années 1990 tout en ajoutant plusieurs méthodes de rendu
• Certaines personnes, opposées au style global des années 1990, ont proposé de nouveaux jeux de design, mais aucune proposition n’a suffisamment plu pour être adoptée
• Le style des années 1990 est perçu comme un élément qui donne à PuTTY une apparence rassurante par son côté désuet
• Il semble peu probable qu’une refonte majeure soit réellement acceptée, et les icônes actuelles, ou une forme presque identique, devraient être conservées pendant toute la durée de vie du projet

[GN⁺]

Avis de Hacker News

• J’ai marqué un temps d’arrêt au passage disant qu’il était étrange que l’éclair soit jaune, mais pour moi, le jaune m’a toujours semblé être « évidemment » la bonne couleur
  Même en faisant une recherche d’images, l’éclair jaune est le symbole le plus courant pour représenter l’électricité, et il évoque aussi les panneaux de danger standard noir et jaune
  Je ne sais pas depuis quand cette représentation existe historiquement ni d’où elle vient, mais elle semble largement utilisée depuis longtemps dans les comics et les dessins animés

  • Simon Tatham est britannique, et je n’ai pas le souvenir d’avoir vu ici des éclairs turquoise
    Au Royaume-Uni, les panneaux de danger de mort par électrocution sont eux aussi noirs sur fond jaune, et non sur fond noir : https://www.hse.gov.uk/electricity/nearelectric.htm#signs
    Cela dit, si l’on cherche des images d’éclairs, on voit pas mal d’options comme du turquoise sur du bleu royal, du violet, du rouge, etc.
  • En particulier, l’icône de WinAmp à l’époque était elle aussi un éclair jaune, et elle était installée sur presque tous les PC Windows des années 90
  • Ce passage m’a aussi sauté aux yeux. L’auteur se demande également pourquoi l’écran est bleu
    Sans doute qu’à la fin des années 90, ce genre de choix de couleurs paraissait parfaitement naturel et suivait les conventions de design de Windows, si bien qu’il a probablement oublié qu’on n’y réfléchissait pas vraiment à l’époque
  • Pure spéculation, mais l’éclair jaune de l’icône de PuTTY a peut-être été emprunté aux panneaux d’avertissement de sécurité, ce qui expliquerait qu’il soit resté jaune
    Le jaune est depuis longtemps privilégié comme couleur très visible, et sur l’enveloppe des équipements industriels, un pictogramme signalant clairement un risque d’électrocution indépendamment de la langue devait bien ressortir
    Au final, l’éclair jaune semble s’être maintenu par une sorte d’inertie du type « on a toujours fait comme ça »
  • J’ai eu la même réflexion récemment. Les voitures électriques ou hybrides rechargeables utilisent souvent des accents turquoise pour indiquer qu’elles sont électriques, mais malgré tout, le jaune me paraît plus naturel comme couleur représentant l’électricité

• C’est précisément l’une des raisons pour lesquelles PuTTY est attirant. Les applications qui ressemblent à PuTTY ont quelque chose de rassurant
  Je ne sais pas si cette vieille apparence donne un sentiment de stabilité parce qu’elle ne change pas, ou si le fait d’utiliser les éléments natifs du système d’exploitation les rend simplement plus cohérentes
  À l’inverse, plus une appli à l’esthétique « moderne » accumule Material Design, coins arrondis, effets de transition, faible contraste et grands espaces vides, plus elle m’inspire méfiance et scepticisme
  Je ne suis pas qualifié pour faire une analyse psychologique, mais vu qu’il existe un groupe de gens qui apprécient le design à la PuTTY, cette interprétation ne doit pas être si rare

  • Les logiciels qui utilisent les éléments graphiques Win32 de base sont vraiment incroyablement rapides
    Cette apparence ne garantit pas forcément la vitesse, et le logiciel peut perdre du temps ailleurs ou imiter finement ce style, mais il peut aussi s’agir d’un vrai outil réactif instantanément, comme l’ancien Notepad
    Ce Notepad qui « mettait simplement le fichier dans un contrôle texte et ne se souciait pas des \r, seulement des \n », me manque. C’était un programme qui ne prétendait pas être autre chose et faisait exactement son travail
    Il me semble avoir vu autrefois une réimplémentation de Notepad en assembleur, où le code de liaison entre l’accès aux fichiers et le contrôle texte occupait à peu près la moitié de l’écran, avec peut-être même le menu ctrl+h et la boîte de dialogue
    C’était comparable au code de collage dont Python se vante, mais en assembleur pur, sans dépendances autres que la DLL d’accès aux fichiers et un ensemble minimal de contrôles standard
  • L’époque des logiciels Win32 me manque. C’était simple, rapide à dessiner, propre et dense en information
    Désormais, tout utilise de gros widgets « Windows moderne », ou pire, Electron
  • PuTTY et Winamp sont des logiciels que j’utilise sous Windows depuis plus de 20 ans, et ils donnent toujours la même impression. Ils ne paraissent ni vieux ni dépassés
  • L’un des principes de Material Design semble être qu’un rectangle ne doit pas révéler son identité avant qu’on clique dessus
    Ça peut être un bouton, un champ de texte, ou simplement un rectangle

• La phrase « j’ai compris que si j’attendais d’avoir dessiné l’icône que je voulais, Pageant ne sortirait jamais » me parle
  Un bon nombre de projets que j’aimerais lancer restent bloqués sur ce genre d’obstacles auto-infligés
  Chez moi, l’exemple typique, c’est de rester coincé au moment de choisir le nom du dépôt ou du dossier racine

  • Il faut une échéance
    Dans la culture hacker, la gestion de projet est souvent écartée comme une perte de temps, mais trouver des moyens de faire avancer un projet est un rôle précieux
  • Personnellement, l’un des domaines où les LLM m’ont le plus aidé a été de franchir la barrière du nommage
    Curieusement, je suis assez mauvais pour choisir des noms de dépôts, de variables, de structures, etc.
  • J’ai essayé de dessiner l’icône d’une appli sur laquelle je travaille, mais les courbes SVG sont vraiment difficiles
    Au final, j’ai obtenu un logo bien plus simple que celui que je voulais faire au départ, mais plus cohérent
  • C’est ce qu’on appelle du bikeshedding

• Il dit ne pas se souvenir pourquoi il a choisi le bleu pour l’écran, mais dans les icônes de Win 3.x et Win95, le bleu était une couleur standard pour représenter les écrans, donc il a probablement simplement suivi cette convention

  • EDIT.COM et le programme d’installation de MS-DOS utilisaient eux aussi un fond bleu
    En pratique, le bleu, c’est-à-dire la couleur CGA numéro 1, était très populaire comme couleur de fond dans de nombreux outils
    Dans Turbo Pascal, Turbo C et autres, le thème à fond bleu avec texte blanc était courant, et Borland dBase mélangeait des fonds bleus et turquoise sur plusieurs écrans
    Comme les couleurs disponibles à l’époque étaient limitées, le bleu faisait partie des rares couleurs de fond confortables pour les yeux
    Je me souviens aussi que Windows 3.1, 95, 98, etc. utilisaient le bleu comme couleur d’écran dans les icônes représentant un ordinateur
    Dans les icônes avec deux ordinateurs, comme « Voisinage réseau », l’un des écrans était bleu et l’autre turquoise
  • On peut voir sur cette page plusieurs exemples d’icônes d’ordinateur presque identiques à celle utilisée par PuTTY : http://toastytech.com/guis/win31.html
    J’ai dû zoomer pour vérifier que ce n’était pas la même icône
  • Je pense que la version noir et blanc avait aussi du sens. À l’époque, il devait encore y avoir pas mal d’ordinateurs portables monochromes en service

• Ça me rappelle des souvenirs. Vers 2000, j’avais forké PuTTY pour créer une version appelée « RedBrick PuTTy », avec un bouton permettant de se connecter en SSH à redbrick.dcu.ie en un clic
  redbrick.dcu.ie était le serveur terminal de la Dublin City University Networking Society, et je ne me souviens plus si j’étais administrateur système ou webmaster à l’époque
  Mais je me souviens avoir modifié le logo à la main pour y mettre une brique rouge
  On peut à peine la voir sur cette image : https://wiki.redbrick.dcu.ie/images/b/b8/Putty_configuration...
  Grâce à ce petit fork idiot, l’usage de SSH au lieu de Telnet est passé d’environ 5 % à pratiquement 100 %
  Merci à Simon d’avoir choisi une licence qui a rendu ce genre de chose possible

• Le passage disant qu’il a « écrit du code qui dessine programmatiquement tous les composants de chaque image d’icône » illustre très bien la manière dont Simon aborde les problèmes
  J’ai passé pas mal de temps avec Simon dans les années 2000 et j’ai beaucoup appris sur toutes sortes de sujets ; cette approche lui ressemble vraiment

• Ça me rappelle l’époque où, sous Windows, l’affichage par défaut des icônes est passé à 48×48 au lieu de 32×32, tandis que MacOS voulait des icônes 128×128 dans le Dock
  L’une des raisons les plus superficielles, mais aussi les plus marquantes, de mon passage de Windows à Mac OS X à cette période a été précisément ces icônes 128×128
  Dans le Finder ou le Dock, les icônes servant de point d’entrée aux apps paraissaient beaucoup plus attirantes et instinctivement plus belles
  Les icônes des apps Windows, en particulier, utilisaient souvent moins de couleurs que celles des apps Mac
  Bien sûr, il y avait plusieurs raisons à ce changement, mais quand j’ai vu pour la première fois le bureau Mac, les icônes ont fait une impression assez forte pour me donner envie de regarder de plus près

  • Je ne sais pas à quoi ressemblait OS X à l’époque, mais l’une des choses vraiment agaçantes dans les applications Windows était que la plupart des icônes avaient l’air très médiocres
    On avait l’impression que presque personne ne se souciait de créer de bonnes icônes
    Certaines n’avaient pas été mises à jour alors que la taille par défaut était passée à 48×48, ce qui les rendait floues à cause de l’agrandissement ; d’autres incluaient bien toutes les tailles, mais se contentaient de réduire une image qui ne rendait bien qu’en grand
    Résultat, à la taille d’icône habituelle, tous les détails se mélangeaient et ça devenait un désastre
    Pour ne pas voir d’icônes moches sur le bureau ou dans la barre des tâches, je créais moi-même des icônes personnalisées et je remplaçais celles intégrées aux exécutables avec un éditeur de ressources

• On perd quelque chose en passant du bitmap au SVG
  Le grain rugueux du bitmap a un charme particulier

  • Le pixel art est meilleur, mais je ne pense pas que ce soit toute l’explication
    On ne peut pas simplement le transposer à l’identique et espérer un bon résultat. En plus, ce n’est même pas vraiment du 1:1 : dans le SVG, les contours sont devenus beaucoup plus fins
    Dans une image en basse résolution, l’imagination comble les vides
    Plus la résolution augmente, plus le niveau de qualité requis augmente lui aussi. L’art vectoriel, par définition, a une résolution infinie

• Je me demande si l’icône de chapeau « Agent » n’a pas été inspirée par Forté Agent, qui était à mon avis le logiciel Usenet le plus populaire sous Windows
  Il utilisait un motif très similaire : https://archive.org/details/forte-agent-1.6
  C’est agréable de lire ce genre d’histoire directement de la personne qui l’a créée

  • Étrangement, ça me fait penser à Carmen Sandiego
    Même dans la version moderne de 2014, il y a un détective de film noir au même endroit, et l’icône de l’application est toujours une femme portant un chapeau : https://youtu.be/h-_UNm_gycU?t=94
  • Ça vient de la BD Spy vs. Spy
  • Comme déjà mentionné dans d’autres réponses, la formulation de l’article revient presque à dire directement que c’est basé sur Spy vs. Spy
    Je ne connais pas de lien officiel qui le documente, mais une recherche d’images sur https://www.google.com/search?q=spy+vs+spy&udm=2 montre beaucoup d’images qui ont pu inspirer ce chapeau