Os gráficos dos ícones das ferramentas do PuTTY

• Os ícones do PuTTY mantiveram um estilo antigo criado no fim dos anos 1990 e começo dos anos 2000, sendo renderizados novamente várias vezes para acompanhar mudanças no tamanho das telas e nas exigências das plataformas
• As primeiras versões eram imagens de 32×32 desenhadas pixel a pixel no editor de ícones do MSVC, refletindo limitações da época, como a paleta de 16 cores recomendada no Windows e ícones em preto e branco
• Elementos como dois computadores, um raio, documento, chapéu, chave e chave inglesa serviam para diferenciar o papel de cada ferramenta e, ao mesmo tempo, fazer com que todas parecessem pertencer à família de produtos PuTTY
• Por volta de 2007, quando a exibição de ícones 48×48 no Windows passou a prejudicar a qualidade da ampliação dos 32×32, passou-se a gerar automaticamente por script as versões 48×48, 32×32, 16×16 e em preto e branco
• Depois, para compensar as limitações do script bitmap em tamanhos grandes, foi criado um script de geração em SVG, embora para ícones pequenos o script antigo ainda produza resultados melhores

---

O ponto de partida dos ícones do PuTTY

• Em março de 2025, um e-mail perguntando sobre a origem e a evolução do “logotipo”, que é o ícone dos executáveis do PuTTY no Windows, motivou a organização deste relato
• A base do design atual dos ícones foi criada no fim dos anos 1990 e começo dos anos 2000, e desde então foi mantida sem grandes mudanças de estilo
• Com o passar do tempo, os ícones precisaram ser renderizados novamente sob várias restrições, o que era ao mesmo tempo um problema de design gráfico e um problema técnico

A época de colocar pixels à mão

• No início, não se imaginava que seriam necessários ícones em vários tamanhos, então tudo era desenhado manualmente no editor de ícones do MSVC, sem automação
• Programas GUI no Windows ficam menos identificáveis sem ícone, então o PuTTY precisou de um ícone próprio desde o começo

• O PuTTY principal

  • O ícone mais antigo ainda preservado do PuTTY é uma versão usada no início de 1999, e não restou histórico de controle de código-fonte até o verão de 1996, quando o projeto começou
  • O ícone tem 32×32 pixels e usa uma paleta limitada, composta por cores primárias e tons de cinza
  • Em meados dos anos 1990, telas que não eram true colour eram comuns, e para ícones do Windows era recomendado usar uma paleta fixa de 16 cores
  • A ideia era que todos os ícones da GUI reutilizassem as mesmas 16 entradas da paleta, consumindo menos recursos de cor da tela
  • Uma versão em preto e branco também era fornecida, conforme as recomendações da época
  • Não há lembrança de isso ter sido visto de fato em monitores monocromáticos depois do Win95, mas pode ter tido relação com o Win32s, que permitia tentar executar programas de 32 bits no Windows 3.1
  • O design mostra dois computadores no formato típico dos monitores CRT e gabinetes comuns nos anos 1990, conectados por um raio
  • O raio sugere comunicação elétrica
  • O motivo para usar um raio amarelo e telas azuis não ficou claramente registrado
  • A tela azul não queria dizer Blue Screen of Death do Windows, porque no uso normal do PuTTY apenas um lado é Windows e nenhum dos dois está travado

• PSCP e PSFTP

  • Em 1999, um colaborador enviou uma implementação de SCP, e assim surgiu o PSCP, junto com um ícone próprio
  • O PSCP não pode ser usado sem argumentos de linha de comando, então não havia grande necessidade prática de executá-lo pela GUI ou identificá-lo no menu Iniciar
  • O ícone do PSCP substitui um dos computadores do ícone do PuTTY por um documento, deixando o outro computador ligado ao documento por um raio
  • Depois, a ferramenta de transferência de arquivos PSFTP também passou a reutilizar esse mesmo ícone
  • O PSFTP pode ser executado sem argumentos de linha de comando e receber o destino de conexão em um prompt interativo, então esse ícone acabou sendo mais útil nele do que no PSCP
  • Usar o mesmo ícone nas duas ferramentas exige mais atenção no Explorer para distingui-las, mas não se encontrou uma forma simples de representar visualmente a diferença

