Iconos en el menú digital: cuáles usar y cómo hacerlos accesibles

Un menú digital necesita pocos iconos, bien elegidos y siempre acompañados de texto. Los que más trabajo hacen son los de dietas y alérgenos, el de menú (hamburguesa) en móvil y un selector de idioma con nombres de idioma en lugar de banderas. Si además cuidas el contraste, el tamaño táctil y las alternativas de texto, tu menú será más claro para todos y más fácil de defender bajo la ADA.

Esta guía está pensada para propietarios y gerentes de restaurantes en Estados Unidos. Recorremos qué iconos usar, cuáles evitar, cómo encajarlos con tu marca y qué medidas técnicas los hacen legibles en un teléfono con una mano y con sol en la terraza.

Fowst

fowst.com

Un menú QR más claro para tus clientes

Fowst ofrece menús digitales QR interactivos con pedidos desde la mesa, sin aplicaciones y con soporte para más de 100 idiomas.

Conoce Fowst

En resumen

Un icono es una ayuda, no un sustituto: acompáñalo de una etiqueta de texto y de una leyenda visible.
Para dietas y alérgenos, usa un set corto y coherente. La FDA reconoce nueve alérgenos principales en EE. UU., y tu menú debe cubrirlos con claridad.
Para elegir idioma, usa un desplegable con los nombres nativos (Español, English, Français), no banderas.
La ADA aplica a los servicios en línea de los negocios abiertos al público; WCAG es la referencia práctica: contraste 4.5:1 y alternativas de texto.
Un icono puede ser pequeño, pero su zona táctil debe medir al menos 44 × 44 px.

Tabla de contenidos

Qué iconos necesita de verdad un menú digital
Iconos de navegación: hamburguesa, flechas y carrito
Banderas de idioma: por qué conviene evitarlas
Branding en los iconos sin perder claridad
ADA y lectores de pantalla
Tamaño de texto, contraste y zona táctil en el móvil
Nuestra visión: menos símbolos, más comprensión
Pon en práctica estos iconos con tu menú QR
Preguntas frecuentes
Fuentes

El error habitual es llenar el menú de símbolos porque se ven modernos. Nielsen Norman Group señala que, en menús largos, los iconos simplificados pueden ayudar a diferenciar opciones y a escanearlas, pero deben ser señales adicionales y no reemplazar etiquetas claras.

Para un restaurante, la lista útil es corta:

Dieta: vegetariano, vegano, sin gluten.
Alérgenos: los nueve principales, o los que realmente aparezcan en tu carta.
Sabor y popularidad: picante, favorito de la casa, novedad, especial del chef.
Navegación: menú (hamburguesa), flecha o caret para categorías desplegables, carrito, búsqueda e idioma.

Cualquier otro símbolo (un tenedor por cada entrante, una estrella decorativa) suma ruido. Si dudas, hazte una pregunta: ¿un comensal que ve el icono por primera vez sabrá qué significa sin leyenda? Si la respuesta es no, añade texto. Como resume una guía de diseño, casi ningún icono es universal, y la solución más simple es escribir la etiqueta al lado.

Iconos de dieta, sabor y destacados

Las etiquetas más habituales en cartas de EE. UU. son vegetariano o vegano, sin gluten, picante, popular, mariscos o pescado, lácteos, huevo, soja, frutos secos, cacahuete y sésamo. Un catálogo de iconos para menús muestra justo ese repertorio, que además suma opciones como orgánico o local. No necesitas todos: elige los que describan tu cocina.

Tres reglas prácticas:

Una letra o un dibujo, pero una sola convención. Si «V» es vegetariano en un plato, no puede ser vegano en otro.
Leyenda fija. Colócala arriba o al final de cada categoría, o en un panel que se abra con un toque. Las guías para lectores de cartas también recomiendan incluir una leyenda y no suponer el significado de símbolos desconocidos.
Máximo tres o cuatro iconos por plato. Si un plato necesita seis, es mejor un detalle ampliable con texto completo.

Iconos de alérgenos: claridad antes que estilo

