Tamaños de favicon: ICO, Apple e iconos PWA

Tamaños de favicon: ICO, Apple e iconos PWA cubre superficies distintas del navegador y del dispositivo. Un paquete útil combina un ICO multitamaño con archivos PNG y un manifiesto, en lugar de esperar que un solo archivo sirva para todo. Esta guía explica para qué sirve cada tamaño, dónde aparece y cómo encajan los archivos para que publiques un conjunto de favicons nítido en todas partes.

Iconos de pestaña y marcadores: favicon.ico, 16x16 y 32x32

El clásico favicon.ico sigue siendo un archivo práctico de compatibilidad. ConvertRS incluye imágenes PNG de 16x16, 32x32 y 48x48 dentro del ICO. El paquete también contiene archivos PNG separados, favicon-16x16.png y favicon-32x32.png, para enlaces HTML explícitos.

¿Por qué mantener tanto un ICO como PNG independientes? El ICO es el archivo que los navegadores y herramientas piden por convención cuando no existe un enlace de icono explícito, así que actúa como respaldo que nunca da error 404. Los enlaces PNG explícitos dan a los navegadores modernos una opción clara y de alta calidad sin abrir el contenedor ICO. Juntos cubren pestañas, marcadores, historial y la mayoría de vistas previas de terceros que leen el favicon raíz.

En estos tamaños importa más reconocer la forma que conservar cada detalle. Una silueta clara y buen contraste suelen resistir mejor la reducción que las palabras pequeñas. Si tu logo incluye texto, considera generar el icono desde un símbolo o una inicial en lugar del logotipo completo.

El icono de 48x48 que Google usa en resultados móviles

El marco de 48x48 dentro del ICO generado no existe solo para navegadores antiguos. Google muestra un favicon junto a las páginas en los resultados móviles, y sus directrices piden un icono cuadrado de al menos 48x48 disponible en una URL estable. Si tu único icono es un PNG de 16x16 estirado, el icono de los resultados puede verse borroso junto al de competidores con iconos bien dimensionados.

Es uno de los tamaños que más se pasan por alto porque nunca aparece en una pestaña del navegador. Solo se ve en la búsqueda, que es justo donde importa: un icono reconocible junto a tu título añade un ancla visual pequeña pero real para ganar clics.

Apple Touch Icon: el icono de pantalla de inicio de 180x180

El archivo apple-touch-icon.png de 180x180 está pensado para la pantalla de inicio de Apple y superficies relacionadas. Cuando alguien usa “Añadir a pantalla de inicio” en un iPhone o iPad, iOS busca este archivo; sin él, el dispositivo recurre a una captura de la página, que suele verse peor que tu logo.

Se separa del icono de pestaña porque el contexto y la resolución son distintos. iOS aplica su propio redondeo de esquinas, así que mantén los detalles importantes lejos de los bordes. El generador ajusta la misma imagen al lienzo de Apple; deja suficiente espacio alrededor de la marca para que no parezca apretada.

Safari de escritorio y Android ignoran este archivo, así que no hay beneficio en reutilizar el PNG de 180x180 en otras plataformas.

Iconos Android y PWA: 192x192, 512x512 e iconos maskable

El manifiesto generado referencia android-chrome-192x192.png y android-chrome-512x512.png. Los usan navegadores compatibles y experiencias web instaladas: los accesos directos de Android, las ventanas PWA instaladas y los conmutadores de apps leen los iconos declarados en site.webmanifest.

Existe un segundo concepto clave en Android: los iconos maskable. Cuando Android encaja tu icono en una máscara circular, redondeada o de squircle, un icono cuadrado estándar puede perder los bordes. Un icono maskable mantiene la ilustración importante dentro de una zona segura, aproximadamente el 80% interior, para que cualquier forma de lanzador se vea intencionada. ConvertRS crea los tamaños PNG base y el manifest; si tu marca queda cerca del borde, añade más relleno antes de generar para que el icono sobreviva a las máscaras circulares.