• Pageant

  • O Pageant é um agente SSH e, no início, a intenção era desenhar o rosto de um agente secreto como ícone
  • A tentativa de representar um rosto falhou, mas um chapéu de aba larga desenhado de forma satisfatória acabou sendo mantido sobre o computador do PuTTY
  • Reutilizar o mesmo desenho de computador ajudava a manter coerência visual com a família de produtos e também combinava com a ideia de que o agent do Pageant não é humano, e sim um agente computadorizado
  • Os primeiros ícones do Pageant não tinham versão em preto e branco; em vez disso, era necessário um ícone pequeno de 16×16 para a System Tray
  • Como o Windows reduzia mal o ícone de 32×32, foram aplicados manualmente antialiasing na faixa do chapéu e no contorno do monitor no tamanho pequeno
  • O contorno foi mantido em preto para se destacar do fundo

• PuTTYgen

  • O ícone do PuTTYgen combina computador, raio e chave
  • A chave é um trocadilho visual discreto para indicar que a ferramenta gera e manipula chaves criptográficas
  • O PuTTYgen não faz comunicação de rede, então o raio é funcionalmente impreciso, mas foi incluído para manter a consistência visual com as ferramentas da família PuTTY
  • Ao contrário do PSCP, a direção da composição entre o computador e o objeto está invertida, facilitando distinguir os dois ícones

• Caixa de diálogo de configurações

  • O item da barra de tarefas da caixa de diálogo de configurações do PuTTY usava o ícone padrão de janela do Windows, e isso não ficava bonito
  • Em vez de simplesmente reutilizar o ícone principal, foi desenhado um ícone com uma grande chave inglesa sobreposta para indicar configuração ou modificação
  • Esse ícone voltou a incluir uma versão em preto e branco, possivelmente porque foi criado modificando um ícone que já tinha essa versão

Ícones redesenhados por script

• Por volta de 2007, começaram as reclamações de que os ícones de 32×32 estavam com aparência ruim
• Com telas maiores e o Windows passando a exibir ícones 48×48 por padrão, ícones de aplicativos que só tinham versão 32×32 apareciam ampliados
• Como 48 não é múltiplo de 32, o Windows ampliava os ícones de forma desigual, piorando ainda mais o resultado
• Em vez de redesenhar manualmente um conjunto novo inteiro, foi criado um script de geração que desenhava programaticamente cada componente dos ícones
• Com esse script, passaram a ser gerados automaticamente ícones 48×48, 32×32 e 16×16 para todas as ferramentas
  • Isso eliminou inconsistências como alguns ícones terem apenas versão pequena ou apenas versão em preto e branco
  • Todos os ícones passaram a ter todas as versões
• A parte mais difícil foi a dos ícones 16×16
  • Foi preciso reproduzir em código os julgamentos de antialiasing aplicados manualmente no Pageant
  • E o mesmo método teve de ser aplicado a todos os componentes gráficos
• O resultado do script não era idêntico aos desenhos originais à mão
  • O ícone do PuTTY ficou muito próximo, com diferença de apenas alguns pixels
  • O ícone do Pageant mudou não só no antialiasing da faixa do chapéu, mas também no tamanho do computador
• O script também passou a gerar ícones em preto e branco
  • Em 2007, provavelmente já era ainda mais raro usar Windows em monitores monocromáticos
  • Mas, graças à automação, foi possível até criar ícones monocromáticos de 48 pixels

pterm e os ícones do X11

• Em 2002, boa parte do código do PuTTY foi portada para Linux, dando origem ao PuTTY com GUI para Linux e ao emulador de terminal X11 pterm
• Programas X11 podem definir um bitmap de ícone nas propriedades da janela
  • O gerenciador de janelas pode usar isso como ícone de minimização, item da barra de tarefas, ícone da moldura da janela etc.
• Em 2002, acreditava-se que o GTK 1 não suportava definir ícones de janela, e também era trabalhoso fornecer vários formatos de arquivo bitmap, então nenhum ícone foi criado
• Depois que surgiu o script de geração, ficou fácil produzir saídas em vários formatos de arquivo, e também se descobriu que o GTK 1 podia sim definir a propriedade de ícone
• Como o pterm não faz comunicação de rede, seu ícone mostra apenas um computador em tamanho maior, sem raio
• A caixa de diálogo de configurações do pterm reutiliza a sobreposição de chave inglesa, como no ícone de configurações do PuTTY
• Em 2021, passou a ser possível criar uma versão do pterm para Windows, e esse ícone também passou a ser usado no pterm para Windows

Ícone do instalador e tratamento de cores