La FDA enumera nueve alérgenos principales en Estados Unidos: leche, huevo, pescado, crustáceos, frutos secos de árbol, cacahuete, trigo, soja y sésamo. El USDA ofrece la misma lista de los «9 grandes» en español, útil para unificar tu vocabulario: «cacahuete» o «maní», «mariscos» o «crustáceos». Elige el término que use tu clientela y mantenlo en toda la carta.

El icono de alérgeno informa, pero no sustituye la conversación. Incluye una línea visible del tipo «Si tienes una alergia, avisa a tu mesero» y asegúrate de que el equipo de sala sepa responder. Para obligaciones concretas de etiquetado en tu estado o municipio, consulta con tu departamento de salud local.

Iconos de navegación: hamburguesa, flechas y carrito

En móvil, el icono de tres líneas sigue siendo reconocible para la mayoría de usuarios según Nielsen Norman Group (2025), que recomienda ponerlo arriba a la izquierda con la etiqueta visible «Menú». Aplícalo literalmente: icono más palabra.

Hay un matiz importante para restaurantes. El mismo grupo comprobó en 2016 que ocultar la navegación reduce casi a la mitad su descubribilidad y empeora el éxito de las tareas. Traducido a tu carta: no escondas las categorías (Entrantes, Platos, Postres, Bebidas) detrás de una hamburguesa. Muéstralas como una barra horizontal fija o como pestañas, y reserva el icono de menú para opciones secundarias como idioma, ayuda o información del local.

Para categorías que se expanden, usa un caret o una flecha: distingue un enlace directo de un elemento desplegable. En una carta con subcategorías (por ejemplo, Vinos: tintos, blancos, espumosos), esa flecha evita toques inútiles.

El carrito merece una mención aparte si tu menú permite pedir desde la mesa. Debe mostrar siempre el número de artículos y el total, con texto («Tu pedido») y no solo el dibujo de una bolsa. Si quieres ordenar mejor las categorías antes de decidir los iconos, nuestra guía sobre la estructura del menú digital detalla cómo agrupar platos para reducir errores.

El patrón correcto: icono y etiqueta juntos

El principio se repite en todas las fuentes y también en ejemplos de la hostelería: los símbolos funcionan mejor cuando se acompañan de iconos con etiquetas claras en categorías y navegación, de modo que nadie tenga que adivinar. Esa combinación sirve además a quien usa lector de pantalla, como verás más abajo.

Banderas de idioma: por qué conviene evitarlas

Si atiendes a turistas o a una clientela bilingüe, el selector de idioma es probablemente el icono más importante de tu menú. La tentación es poner banderas. No lo hagas. El sistema de diseño del gobierno federal, el U.S. Web Design System, desaconseja banderas y códigos de país: no equivalen a idiomas y pueden resultar excluyentes. Un ejemplo claro: la bandera de España no representa a un comensal de México, y la de EE. UU. no representa el inglés de todos.

La pauta de ese mismo sistema para tres o más idiomas es sencilla:

Un desplegable titulado «Idiomas» arriba a la derecha para idiomas de izquierda a derecha (arriba a la izquierda para los de derecha a izquierda, cuando sea posible).
Cada idioma escrito en su nombre nativo: Deutsch, English, Español, Français, 中文.
Orden alfabético.

Puedes acompañar el desplegable con un icono de globo terráqueo, siempre con la palabra al lado. Con eso, un turista que no entiende el idioma por defecto reconoce su lengua escrita en su propia forma. Si tu menú se traduce a muchos idiomas, esta lista alfabética escala mejor que una fila de banderas que ocupa media pantalla.

Branding en los iconos sin perder claridad

Tu marca debe notarse en los iconos, pero sin que el estilo los vuelva ilegibles. Una guía de diseño para menús recomienda usar un solo set con grosores de trazo, radios de esquina y pesos visuales uniformes. La misma fuente propone definir color, tipografía e iconos como «tokens» para actualizarlos de forma rápida y mantener un aspecto unificado en todas las plataformas.

En la práctica:

Elige una familia de iconos (línea o rellenos) y no mezcles.
Usa uno o dos colores de marca para los iconos, y comprueba su contraste contra el fondo antes de aprobarlos.
Reserva el color de acento para acciones (añadir al pedido), no para decoración.
No dependas del color para distinguir significados: un icono vegano verde y uno vegetariano verde claro no se distinguen para una persona daltónica. Cambia la forma o añade una letra.
Prueba con gente real: enseña tu carta a tres personas ajenas al restaurante y pregúntales qué significa cada símbolo.

Si trabajas también con fotos del plato, mantén el mismo criterio visual: fotos reales y coherentes refuerzan la identidad más que un icono recargado. Y para el código QR de la mesa, la guía de diseño de menú QR ayuda a que la marca llegue desde el primer escaneo.

ADA y lectores de pantalla

La ADA exige que los negocios abiertos al público hagan accesibles sus servicios, también los que ofrecen en línea. El Departamento de Justicia explica en su guía sobre accesibilidad web y la ADA que no fija estándares técnicos detallados y menciona las pautas WCAG como orientación. Para un restaurante, la lectura prudente es que un menú digital, sea una web, un PDF o una carta QR, forma parte de ese servicio. Para dudas legales concretas sobre tu local, consulta con un abogado especializado en ADA. Nosotros tratamos el tema desde el lado operativo en nuestra guía normativa de accesibilidad en menús digitales.

Cómo describir un icono a un lector de pantalla

Un comensal con baja visión que usa un lector de pantalla no ve el dibujo: oye su texto alternativo. La W3C explica que la alternativa de texto debe comunicar la función del icono, por ejemplo «Buscar» y no «lupa». Aplícalo así:

Icono	Texto alternativo incorrecto	Texto alternativo correcto
Lupa	«lupa»	«Buscar en el menú»
Carrito	«bolsa»	«Ver tu pedido, 3 artículos»
Hoja verde	«hoja»	«Vegano»
Globo	«globo terráqueo»	«Idiomas»
Chile	«pimiento rojo»	«Picante»

Los iconos puramente decorativos (un adorno junto al título de una sección) llevan texto alternativo vacío para que el lector los ignore. Y los iconos de información, como los de alérgenos, deben tener su nombre completo: «Contiene leche», no «L».

Estructura, foco y estados

La W3C también indica que un menú accesible refleja su estructura de forma semántica, identifica sus regiones, ofrece un orden de foco y un uso de teclado adecuados y deja claro al usuario dónde está y adónde puede ir. En su guía de estilos, recomienda dar alternativas de texto a las imágenes funcionales, asegurar contraste suficiente y no indicar estados solo con color, además de mantener la consistencia de aspecto, ubicación y comportamiento.

Para tu carta, eso significa que la categoría activa se distingue por algo más que un color (subrayado, negrita o un indicador), que los botones de «Añadir» tienen nombre propio («Añadir paella al pedido») y que el orden de lectura es el mismo que el visual.

Tamaño de texto, contraste y zona táctil en el móvil

La mayoría de tus comensales leen la carta en un teléfono, a menudo con luz tenue de interior o con sol directo. Tres números te sirven de base.

Contraste. WCAG 2.2 nivel AA pide un contraste mínimo de 4.5:1 para el texto, con 3:1 para texto grande, y excepciones como el texto incidental y los logotipos. El gris claro sobre blanco, tan frecuente en descripciones de platos, suele no cumplirlo. Comprueba tus combinaciones de color de marca con un verificador de contraste antes de publicar.

Zona táctil. En móvil, los elementos táctiles deben tener al menos 44 × 44 px de área; el icono en sí puede ser más pequeño, porque lo que cuenta es el área que responde al toque. WCAG 2.2 fija además un mínimo de 24 × 24 píxeles CSS para objetivos interactivos en el nivel AA. Si tu botón de carrito mide 20 px, el comensal lo tocará mal justo cuando tiene hambre.

Umbrales de contraste y tamaño táctil

Tamaño de texto. No hay una cifra mágica en las fuentes que hemos usado, pero sí una regla útil: respeta la configuración de tamaño de texto del dispositivo, de modo que quien la amplíe vea la carta ampliada sin que se corten nombres de platos ni precios. Prueba tu menú con el texto del sistema al máximo y mira si los iconos de dieta siguen alineados.

