Qué es realmente un favicon
Un favicon, abreviatura de "favorite icon" (icono favorito), es la pequeña imagen cuadrada que representa a un sitio web. Nació a finales de los años noventa como un único archivo de 16x16 píxeles llamado favicon.ico, y durante mucho tiempo ahí terminaba la historia. Ya no es así. Hoy ese mismo logotipo diminuto tiene que verse nítido en la pestaña de un navegador sobre un portátil de alta resolución, en un marcador, en la pantalla de inicio de un iPhone a 180 píxeles, en un dispositivo Android, dentro de una aplicación web instalable y, a veces, junto a tu resultado en un buscador. Cada uno de esos lugares pide un tamaño distinto, y unos cuantos exigen un nombre de archivo concreto.
Por eso el consejo de hace años de "sube un 16x16 y listo" hoy produce un resultado difuso: una imagen minúscula ampliada a un icono de 180 píxeles queda blanda y pixelada. El enfoque correcto es partir de una imagen grande y limpia y generar a partir de ella un conjunto reducido de archivos con los tamaños adecuados.
Por qué un solo tamaño ya no alcanza
Cada superficie toma un icono diferente. Entender dónde va cada uno hace que la lista de tamaños de más abajo parezca lógica en lugar de arbitraria:
- Pestañas del navegador y marcadores usan el favicon clásico, normalmente una imagen de 16x16 o 32x32, y en las pantallas modernas de alta densidad se prefiere el de 32.
- Pantallas de inicio de iPhone y iPad usan un apple-touch-icon de 180x180 cuando alguien añade tu página a su pantalla de inicio.
- Android y aplicaciones web instalables (PWA) usan iconos de 192x192 y 512x512 definidos en un pequeño archivo de manifiesto.
- Windows y las pantallas de mayor resolución se benefician de los tamaños intermedios como 48, 64, 96, 128 y 256, de modo que el icono nunca se aleja demasiado de un tamaño nativo al escalarse.
- Los resultados de búsqueda pueden mostrar tu favicon junto al título de la página, lo que refuerza tu marca de forma discreta en cada aparición.
Los tamaños que de verdad necesitas en 2026
No hace falta adivinar ni generar cientos de archivos. Este es el conjunto práctico que cubre todos los navegadores y dispositivos habituales, y coincide exactamente con lo que te entrega un buen generador:
| Archivo | Tamaño | Dónde aparece |
|---|---|---|
| favicon.ico | 16, 32, 48 (multitamaño) | El respaldo universal: pestañas, barra de direcciones, marcadores, navegadores antiguos |
| favicon-16x16.png | 16x16 | Representación pequeña en pestañas y marcadores |
| favicon-32x32.png | 32x32 | Icono de pestaña estándar en navegadores de escritorio modernos |
| apple-touch-icon.png | 180x180 | Acceso directo en la pantalla de inicio de iPhone y iPad |
| android-chrome-192x192.png | 192x192 | Pantalla de inicio de Android e instalación de PWA |
| android-chrome-512x512.png | 512x512 | Pantalla de bienvenida de Android y PWA de alta resolución |
| PNG de 48, 64, 96, 128, 256 px | varios | Pantallas de alta densidad y Windows, para que el icono casi nunca se escale |
Son once archivos en total: un ICO, diez PNG, más un pequeño manifiesto y un fragmento de HTML. Crearlos a mano en un editor de imágenes es tedioso y fácil de estropear. Hacerlos de una sola vez es justamente el objetivo de la siguiente sección.
La vía más rápida: generar el paquete completo de una vez
En lugar de exportar los tamaños uno por uno, parte de una sola imagen de buena calidad y deja que un generador construya el conjunto entero. Este es el flujo con el generador de favicon:
- Abre el generador de favicon y sube tu imagen de origen. Sirve un PNG, un JPG, un WebP o un SVG, y un SVG o un PNG grande dan el resultado más nítido.
- La herramienta recorta tu imagen a un cuadrado desde el centro y genera cada tamaño por ti: el favicon.ico multirresolución, la gama completa de iconos PNG desde 16 hasta 512, el apple-touch-icon de 180 píxeles y los iconos de Android de 192 y 512.
- Descarga el ZIP. Dentro tienes todos los iconos, un site.webmanifest ya preparado para PWA y Android, y un pequeño bloque de HTML para pegar en tu sitio.
La imagen que subes se elimina del servidor tras el procesamiento, así que un logotipo que aún no has lanzado no queda dando vueltas en ningún sitio. El resultado es un conjunto de iconos completo y ajustado a los estándares a partir de una sola subida, sin necesidad de editor de imágenes.
El HTML que pegas, explicado línea por línea
Un favicon solo funciona si el navegador sabe dónde encontrarlo. El generador te entrega un fragmento como este para colocar dentro del <head> de tus páginas:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Línea por línea, esto es lo que hace cada una:
- La primera línea apunta a favicon.ico, el respaldo universal que todo navegador entiende, incluidos los más antiguos.
- Las dos líneas de PNG dan a los navegadores modernos un icono más nítido de 32x32 y 16x16 y les permiten elegir el adecuado para cada pantalla.
- La línea del apple-touch-icon es la que usan los iPhone y iPad cuando alguien guarda tu página en su pantalla de inicio, para que se vea como un icono de app de verdad y no como una captura borrosa.
- La línea del manifest apunta al manifiesto web, que es donde Android y las aplicaciones web instalables leen sus iconos y los datos de la app.
Sube los archivos de iconos y el manifiesto a la raíz de tu sitio para que las rutas de arriba resuelvan correctamente, y el navegador se encarga del resto.
Para qué sirve el manifiesto web
El site.webmanifest es un pequeño archivo de texto que describe tu sitio como una aplicación instalable. Su tarea más importante para los favicons es enumerar los iconos de 192x192 y 512x512 que Android y las Progressive Web Apps usan para la pantalla de inicio y la de bienvenida. Si nunca piensas hacer tu sitio instalable, el manifiesto tampoco estorba y mantiene contento a Android. Y si sí lo haces, esos dos iconos son justo lo que necesita, y el generador los rellena por ti.
Cómo elegir y preparar la imagen de origen
La mayor palanca de calidad es la imagen de la que partes. Unos pocos hábitos hacen que cada tamaño generado se vea mejor:
- Empieza grande y cuadrado. Una imagen de 512x512, o un SVG, se reduce de forma limpia. Una fuente diminuta solo puede verse diminuta.
- Mantenlo simple. Un favicon se muestra a menudo a 16 píxeles. El detalle fino, las líneas delgadas y el texto pequeño desaparecen a ese tamaño. Una sola letra marcada, un símbolo o una versión simplificada del logotipo se lee mucho mejor que tu logo completo con eslogan.
- Usa buen contraste. El icono tiene que destacar tanto sobre los temas claros como sobre los oscuros del navegador. Un contraste alto entre la marca y su fondo lo mantiene legible en todas partes.
- Cuida los márgenes. Deja un poco de aire alrededor de la marca para que no se recorte cuando una plataforma redondea las esquinas de un icono de app.
Si estás valorando desde qué formato partir, la guía sobre WebP frente a JPEG y PNG repasa las ventajas y desventajas de cada uno, y si te preguntas qué pasa con el logotipo que subes, nuestra nota sobre cómo gestiona Convertica tus archivos explica la parte de privacidad.
Errores habituales que dejan roto un favicon
- Publicar solo favicon.ico. Cubre las pestañas, pero no las pantallas de inicio de iPhone ni las instalaciones de PWA. El apple-touch-icon y los iconos del manifiesto son los que rellenan esos huecos.
- Rutas de archivo equivocadas. Si el
hrefde las etiquetas link no coincide con el lugar donde subiste los archivos, el navegador no muestra nada. Mantén los iconos en la raíz del sitio o actualiza las rutas para que coincidan. - Culpar a la caché del navegador. Los favicons se guardan en caché de forma muy agresiva. Después de añadir o cambiar uno, un refresco forzado o una visita en una ventana privada suele mostrar el icono nuevo que una recarga normal seguía ocultando.
- Partir de una imagen minúscula. Ampliar un logo pequeño a 180 o 512 píxeles produce un icono blando y pixelado. Empieza siempre por la versión limpia más grande que tengas.
Preguntas frecuentes
¿Sigo necesitando favicon.ico o basta con PNG?
Conserva ambos. Los navegadores modernos usan sin problema los iconos PNG, pero favicon.ico sigue siendo el respaldo universal más seguro, y algunos navegadores y herramientas todavía lo buscan por su nombre en la raíz del sitio. Un conjunto completo incluye los dos, y por eso el generador produce el ICO junto a los PNG.
¿Cuál es la diferencia entre ICO y PNG aquí?
ICO es un formato más antiguo que puede empaquetar varios tamaños (16, 32 y 48) dentro de un solo archivo, y por eso funciona tan bien como favicon de respaldo único. PNG guarda un tamaño por archivo, pero admite imágenes nítidas de alta calidad y transparencia, y por eso los iconos más grandes son PNG. Conviene tener ambos, cada uno haciendo aquello en lo que es mejor.
¿Puedo usar un fondo transparente?
Sí, y PNG lo admite. Un fondo transparente permite que el icono se apoye con naturalidad sobre los temas claros y oscuros del navegador. Solo asegúrate de que la propia marca tenga suficiente contraste para seguir siendo visible en ambos.
¿Por qué no aparece mi favicon nuevo?
Casi siempre es la caché. Los navegadores retienen los favicons más tiempo que la mayoría de los recursos. Haz un refresco forzado, abre el sitio en una ventana privada o comprueba el archivo del icono directamente por su URL para confirmar que se subió. En cuanto se limpia la caché, aparece el icono nuevo.
¿Necesito un favicon para el SEO?
No es un factor de posicionamiento, pero un favicon puede aparecer junto al título de tu página en los resultados de búsqueda, lo que refuerza tu marca y puede subir el porcentaje de clics. Es una tarea pequeña que se hace una sola vez y da un retorno visual duradero, así que no hay razón para saltársela.
Crea el tuyo ahora
Si tu sitio funciona sin favicon, o con un resto borroso de hace años, arréglalo en un par de minutos. Sube tu logotipo al generador de favicon, descarga el ZIP, deja los archivos en la raíz de tu sitio y pega el fragmento de HTML. Si solo necesitas un archivo de icono suelto en lugar del paquete completo, los conversores PNG a ICO y SVG a ICO hacen esa tarea concreta, y el optimizador de imágenes te ayuda a recortar antes tu imagen de origen.
