El favicon: para qué sirve y qué tamaños preparar
Dónde aparece el icono de la pestaña y qué tamaños tiene que cubrir
Con diez pestañas abiertas en el navegador, ¿cómo distingue cuál es cada sitio? Los títulos quedan tan angostos que lo único visible de verdad es el cuadradito de la izquierda. Ese icono se llama favicon y es la pieza más pequeña de su sitio, y a la vez la que más se ve.
Casi todo el que arma un sitio nuevo lo deja para el final, y después se encuentra con una hoja en blanco en la pestaña sin saber qué hacer. Este artículo cierra dos preguntas de una vez: qué es exactamente ese archivo y cómo producirlo en los tamaños correctos a partir del logotipo que ya tiene.
Un solo icono, cuatro lugares distintos
El favicon no se usa solo en las pestañas. La misma marca reaparece en varios lugares y en tamaños distintos, y cada lugar tiene su propio espacio.
En la pestaña el icono se muestra en su tamaño más chico; ahí lo que tiene que leerse no es el detalle sino la silueta. Agregado a los marcadores se ve algo más grande, junto al nombre. Si un visitante agrega su sitio a la pantalla de inicio del teléfono, el icono se muestra bastante grande, como el de una aplicación. El cuarto lugar, el que casi todos pasan por alto, son los resultados de búsqueda: en el buscador móvil su icono aparece al lado del nombre del sitio.
Esos cuatro lugares no tienen las mismas medidas, y justamente por eso un favicon no se piensa como una imagen única sino como un juego de unos pocos tamaños de la misma marca.
¿Qué tamaños necesita realmente?
En la práctica, el núcleo que hace el trabajo son cuadrados de 16, 32 y 48 puntos. La pestaña usa el de 16, los marcadores y la barra de direcciones el de 32, y los accesos directos del escritorio el de 48. Si espera que la gente ancle su sitio al escritorio, puede sumar además una versión de 64.
El icono de los resultados de búsqueda sigue una regla aparte. Google pide que el icono que muestra en sus resultados mida al menos 48 puntos de lado y esté preparado como un cuadrado múltiplo de 48; si usted no ofrece nada más grande, su icono puede no aparecer en los resultados. Dicho de otro modo, un archivo a la antigua que solo lleve 16 y 32 cumplirá en la pestaña y lo dejará invisible en la búsqueda.
Los accesos directos que se agregan a la pantalla de inicio del teléfono usan un PNG aparte y más grande; ese archivo es independiente del icono de la pestaña y suele prepararse alrededor de 180 puntos.
| Dónde aparece | Tamaño necesario | De dónde sale |
|---|---|---|
| Pestaña del navegador | 16 puntos | La versión más chica guardada dentro del archivo de icono |
| Marcadores y barra de direcciones | 32 puntos | La versión intermedia del mismo archivo |
| Acceso directo del escritorio | 48 puntos | La versión grande del mismo archivo |
| Resultado de búsqueda | Al menos 48 puntos, cuadrado, múltiplo de 48 | Un PNG aparte o un archivo de icono suficientemente grande |
| Pantalla de inicio del teléfono | Alrededor de 180 puntos | Un archivo PNG separado |
Los requisitos publicados por Google para el icono de sitio que se muestra en los resultados →
Por qué todos esos tamaños van en un solo archivo
Un archivo de icono puede guardar juntas varias medidas de la misma imagen, y el navegador elige por sí mismo la que necesita de adentro. Eso es más corto y más resistente que poner un archivo por tamaño y escribir una línea para cada uno en la página.
La segunda razón es la costumbre. Una de las convenciones más viejas de la web es que el navegador busca por su cuenta un archivo llamado «favicon.ico» en la raíz del sitio. Ese pedido sale aunque usted no escriba nada en la página; si el archivo falta, los registros del servidor se llenan de errores de «no encontrado».
Por eso la instalación más sólida es hacer las dos cosas: un archivo de icono con varios tamaños en la raíz y, al lado, un PNG lo bastante grande para la búsqueda y para los teléfonos.
Cómo dibujar una marca que se lea en tamaño mínimo
La única parte difícil de diseñar un favicon es la escala. El cuadrado de una pestaña apenas supera a una letra de este renglón; su logotipo completo no entra ahí.
Lo que corresponde no es encoger el logotipo sino simplificarlo. Tome la primera letra del nombre de la empresa, una sola pieza del emblema o la forma más reconocible del logotipo, por separado. Engrose las líneas finas, elimine detalles, conténtese con dos o tres colores. Un logotipo reducido junto con su tipografía se convierte en una mancha ilegible; el emblema solo de ese mismo logotipo se ve perfectamente claro.
La manera práctica de controlarlo: reduzca el cuadrado que preparó hasta la mitad de su uña en la pantalla y mírelo. Si a esa escala usted no distingue qué está viendo, sus visitantes tampoco lo distinguirán.
- Use una sola letra o un solo emblema, no el logotipo completo
- Evite líneas finas y sombras: desaparecen al achicar
- Deje el fondo transparente para que no salga un recuadro blanco en temas oscuros
- Ocupe bien el cuadrado, sin margen innecesario en los bordes
- No elija una marca parecida a la de un competidor
Armar el archivo de icono con el logotipo que ya tiene
El orden de trabajo es simple. Prepare primero la versión más grande y más cuadrada posible de su logotipo; lo ideal es un PNG con fondo transparente. Si tiene un archivo vectorial, exportar de él un PNG cuadrado bien ancho es el mejor comienzo, porque achicar siempre es seguro y agrandar no lo es.
Después entregue ese PNG a la herramienta De PNG a favicon (ICO): junta el juego de tamaños que usted elija en un único archivo de icono. Coloque el resultado en la carpeta raíz de su sitio y la mayoría de los navegadores lo encontrarán solos.
También puede darse la situación inversa: usted tiene un archivo de icono pero necesita la imagen que hay dentro como PNG común. La herramienta Convertir un archivo ICO a PNG separa las versiones guardadas adentro y se las entrega; ese es el camino para llevar la marca a una presentación, un documento o un archivo de diseño.
Una última advertencia: después de cambiar el icono puede seguir viendo el anterior en la pestaña. Los navegadores guardan este archivo mucho tiempo en su propia memoria. Para ver la versión nueva, cierre la pestaña y ábrala de nuevo; si el problema sigue, escriba la dirección de su sitio seguida de favicon.ico en la barra de direcciones para abrir el archivo directamente y después actualice la página.
Preguntas frecuentes
¿De qué tamaño tiene que ser un favicon?
El juego básico es de 16, 32 y 48 puntos; la pestaña, los marcadores y los accesos directos del escritorio usan esos. Si quiere aparecer en los resultados de búsqueda, guarde además una versión de al menos 48 puntos de lado, cuadrada y en un múltiplo de 48.
¿Cómo se crea un favicon?
Prepare un PNG cuadrado de su logotipo con fondo transparente y entrégueselo a la herramienta De PNG a favicon (ICO); la herramienta junta los tamaños en un solo archivo. Después basta con dejar ese archivo en la carpeta raíz de su sitio.
Cambié mi icono pero la pestaña sigue mostrando el anterior, ¿por qué?
El navegador guarda este archivo en memoria. Cierre la pestaña y ábrala otra vez; si continúa, escriba la dirección de su sitio seguida de favicon.ico en la barra de direcciones para abrir el archivo directamente y actualice.
No tengo un sitio web, ¿igual necesito este archivo?
Un blog, una página de portafolio o una simple página de presentación también aparecen en una pestaña. Un sitio sin icono se queda ahí como una hoja en blanco, y eso le complica al visitante encontrarlo entre sus pestañas.
¿Puedo recuperar las imágenes que hay dentro de un archivo ICO?
Sí. La herramienta Convertir un archivo ICO a PNG le devuelve como imágenes separadas las versiones guardadas en el archivo; puede quedarse solo con la más grande o con todas a la vez.
Última actualización: 27 de agosto de 2026