Cómo encajan los archivos: encabezado HTML y site.webmanifest

Publicar los archivos es solo la mitad del trabajo; el navegador necesita saber que existen. El archivo favicon-code.html generado contiene enlaces que coinciden exactamente con los nombres. El conjunto típico se ve así:

<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32" />
<link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

Pega ese bloque en el <head> de tus páginas y sube todos los archivos a la carpeta raíz de tu sitio. El manifest declara los tamaños de Android:

{
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

ConvertRS crea los archivos y el manifiesto, pero no los instala en una web. Debes copiar los archivos a tu hosting y enlazar el manifiesto desde el encabezado. En plataformas como WordPress, súbelos por FTP o con el gestor de archivos de tu hosting y añade los enlaces con un plugin de SEO o de scripts de cabecera.

Favicons SVG: cuándo añadir uno

Algunos navegadores modernos admiten un favicon SVG declarado con <link rel="icon" href="/favicon.svg" type="image/svg+xml">. El atractivo es evidente: resolución infinita en un archivo pequeño y variantes para modo oscuro mediante media queries dentro del SVG.

El soporte, sin embargo, es inconsistente. El manejo de SVG en Safari ha sido históricamente incompleto y algunos rastreadores y herramientas antiguos pueden ignorar el SVG por completo. Trata el SVG como una mejora sobre la base de ICO más PNG, nunca como un reemplazo. Si tu audiencia usa casi exclusivamente Chrome o Firefox modernos, un SVG puede simplificar las cosas; en un sitio público, publica el conjunto completo.

Errores comunes con los favicons

• Publicar solo un favicon.ico de 16x16. Los iconos pequeños se estiran en Android, iOS y en los resultados de búsqueda. Un único icono diminuto es la causa más común de un favicon borroso.
• Olvidar el Apple Touch Icon. Los accesos directos de iOS usan entonces una captura de la página en lugar de tu logo.
• Renombrar archivos después de generarlos. El fragmento HTML y el manifest referencian nombres exactos como favicon-32x32.png; renombrar uno sin actualizar los enlaces lo rompe.
• Dejar los archivos antiguos en su sitio. Subir iconos nuevos mientras quedan archivos obsoletos en URLs antiguas provoca comportamientos a medias difíciles de diagnosticar.
• Omitir el manifest en sitios que no son PWA. No cuesta nada y decide qué icono usa Android en cuanto alguien guarda tu sitio en la pantalla de inicio.

Cómo probar y actualizar tu favicon

Los navegadores guardan los favicons en caché de forma agresiva, a veces entre sesiones. Para verificar un conjunto nuevo:

1. Haz una actualización forzada (Ctrl+Mayús+R o Cmd+Mayús+R) o prueba en una ventana privada.
2. Abre cada URL de icono directamente, por ejemplo /favicon.ico y /android-chrome-512x512.png, y confirma que carga la ilustración nueva.
3. Si persiste el icono antiguo, añade una consulta anti-caché como /favicon.ico?v=2 a los enlaces y actualízalos en tu HTML.
4. Revisa el icono de pestaña, un acceso directo de iOS y uno de Android para ver cada tamaño en su contexto real.
5. Recuerda que el icono de los resultados de Google puede tardar días en actualizarse tras el rastreo.

Qué archivos debes publicar

Para el paquete generado por ConvertRS, publica el ICO, los dos PNG de navegador, el icono Apple, los dos iconos Android y site.webmanifest. Añade las etiquetas HTML suministradas sin cambiar nombres, salvo que también actualices los enlaces.

Si partes de un logotipo, consulta cómo crear un favicon desde PNG para el flujo de la imagen de origen y genera después el conjunto completo con el generador de favicon. Todo se ejecuta localmente en tu navegador, así que el paquete está listo segundos después de soltar el archivo.