≡En resumen
- Un icono representa algo por semejanza: la lupa significa «buscar» porque recuerda a la acción de examinar.
- Icono e ícono son formas correctas; en España predomina icono.
- En interfaces, los iconos identifican aplicaciones, archivos y acciones, y funcionan mejor acompañados de una etiqueta de texto.
- No es lo mismo un icono que un símbolo, un pictograma, un emoji o un logotipo, aunque a veces se solapen.
- Un buen icono es simple, coherente con el resto del sistema, legible en tamaños pequeños y accesible.
01 ¿Qué es un icono?
La palabra icono tiene varios significados según el contexto, pero todos comparten una idea: una imagen que se parece a lo que representa. Por eso entendemos sin explicaciones que un sobre significa «correo», una casa «inicio» o una papelera «eliminar».
Hoy la acepción más buscada es la informática: las pequeñas imágenes de tu móvil, de tu escritorio o de cualquier página web que te permiten abrir una aplicación o ejecutar una acción con un toque.
| Ámbito | Qué significa | Ejemplo |
|---|---|---|
| Informática y diseño | Imagen esquemática que identifica un programa, archivo o función | El icono de WhatsApp en la pantalla de inicio |
| Semiótica | Signo que se parece a lo que representa | La señal de tráfico de curva peligrosa |
| Arte religioso | Imagen sagrada pintada sobre tabla, típica de las Iglesias cristianas orientales | Un icono bizantino de la Virgen |
| Uso figurado | Persona o cosa muy representativa de algo | «Es un icono de la moda de los noventa» |
02 Origen de la palabra y del icono informático
El término viene del griego eikṓn, «imagen», y llegó al español a través del francés. Durante siglos designó sobre todo las imágenes religiosas bizantinas y rusas. A finales del siglo XIX, el filósofo Charles S. Peirce lo usó en semiótica para distinguir tres tipos de signos: el icono (se parece a lo que representa), el índice (tiene una relación física con ello, como el humo con el fuego) y el símbolo (se basa en una convención, como las letras).
-
1
1975: el icono entra en la informática
David Canfield Smith asocia el término a la informática en su tesis doctoral Pygmalion, en la que propone entidades visuales llamadas iconos.
-
2
1981: Xerox Star
Primer ordenador comercial con metáfora de escritorio: documentos, carpetas y papelera como iconos. Norm Cox diseña para él el icono de tres líneas que hoy llamamos menú hamburguesa.
-
3
1984: el Macintosh
Susan Kare, contratada por Apple en 1983, diseña iconos como el Happy Mac, la papelera o el símbolo ⌘ de la tecla Comando.
-
4
Años 2010: móvil e iconos planos
Las pantallas táctiles y el diseño plano generalizan los iconos simples, de línea o relleno, que se adaptan a cualquier tamaño.
03 Iconos y significados más comunes
Muchos iconos se han convertido en convenciones universales. Algunos conservan objetos que ya casi nadie usa, como el disquete para «guardar»: funcionan porque los hemos aprendido, no porque el objeto siga presente.
| Icono | Significado habitual |
|---|---|
| Tres líneas horizontales (☰) | Menú de navegación (menú hamburguesa) |
| Tres puntos (⋮ o ⋯) | Más opciones |
| Lupa | Buscar |
| Casa | Página o pantalla de inicio |
| Engranaje | Ajustes o configuración |
| Campana | Notificaciones |
| Corazón o estrella | Me gusta o favoritos |
| Papelera | Eliminar |
| Lápiz | Editar |
| Disquete | Guardar |
| Flecha hacia abajo sobre una línea | Descargar |
| Candado | Seguro, privado o conexión cifrada |
| Carrito o bolsa | Cesta de la compra |
| Aspa (X) | Cerrar o cancelar |
04 Tipos de iconos
Iconos de aplicación
Identifican una app o programa en el escritorio, el móvil o una tienda de aplicaciones. Son la cara de la marca dentro del dispositivo.
Iconos de acción
Ejecutan algo: buscar, compartir, borrar, enviar. Suelen ir en botones y barras de herramientas.
Iconos de navegación
Llevan a otras secciones: inicio, menú, perfil, atrás. Son la base de la barra inferior de muchas apps.
Iconos de estado
Informan sin requerir acción: batería, wifi, notificaciones pendientes, error o éxito.
Iconos de archivo
Indican el tipo de documento: PDF, hoja de cálculo, imagen o carpeta.
Favicon
El pequeño icono de una web que aparece en la pestaña del navegador y, a veces, junto al resultado de Google.
| Estilo | Cómo es | Cuándo usarlo |
|---|---|---|
| Lineal (outline) | Solo contorno, trazo uniforme | Interfaces limpias, estado inactivo |
| Relleno (filled) | Formas sólidas | Estado activo o seleccionado, tamaños pequeños |
| Plano (flat) | Colores planos sin volumen | Apps y webs actuales, ilustración |
| Esqueuomórfico | Imita materiales y objetos reales | Juegos o interfaces que buscan realismo |
| Animado | Micro-animación al interactuar | Dar respuesta visual a una acción |
05 Icono, símbolo, pictograma, emoji y logotipo: diferencias
Son términos que se usan como sinónimos, pero no lo son. La diferencia clave es cómo se relacionan con lo que representan y para qué se usan.
| Término | Qué es | Ejemplo |
|---|---|---|
| Icono | Imagen que se parece a lo que representa o identifica una función | Una cámara para abrir la cámara |
| Símbolo | Signo convencional: hay que aprender su significado | El símbolo @ o la paloma de la paz |
| Pictograma | Icono pensado para señalización y comunicación universal | El muñeco de los aseos o de la salida de emergencia |
| Emoji | Carácter de texto con imagen, estandarizado por Unicode | 😀 escrito en un mensaje |
| Logotipo / isotipo | Identidad gráfica de una marca | La manzana de Apple es un isotipo |
06 Cómo se diseña un buen icono
Diseñar iconos parece sencillo, pero exige síntesis: expresar una idea con muy pocos trazos y que se entienda a 16 píxeles igual que a 512. Es una tarea propia del diseño gráfico y, dentro de un producto digital, del diseño de interfaz.
- ✓Simplicidad: elimina todo lo que no ayude a reconocer la idea.
- ✓Coherencia: mismo grosor de trazo, esquinas, perspectiva y rejilla en toda la familia de iconos.
- ✓Legibilidad: prueba cada icono en su tamaño real y sobre fondos claros y oscuros.
- ✓Formato vectorial: diseña y exporta en SVG para que se vea nítido en cualquier pantalla.
- ✓Etiqueta de texto o texto alternativo: WCAG pide una alternativa textual para el contenido no textual.
- ✓Contraste suficiente: WCAG 2.1 exige un contraste mínimo de 3:1 para los componentes gráficos necesarios para entender la interfaz.
- ✓Área táctil cómoda: WCAG 2.2 fija un tamaño mínimo de objetivo de 24 × 24 píxeles CSS, salvo excepciones.
07 Iconos en webs y apps: formatos y buenas prácticas
SVG
Formato vectorial recomendado para la web: ligero, escalable y fácil de colorear con CSS.
PNG
Mapa de bits con transparencia. Útil para iconos de app y cuando necesitas varias resoluciones fijas.
ICO e ICNS
Formatos de icono de Windows y macOS. El .ico sigue usándose para el favicon de muchas webs.
Fuentes de iconos
Iconos servidos como tipografía. Hoy se prefieren los SVG por accesibilidad y rendimiento.
Una tienda online sustituye su barra inferior de cinco iconos sin texto por iconos con etiqueta («Inicio», «Buscar», «Cesta», «Favoritos», «Cuenta»). Los usuarios dejan de abrir secciones por error y encuentran antes el carrito. Es el tipo de ajuste que se valida con un test de usabilidad y que forma parte de un buen diseño UX/UI.
Preguntas frecuentes sobre Icono
Es una representación gráfica esquemática que identifica un programa, un archivo o una función de una interfaz. Al hacer clic o tocarlo, abres la aplicación o ejecutas la acción.
Las dos formas son correctas. Icono es la más usada en España y la más cercana a la etimología; ícono es frecuente en América.
Icon significa icono: una imagen que representa algo por semejanza, una app o función en una interfaz o, en sentido figurado, una persona muy representativa de algo.
El icono se parece a lo que representa, como una lupa para buscar. El símbolo es convencional y su significado se aprende, como la arroba o las letras.
No exactamente. Un emoji es un carácter de texto estandarizado por Unicode que se escribe como una letra; un icono es un elemento gráfico de la interfaz o del diseño.
SVG, porque es vectorial, ligero y se ve nítido en cualquier resolución. Para el favicon se siguen usando también ICO y PNG.
Es una imagen sagrada pintada normalmente sobre tabla, característica de las Iglesias cristianas orientales, como la ortodoxa griega o rusa.
Fuentes consultadas
Sobre el autor
Equipo editorial de appyweb
Marketing, SEO y desarrollo con IA
Especialistas de appyweb en SEO, publicidad, desarrollo web y automatización con IA.