• O script de geração também podia produzir ícones em true colour, deixando de depender da antiga paleta de 16 cores
• O ícone do instalador do PuTTY inclui uma caixa de papelão aberta e um raio saindo dela em direção ao computador
  • A ideia era a imagem de que “o PuTTY salta da caixa para a máquina do usuário”
• A caixa de papelão exigia marrom, mas o marrom não existia na antiga paleta de 16 cores dos ícones do Windows
• Nos ícones true-colour, passou a ser possível usar marrom de verdade
• Mesmo assim, os ícones de 16 cores foram mantidos por compatibilidade retroativa
  • Misturando vermelho-escuro #800000 com preto #000000, amarelo-escuro #808000 e amarelo #ffff00 em proporção de 50:50, foram criadas três cores aproximadas de marrom
  • Em true-colour usa-se a cor média; na versão de 16 cores, isso é representado com meio-tom, alternando pixels de duas cores da paleta

Conjunto de ícones refeito em SVG

• O script antigo de ícones funciona bem em 32×32 e 48×48, e também reduz razoavelmente para 16×16, mas a qualidade fica ruim quando o tamanho aumenta mais
• Durante uma tentativa fracassada de portar para Mac, foi necessário um ícone 128×128 para o dock do MacOS, e a saída desse tamanho no script antigo não ficou satisfatória
• A porta para Mac foi praticamente abandonada, mas ter ícones totalmente escaláveis ainda poderia ser útil para outros usos
  • Eles poderiam ser usados também fora do contexto de ícones de GUI
  • Serviriam, por exemplo, para camisetas ou adesivos de notebook
• O segundo script de geração de ícones imita a lógica do script anterior, mas produz arquivos SVG em vez de bitmaps
• A versão atual em SVG é composta por oito ícones: PuTTY, configurações do PuTTY, pterm, configurações do pterm, PSCP, Pageant, PuTTYgen e instalador
• Em ícones pequenos, o SVG não consegue saber quais decisões de antialiasing tomar, então o script antigo produz renderizações melhores
• Para ícones grandes, especialmente quando são necessários bitmaps grandes em true colour, o recomendado é renderizar a partir do SVG

Por que manter o estilo antigo

• O estado atual do conjunto de ícones do PuTTY mantém o estilo dos anos 1990 e apenas adiciona diferentes formas de renderização
• Houve quem fosse contra o estilo totalmente anos 1990 e propusesse um novo conjunto de design, mas nenhuma proposta agradou o suficiente para ser adotada
• O estilo dos anos 1990 é visto como algo que faz o PuTTY parecer antigo de um jeito reconfortante
• Uma grande reformulação parece ter pouca chance real de ser aceita, e a expectativa é que os ícones atuais, ou algo muito próximo deles, permaneçam durante a vida do projeto

[GN⁺]

Comentários do Hacker News

• Parei por um momento na parte que dizia que era estranho o raio ser amarelo, porque para mim o amarelo parece “obviamente” a cor certa
  Mesmo fazendo uma busca por imagens, o raio amarelo aparece como o símbolo mais comum de eletricidade, junto com a placa de perigo padrão em preto e amarelo
  Não sei há quanto tempo esse uso existe historicamente nem de onde veio, mas parece ser algo usado há muito tempo em quadrinhos e cartoons

  • Simon Tathum é britânico, e eu não me lembro de já ter visto um raio em ciano por aqui
    Até a placa de risco de morte por choque elétrico no Reino Unido não é preta, e sim amarela com preto: https://www.hse.gov.uk/electricity/nearelectric.htm#signs
    Dito isso, se você buscar imagens de raios, aparecem bastante opções em ciano, roxo, vermelho etc. sobre aquele azul real
  • Especialmente porque o ícone do WinAmp naquela época também era um raio amarelo, e ele estava instalado em quase todo PC com Windows nos anos 90
  • Essa parte também me chamou atenção. O autor também questiona por que a tela é azul
    Talvez ele tenha esquecido que, no fim dos anos 90, essas escolhas de cor pareciam totalmente naturais e seguiam as convenções de design do Windows, então ninguém pensava muito nisso na época
  • Puro palpite, mas o raio amarelo do ícone do PuTTY pode ter permanecido amarelo por ter sido emprestado das placas de alerta de segurança
    O amarelo há muito tempo é preferido como cor de alta visibilidade, e em equipamentos industriais também teria funcionado bem como pictograma para indicar risco elétrico de forma clara, independentemente do idioma
    No fim, parece que o raio amarelo foi mantido por inércia, no sentido de “sempre foi assim”
  • Também pensei nisso recentemente. Veículos elétricos e híbridos plug-in usam muito detalhes em ciano para mostrar que são elétricos, mas ainda assim o amarelo continua parecendo mais natural como cor para representar eletricidade