Lista de comprobación antes de publicar

Cada icono tiene etiqueta visible o leyenda en pantalla.
Los alérgenos usan un vocabulario coherente con los nueve principales de la FDA.
El selector de idioma usa nombres nativos, sin banderas.
Todos los iconos funcionales tienen texto alternativo que describe su función.
El contraste de texto llega a 4.5:1.
Las zonas táctiles miden 44 × 44 px o más.
Ningún estado se indica solo con color.
Un lector de pantalla recorre la carta en el mismo orden que la vista.

Nuestra visión: menos símbolos, más comprensión

En Fowst vemos a diario cómo se usa un menú QR: el comensal escanea, mira el teléfono con una mano y quiere decidir rápido. Por eso defendemos un principio simple: el icono es un atajo para quien ya lo conoce y un obstáculo para quien no. Si no lleva texto, estamos pidiendo al cliente que adivine.

Por eso diseñamos el menú para que cargue rápido incluso con conexiones lentas, funcione sin aplicaciones ni registros y permita traducir la carta a más de 100 idiomas con la integración de Google Translate. Esa traducción es la razón principal para olvidarse de las banderas: un selector con nombres de idioma escala a cualquier lengua, mientras que una fila de banderas no. Y para el restaurante, un editor visual sencillo permite cambiar un icono, una etiqueta o un plato sin depender de un diseñador.

Nuestra recomendación para un local típico es empezar con cinco o seis iconos (vegetariano, vegano, sin gluten, picante, favorito de la casa y alérgenos), una leyenda siempre visible y un selector de idioma con nombres nativos. Después, mide: pregunta a tus meseros qué dudas repiten los clientes y ajusta.

— Fowst.com

Si quieres aplicar todo esto sin montar un proyecto de diseño, en Fowst ofrecemos menús digitales QR con pedidos desde la mesa, editor visual, carta en más de 100 idiomas y paneles en tiempo real. Los planes son Básico, Delivery, Premium y Enterprise, y puedes verlos y pedir información en fowst.com. Según nuestra propuesta, la puesta en marcha puede hacerse en menos de 24 horas.

Fowst

Si todavía estás eligiendo formato, nuestra guía de menú online con código QR te da el panorama completo, y la de cómo implementar un menú QR sin errores te lleva paso a paso.

Preguntas frecuentes

Los justos para que se entiendan sin esfuerzo. Para la mayoría de restaurantes bastan cinco o seis de dieta y sabor, los alérgenos que realmente aparezcan en tu carta y los de navegación esenciales (menú, carrito, idioma). Más símbolos aumentan la necesidad de leyendas y la posibilidad de confusión.

¿Puedo usar banderas para elegir el idioma?

No es lo recomendable. El U.S. Web Design System desaconseja las banderas porque no equivalen a idiomas y pueden excluir. Usa un desplegable «Idiomas» con los nombres nativos en orden alfabético, con o sin un icono de globo al lado.

La ADA exige que los negocios abiertos al público ofrezcan accesibles sus servicios en línea, y el Departamento de Justicia remite a WCAG como orientación, sin fijar un estándar técnico detallado. Lo prudente es seguir WCAG 2.2 AA y consultar con un abogado especializado si tienes un caso concreto.

¿Cómo hago que los iconos se lean en un lector de pantalla?

Añade un texto alternativo que describa la función, no el dibujo: «Buscar» y no «lupa», «Vegano» y no «hoja». Los iconos decorativos llevan texto alternativo vacío. Prueba tu carta con el lector de pantalla del propio teléfono (VoiceOver en iPhone o TalkBack en Android).

¿Qué tamaño deben tener los iconos en el móvil?

El icono puede ser pequeño, pero su zona táctil debe medir al menos 44 × 44 px según una guía oficial de navegación móvil. Además, WCAG 2.2 AA exige un mínimo de 24 × 24 píxeles CSS para objetivos interactivos y 4.5:1 de contraste para el texto.