- Los íconos de PuTTY mantienen un estilo antiguo creado entre fines de los años 90 y principios de los 2000, y fueron renderizados de nuevo varias veces para adaptarse a cambios en tamaños de pantalla y requisitos de plataforma
- Las primeras versiones eran imágenes de 32×32 dibujadas píxel por píxel en el editor de íconos de MSVC, y reflejaban limitaciones de la época, como la paleta de 16 colores recomendada por Windows y los íconos en blanco y negro
- Elementos como dos computadoras y un rayo, un documento, un sombrero, una llave y una llave inglesa servían para distinguir la función de cada herramienta y, a la vez, hacer que parecieran parte de la familia PuTTY
- Alrededor de 2007, cuando la visualización de íconos de 48×48 en Windows empeoró la calidad al ampliar los de 32×32, se empezó a generar automáticamente por script versiones de 48×48, 32×32, 16×16 y en blanco y negro
- Más adelante se creó un script generador de SVG para compensar las limitaciones del script de bitmaps en tamaños grandes, aunque para íconos pequeños el script anterior produce mejores resultados
El punto de partida de los íconos de PuTTY
- En marzo de 2025, un correo preguntando por el origen y la evolución del “logo”, el ícono del ejecutable de PuTTY para Windows, dio pie a ordenar la historia
- La estructura básica del diseño actual de los íconos se creó entre fines de los años 90 y principios de los 2000, y desde entonces se mantuvo sin grandes cambios de estilo
- Con el paso del tiempo, los íconos tuvieron que renderizarse de nuevo bajo varias restricciones, lo que fue tanto un problema de diseño gráfico como un problema técnico
La época de dibujar píxel por píxel a mano
- Al principio no se anticipó que harían falta íconos de varios tamaños, así que se dibujaban directamente en el editor de íconos de MSVC, sin automatización
- Los programas con GUI en Windows pierden identidad si no tienen ícono, por lo que PuTTY necesitó un ícono propio desde sus primeras etapas
-
PuTTY principal
- El ícono más antiguo de PuTTY que se conserva es una versión usada a principios de 1999, y no queda historial de control de versiones desde el inicio del proyecto, en el verano de 1996
- El ícono es de 32×32 píxeles y usa una paleta limitada compuesta por colores primarios y tonos de gris
- A mediados de los años 90 eran comunes las pantallas que no eran truecolour, y para los íconos de Windows se recomendaba usar una paleta fija de 16 colores
- La idea era que todos los íconos de la GUI reutilizaran los mismos 16 elementos de la paleta para consumir menos recursos de color de la pantalla
- También se ofrecía una versión en blanco y negro, siguiendo las recomendaciones de la época
- No hay recuerdos de haberla visto realmente en una pantalla en blanco y negro después de Win95, pero posiblemente estuviera relacionada con Win32s, que permitía intentar ejecutar programas de 32 bits en Windows 3.1
- El diseño muestra dos computadoras con forma de monitor CRT y gabinete típicos de los años 90, conectadas por un rayo
- El rayo sugiere comunicación eléctrica
- No quedó claro por qué se usó un rayo amarillo y pantallas azules
- Las pantallas azules no aludían a la Blue Screen of Death de Windows, porque en un uso normal de PuTTY solo un lado es Windows y ninguno de los dos está crasheado
-
PSCP y PSFTP
- En 1999, un colaborador envió una implementación de SCP y así nació PSCP, junto con un ícono propio
- PSCP no puede usarse sin argumentos de línea de comandos, así que no había mucha necesidad práctica de identificarlo al ejecutarlo desde la GUI o desde el Start Menu
- El ícono de PSCP reemplaza una de las computadoras del ícono de PuTTY por un documento, y conecta la computadora restante y el documento con un rayo
- Más adelante, PSFTP, la herramienta de transferencia de archivos, reutilizó el mismo ícono
- PSFTP puede ejecutarse sin argumentos de línea de comandos y permite ingresar el destino de conexión en un prompt interactivo, por lo que aprovecha ese mismo ícono de forma más práctica que PSCP
- Si ambas herramientas usan el mismo ícono, hay que tener cuidado para distinguirlas en Explorer, pero no se encontró una forma sencilla de representar visualmente la diferencia
-
Pageant
- Pageant es un SSH agent, y al principio se intentó dibujar como ícono el rostro de un agente secreto
- La cara no salió bien, pero el sombrero de ala ancha que sí quedó satisfactorio terminó puesto sobre la computadora de PuTTY
- Reutilizar el mismo diseño de computadora lo hace visualmente coherente con la familia de productos, y también encaja con que el agent de Pageant no sea humano sino computarizado
- El ícono inicial de Pageant no tenía versión en blanco y negro; en cambio, hacía falta un ícono pequeño de 16×16 para la System Tray
- Como Windows reducía los íconos de 32×32 con mala calidad, se aplicó antialiasing a mano en la banda del sombrero y el contorno del monitor para el tamaño pequeño
- El contorno se mantuvo negro para distinguirlo del fondo
-
PuTTYgen
- El ícono de PuTTYgen combina una computadora, un rayo y una llave
- La llave es un débil juego visual de palabras que indica que la herramienta genera y maneja claves criptográficas
- PuTTYgen no realiza comunicación de red, así que el rayo es funcionalmente inexacto, pero se incluyó para darle coherencia visual como herramienta de la familia PuTTY
- A diferencia de PSCP, la orientación de la computadora y el objeto está invertida, lo que hace más fácil distinguir ambos íconos
-
Cuadro de configuración
- La entrada en la taskbar del cuadro de configuración de PuTTY usaba el ícono de ventana predeterminado de Windows, y se veía mal
- En vez de reutilizar tal cual el ícono principal, se dibujó un ícono con una gran llave inglesa superpuesta para representar configuración y modificación
- Este ícono volvió a incluir una versión en blanco y negro, posiblemente porque se modificó un ícono que ya tenía una versión en blanco y negro
Íconos redibujados por script
- Alrededor de 2007 empezaron las quejas de que los íconos de 32×32 se veían mal
- Las pantallas eran más grandes y Windows empezó a mostrar íconos de 48×48 por defecto, así que los íconos de aplicaciones que solo tenían 32×32 aparecían ampliados
- Como 48 no es múltiplo de 32, Windows estiraba los íconos de forma no uniforme, y el resultado era todavía peor
- En lugar de volver a dibujar a mano todo el nuevo conjunto de íconos, se escribió un script generador que dibujaba por programa cada componente de los íconos
- Con ese script se generaban automáticamente íconos de 48×48, 32×32 y 16×16 para todas las herramientas
- Desapareció la inconsistencia de que solo algunos íconos tuvieran versiones pequeñas o en blanco y negro
- Todos los íconos pasaron a tener todas las versiones
- La parte más difícil fueron los íconos de 16×16
- Había que reproducir en código las decisiones de antialiasing que se habían aplicado a mano en Pageant
- Había que aplicar el mismo enfoque a todos los componentes gráficos
- El resultado del script no es exactamente igual al dibujo original hecho a mano
- El ícono de PuTTY quedó muy cercano, con apenas unos píxeles de diferencia
- En el ícono de Pageant cambiaron no solo el antialiasing de la banda del sombrero, sino también el tamaño de la computadora
- El script también se hizo capaz de generar íconos en blanco y negro
- Para 2007, usar Windows en pantallas en blanco y negro probablemente era todavía menos común
- Gracias a la automatización, incluso se pudieron crear íconos en blanco y negro de 48 píxeles
pterm e íconos de X11
- En 2002 se portó a Linux una parte importante del código de PuTTY, y se crearon PuTTY con GUI para Linux y el emulador de terminal X11 pterm
- Los programas X11 pueden establecer un bitmap de ícono en las propiedades de la ventana
- El gestor de ventanas puede usarlo como ícono minimizado, entrada de la taskbar, ícono del marco de la ventana, etc.
- En 2002 se creía que GTK 1 no soportaba configurar íconos de ventana, y como también era engorroso proporcionar varios formatos de archivo bitmap, no se creó ningún ícono
- Después de que existió el script generador, se volvió sencillo producir varios formatos de archivo, y también se descubrió que GTK 1 sí podía establecer la propiedad de ícono
- Como pterm no realiza comunicación de red, su ícono muestra solo una computadora grande, sin rayo
- El cuadro de configuración de pterm reutiliza la superposición de llave inglesa, como el ícono de configuración de PuTTY
- En 2021 se pudo crear un pterm que funcionara en Windows, y este ícono también pasó a usarse en pterm para Windows
Ícono del instalador y tratamiento del color
- El script generador también puede producir íconos true colour, por lo que ya no queda atado a la antigua paleta de 16 colores
- El ícono del instalador de PuTTY incluye una caja de cartón corrugado abierta y un rayo que sale hacia la computadora
- La imagen buscada era que “PuTTY salta de la caja hacia la máquina del usuario”
- La caja de cartón requería marrón, pero el marrón no existía en la paleta antigua de 16 colores para íconos de Windows
- En los íconos true-colour se podía usar marrón real
- Aun así, se mantuvieron los íconos de 16 colores por compatibilidad hacia atrás
- Se mezcló rojo oscuro
#800000con negro#000000, amarillo oscuro#808000y amarillo#ffff00en proporciones 50:50 para crear tres colores aproximados al marrón - En true-colour se usa el color promedio, y en la versión de 16 colores se representa con halftone, alternando píxeles de los dos colores de la paleta
- Se mezcló rojo oscuro
Conjunto de íconos recreado en SVG
- El script de íconos existente funciona bien en 32×32 y 48×48, y la reducción a 16×16 también es aceptable, pero al escalar a tamaños mayores la calidad no es buena
- Durante un intento fallido de portar a Mac, el dock de MacOS necesitaba íconos de 128×128, y la salida del script existente en ese tamaño no resultó satisfactoria
- El port a Mac quedó prácticamente abandonado, pero tener íconos totalmente escalables podía ser útil para otros fines
- También pueden usarse fuera del contexto de los íconos de GUI
- Incluso para usos como playeras o stickers para laptops
- El segundo script generador de íconos imita la forma de pensar del script existente, pero en lugar de bitmaps genera archivos SVG
- La versión SVG actual consta de 8 íconos: PuTTY, configuración de PuTTY, pterm, configuración de pterm, PSCP, Pageant, PuTTYgen y el instalador
- En íconos pequeños, como SVG no puede conocer las decisiones de antialiasing, el script anterior produce un mejor render
- Para íconos grandes, especialmente cuando se necesitan bitmaps grandes en true colour, se recomienda renderizar a partir del SVG
Por qué se mantiene el estilo antiguo
- El estado actual del conjunto de íconos de PuTTY consiste en mantener el estilo de los años 90 y agregar varios métodos de renderizado
- Hubo personas que se opusieron al estilo general de los años 90 y propusieron nuevos conjuntos de diseño, pero ninguna propuesta gustó lo suficiente como para adoptarla
- El estilo de los años 90 se acepta como un elemento que hace que PuTTY se vea tranquilizadoramente anticuado
- Parece poco probable que se acepte un rediseño importante, y se espera que los íconos actuales, o algo casi igual, se mantengan durante la vida del proyecto
1 comentarios
Opiniones en Hacker News
Me detuve un momento en la parte de que era raro que el rayo fuera amarillo, porque para mí el amarillo se siente “obviamente” como el color correcto.
Incluso al buscar imágenes, el rayo amarillo es el símbolo más común para representar la electricidad, y también me viene a la mente la señal de peligro estándar en negro y amarillo.
No sé qué tan antigua sea históricamente esta representación ni de dónde venga, pero parece que se usa ampliamente desde hace mucho en cómics y caricaturas.
Las señales de riesgo de muerte por electrocución en Reino Unido también son negras sobre fondo amarillo, no sobre fondo negro: https://www.hse.gov.uk/electricity/nearelectric.htm#signs
Dicho eso, si buscas imágenes de rayos, sí aparecen bastantes opciones como turquesa sobre azul real, morado, rojo, etc.
Probablemente a fines de los 90 esas elecciones de color se sentían completamente naturales y seguían las convenciones de diseño de Windows, así que parece haber olvidado que en ese momento no se pensaba demasiado en ello.
El amarillo se prefiere desde hace mucho como color de alta visibilidad, y en las carcasas de equipos industriales seguramente funcionaba bien como pictograma para comunicar claramente el riesgo eléctrico sin depender del idioma.
Al final, parece que el rayo amarillo se mantuvo por inercia, algo así como “siempre se hizo así”.
Una de las razones por las que PuTTY resulta atractivo es justamente eso. Una aplicación que se ve como PuTTY transmite cierta sensación de tranquilidad.
No sé si su aspecto antiguo da una sensación de estabilidad por no haber cambiado, o si se ve más consistente por usar elementos básicos del sistema operativo.
En cambio, con las apps de estética “moderna”, mientras más Material Design, esquinas redondeadas, efectos de transición, bajo contraste y espacios en blanco enormes tienen, más desconfianza y escepticismo me generan.
No estoy calificado para hacer un análisis psicológico, pero viendo que hay un grupo al que le gusta el diseño estilo PuTTY, esta interpretación probablemente no sea tan rara.
Que tenga ese aspecto no garantiza necesariamente que sea rápido; podría estar desperdiciando tiempo en otro lado o imitando cuidadosamente esa apariencia, pero también podría ser algo real que responde al instante, como el viejo Notepad.
Extraño ese Notepad que “simplemente metía el archivo en un control de texto y no se preocupaba por cosas como
\rsin\n”. Era un programa que no pretendía ser otra cosa y hacía exactamente su trabajo.Creo que alguna vez vi una reimplementación de Notepad en ensamblador, donde el código de pegamento para conectar el acceso a archivos con el control de texto ocupaba como media pantalla, y tal vez hasta incluía el menú de
ctrl+hy el cuadro de diálogo.Era parecido al código de pegamento del que presume Python, pero en ensamblador puro y sin dependencias aparte de la DLL de acceso a archivos y un conjunto mínimo de controles estándar.
Ahora todo usa widgets enormes del “Windows moderno” o, peor todavía, Electron.
Podría ser un botón, podría ser un cuadro de texto o podría ser simplemente un rectángulo.
Me llegó la frase “me di cuenta de que, si esperaba hasta dibujar el ícono que quería, Pageant simplemente nunca saldría”.
Muchos proyectos que quisiera tocar se quedan detenidos por este tipo de obstáculos autoinducidos.
En lo personal, un ejemplo típico es quedarme trabado eligiendo el nombre del repositorio o de la carpeta raíz.
En la cultura hacker, la gestión de proyectos siempre se descarta como si fuera un desperdicio, pero encontrar formas de hacer que un proyecto avance es un rol valioso.
Por alguna razón se me da muy mal elegir nombres para repositorios, variables, estructuras y cosas así.
Al final salió un logo mucho más simple que lo que quería hacer al principio, pero que tiene más sentido.
Dice que no recuerda por qué eligió azul para la pantalla, pero en los íconos de Win 3.x y Win95 el azul era un color estándar para representar pantallas, así que parece que simplemente siguió esa convención.
EDIT.COMy el instalador de MS-DOS también usaban fondo azul.De hecho, el azul, es decir, el color CGA número 1, era muy popular como color de fondo en muchas herramientas.
En cosas como Turbo Pascal y Turbo C, un fondo azul con texto blanco era un tema de color común, y Borland dBase mezclaba fondos azules y turquesa en varias pantallas.
Como los colores disponibles en ese entonces eran limitados, el azul era uno de los pocos colores de fondo cómodos para la vista.
Recuerdo que Windows 3.1, 95, 98, etc. también usaban azul como color de pantalla en los íconos que representaban computadoras.
En íconos con dos computadoras, como “Entorno de red”, una pantalla era azul y la otra turquesa.
Tuve que ampliarlos para comprobar que no fueran el mismo ícono.
Me trae recuerdos. Alrededor del 2000 hice un fork de PuTTY y creé una versión llamada “RedBrick PuTTy”, con un botón para conectarse por SSH de una vez a redbrick.dcu.ie
redbrick.dcu.ie era el servidor de terminal de la Dublin City University Networking Society, y ya no recuerdo si en ese entonces yo era administrador de sistemas o webmaster
Pero sí recuerdo haber editado el logo a mano para ponerle ladrillos rojos
Apenas se puede ver en esta imagen: https://wiki.redbrick.dcu.ie/images/b/b8/Putty_configuration...
Gracias a este pequeño y tonto fork, el uso de SSH en lugar de Telnet pasó de alrededor del 5% a prácticamente el 100%
Gracias a Simon por usar una licencia que permitió que cosas así fueran posibles
La parte de “escribí código que dibuja programáticamente todos los componentes de cada imagen de ícono” es un muy buen ejemplo de la forma en que Simon aborda los problemas
En los 2000 pasé bastante tiempo con Simon y pude aprender mucho sobre todo tipo de temas; este enfoque realmente se siente muy propio de él
Me hizo acordar a cuando, en Windows, la visualización predeterminada de los íconos pasó a ser de 48×48 en vez de 32×32, y MacOS quería íconos de 128×128 en el Dock
Una de las razones más superficiales, pero al mismo tiempo más fuertes, por las que en esa época pasé de Windows a Mac OS X fueron justamente los íconos de 128×128
Los íconos que funcionaban como punto de entrada a las apps en Finder o en el Dock se veían mucho más atractivos e instintivamente más bonitos
En particular, los íconos de apps de Windows muchas veces usaban menos colores que los de las apps de Mac
Claro que hubo varias razones para el cambio, pero cuando vi por primera vez el escritorio de Mac, los íconos me causaron una impresión lo bastante fuerte como para hacerme mirar más a fondo
Parecía que casi nadie se preocupaba por hacer íconos bien hechos
En algunos casos, aunque el tamaño predeterminado había cambiado a 48×48, no habían actualizado el ícono y se veía borroso por el escalado; en otros, sí incluían todos los tamaños, pero simplemente reducían una imagen que solo se veía bien en tamaño grande
Entonces, en los tamaños habituales de ícono, todos los detalles se empastaban y quedaba un desastre
Para no tener que ver íconos feos en el escritorio o en la barra de tareas, solía crear íconos personalizados y cambiar los íconos dentro de los ejecutables con un editor de recursos
Al pasar de bitmap a SVG, se pierde algo
La textura granulada del bitmap tiene un encanto particular
No se puede simplemente trasladarlo 1:1 y esperar un buen resultado. Además, en realidad tampoco es 1:1: en el SVG los contornos quedaron mucho más delgados
En una imagen de baja resolución, la imaginación rellena los huecos
A mayor resolución, mayor es la calidad necesaria. El arte vectorial, por definición, tiene resolución infinita
Creo que el ícono del sombrero de “Agent” quizá se inspiró en Forté Agent, que en mi opinión era el software de Usenet más popular para Windows
Usaba un motivo muy parecido: https://archive.org/details/forte-agent-1.6
Es bueno leer esta historia directamente de la persona que la hizo
Incluso en la versión moderna de 2014 hay un detective de cine negro en la misma posición, y el ícono de la aplicación sigue siendo una mujer con sombrero: https://youtu.be/h-_UNm_gycU?t=94
No conozco un enlace oficial que lo documente, pero si se hace una búsqueda de imágenes en https://www.google.com/search?q=spy+vs+spy&udm=2, se pueden ver muchas imágenes que inspiraron ese sombrero