• Esse é justamente um dos motivos pelos quais o PuTTY é atraente. Aplicativos que se parecem com o PuTTY passam uma sensação reconfortante
  Não sei se é a sensação de estabilidade que vem de uma aparência antiga e imutável, ou se é por usar elementos padrão do sistema operacional e por isso parecer mais consistente
  Em contrapartida, quanto mais os apps de estética “moderna” abusam de Material Design, cantos arredondados, efeitos de transição, baixo contraste e espaços grandes, mais aumentam minha desconfiança e meu ceticismo
  Não tenho qualificação para fazer análise psicológica, mas vendo que existe um grupo que gosta de design no estilo PuTTY, essa interpretação provavelmente não é tão rara

  • Software que usa os elementos gráficos padrão do Win32 é absurdamente rápido
    Claro, essa aparência por si só não garante que será rápido; ele pode desperdiçar tempo em outros lugares ou imitar esse visual com muito cuidado, mas também pode ser algo genuíno, como o antigo Notepad, que respondia instantaneamente
    Sinto falta daquele Notepad que “simplesmente colocava o arquivo num controle de texto e nem se preocupava com \r ausente em \n”. Era um programa que não fingia ser outra coisa e fazia exatamente o seu trabalho
    Acho que já vi uma reimplementação do Notepad em assembly; o código de cola que ligava o acesso a arquivos ao controle de texto ocupava talvez metade da tela, e talvez até incluísse o menu e a caixa de diálogo de ctrl+h
    Era parecido com o tipo de código de cola de que Python gosta de se gabar, mas era assembly puro, sem dependências além da DLL de acesso a arquivos e do conjunto mínimo de controles padrão
  • Sinto falta da época em que eu usava software Win32. Era simples, desenhava rápido, era limpo e tinha alta densidade de informação
    Agora tudo usa widgets enormes do “Windows moderno” ou, pior ainda, Electron
  • PuTTY e Winamp são softwares que uso no Windows há mais de 20 anos, e mesmo assim continuam com a mesma sensação. Não parecem velhos nem ultrapassados
  • Um dos princípios do Material Design parece ser que um retângulo não deve revelar sua identidade até você clicar nele
    Pode ser um botão, pode ser uma caixa de texto, ou pode ser só um retângulo

• A frase “percebi que, se eu esperasse até desenhar o ícone que queria, o Pageant nunca seria lançado” me marcou
  Muitos projetos que eu gostaria de tocar acabam parando nesse tipo de obstáculo autoimposto
  No meu caso, um exemplo clássico é travar na hora de decidir o nome do repositório ou da pasta de nível superior

  • É preciso ter prazo
    Na cultura hacker, gestão de projetos costuma ser desprezada como desperdício, mas descobrir formas de fazer um projeto andar é um papel valioso
  • Pessoalmente, uma das áreas em que os LLMs mais me ajudaram foi justamente superar a barreira de dar nomes
    Estranhamente, sou muito ruim para escolher nomes de repositórios, variáveis e structs
  • Tentei desenhar o ícone de um app em que estou trabalhando, e curvas SVG são realmente difíceis
    No fim saiu um logo muito mais simples do que eu pretendia no início, mas que fazia mais sentido
  • Isso é o famoso bikeshedding

• Ele disse que não lembra por que escolheu a tela azul, mas como azul era a cor padrão para representar telas em ícones do Win 3.x e do Win95, imagino que ele só tenha seguido essa convenção

  • EDIT.COM e o instalador do MS-DOS também usavam fundo azul
    Na prática, o azul — ou seja, a cor 1 do CGA — era extremamente popular como cor de fundo em muitas ferramentas
    Em coisas como Turbo Pascal e Turbo C, branco sobre azul era um tema muito comum, e o Borland dBase misturava fundos azuis e ciano em várias telas
    Como as cores disponíveis eram limitadas na época, o azul era uma das poucas cores de fundo que eram confortáveis para os olhos
    Também me lembro de que Windows 3.1, 95, 98 etc. usavam azul como cor de tela nos ícones que representavam computadores
    Em ícones com dois computadores, como “Ambiente de rede”, uma tela era azul e a outra era ciano
  • Nesta página dá para ver vários exemplos de ícones de computador quase idênticos ao que o PuTTY usou: http://toastytech.com/guis/win31.html
    Tive até que ampliar para conferir se não era exatamente o mesmo ícone
  • Acho que uma versão em preto e branco também faria sentido. Naquela época ainda existiam bastante computadores portáteis monocromáticos em uso

• Que nostalgia. Por volta de 2000, fiz um fork do PuTTY e criei uma versão chamada “RedBrick PuTTy”, com um botão para conectar por SSH ao redbrick.dcu.ie de uma vez só
  redbrick.dcu.ie era o servidor de terminal da Dublin City University Networking Society, e não lembro se eu era o administrador de sistemas ou o webmaster na época
  Mas lembro de ter editado o logo à mão para colocar um tijolo vermelho
  Dá para ver isso por pouco nesta imagem: https://wiki.redbrick.dcu.ie/images/b/b8/Putty_configuration...
  Graças a esse fork pequeno e meio bobo, o uso de SSH em vez de Telnet passou de algo como 5% para praticamente 100%
  Agradeço ao Simon pela licença que tornou esse tipo de coisa possível

• A passagem “escrevi código para desenhar programaticamente todos os componentes de cada imagem de ícone” mostra muito bem como o Simon aborda problemas
  Passei bastante tempo com o Simon nos anos 2000 e aprendi muito com ele sobre todo tipo de assunto, então isso realmente parece muito a cara dele

• Isso me fez lembrar da época em que, no Windows, a exibição padrão de ícones deixou de ser 32×32 e passou a 48×48, enquanto o MacOS queria ícones de 128×128 no Dock
  Um dos motivos mais superficiais, mas ao mesmo tempo mais marcantes, para eu ter migrado do Windows para o Mac OS X naquela época foram justamente os ícones de 128×128
  Os ícones, que eram o ponto de entrada dos apps no Finder e no Dock, pareciam muito mais atraentes e intuitivamente mais bonitos
  Em especial, os ícones de apps do Windows muitas vezes usavam menos cores do que os apps de Mac
  Claro que houve vários motivos para a mudança, mas quando vi pela primeira vez um desktop de Mac, os ícones causaram uma impressão forte o bastante para me fazer olhar mais a fundo

  • Não sei como era o OS X na época, mas uma das coisas que mais me irritavam nos aplicativos do Windows era que a maioria dos ícones parecia horrível
    Quase ninguém parecia se importar em fazer ícones decentes
    Mesmo depois de o tamanho padrão mudar para 48×48, havia casos em que os ícones não eram atualizados e ficavam borrados por causa da ampliação; em outros, até incluíam todos os tamanhos, mas a imagem só ficava boa no tamanho grande e era reduzida dali
    Aí, nos tamanhos normais de ícone, todos os detalhes viravam uma bagunça ilegível
    Eu odiava ver ícones feios na área de trabalho ou na barra de tarefas, então fazia meus próprios ícones personalizados e trocava os ícones dentro dos executáveis com um editor de recursos

• Algo se perde na transição de bitmap para SVG
  A granulação áspera do bitmap tem um charme próprio

  • Pixel art é melhor, mas acho que não é só isso
    Não dá para simplesmente transpor 1:1 e esperar um bom resultado. Além disso, na prática nem é 1:1, e no SVG os contornos ficaram muito mais finos
    Em imagens de baixa resolução, a imaginação preenche as lacunas
    Quanto maior a resolução, maior também a qualidade exigida. Arte vetorial é, por definição, de resolução infinita

• Tenho a impressão de que o ícone do chapéu de “Agent” pode ter sido inspirado no Forté Agent, que acho que era o software de Usenet mais popular no Windows
  Ele usava um motivo muito parecido: https://archive.org/details/forte-agent-1.6
  É bom ler isso diretamente de quem fez essa história

  • Estranhamente, isso me lembra Carmen Sandiego
    Até na versão moderna, de 2014, há um detetive noir na mesma posição, e o ícone do aplicativo continua sendo uma mulher de chapéu: https://youtu.be/h-_UNm_gycU?t=94
  • Veio da HQ Spy vs. Spy
  • Como já apareceu em outras respostas, a redação do texto quase chega a dizer diretamente que foi baseado em Spy vs. Spy
    Não sei de um link oficial que documente isso, mas, se você fizer uma busca de imagens em https://www.google.com/search?q=spy+vs+spy&udm=2, vai ver muitas imagens que parecem ter servido de inspiração para esse chapéu