El favicon es el pequeño icono que aparece en la pestaña del navegador, en los marcadores y, cada vez más, en los resultados de búsqueda de Google en móvil. Es un detalle diminuto, pero una web sin favicon o con uno pixelado transmite descuido. Configurarlo bien lleva cinco minutos si partes de la imagen adecuada.
Qué tamaños se necesitan realmente
El clásico favicon.ico de 16x16 ya no es suficiente. Los navegadores y sistemas operativos actuales piden varios tamaños:
- 16x16 y 32x32: la pestaña del navegador y la barra de marcadores.
- 48x48: algunos escritorios y la interfaz de Windows.
- 180x180: el icono de "añadir a pantalla de inicio" en iOS (apple-touch-icon).
- 192x192 y 512x512: iconos de aplicación web progresiva (PWA) referenciados desde el
manifest.json, usados por Android.
En lugar de exportar cada tamaño a mano desde un editor, lo práctico es generar el conjunto completo de una vez.
Con qué imagen partir
- Cuadrada. Prepara la imagen en proporción 1:1; si no, se deformará o se recortará.
- Grande. Parte de al menos 512x512 px para que el tamaño mayor no quede borroso.
- Simple. A 16x16 px no cabe detalle. Una letra, un símbolo o una forma reconocible funcionan; un logotipo con texto pequeño, no.
- Con margen. Deja algo de aire alrededor del motivo para que no toque los bordes.
- PNG con transparencia si el icono no es rectangular.
Cómo generar el conjunto en el navegador
El generador de favicons de Mcatorce Suite toma tu imagen y produce los PNG de 16, 32, 48, 180, 192 y 512 px, empaquetados en un archivo zip. Todo el redimensionado se hace con la API Canvas del navegador: la imagen no se sube a ningún servidor.
Descomprime el zip en la raíz de tu sitio y añade estas líneas al <head>:
<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">
Y en el manifest.json, referencia los iconos de 192 y 512 px.
Errores habituales
- Cachear para siempre. Los navegadores guardan el favicon de forma muy agresiva. Si lo cambias, quizá necesites forzar una recarga o añadir un parámetro de versión a la URL.
- Un solo tamaño. Servir únicamente un icono grande hace que el navegador lo reescale mal para la pestaña.
- Olvidar el apple-touch-icon. Sin él, iOS genera una miniatura de tu página, casi siempre poco favorecedora.
- Fondo transparente donde no toca. El apple-touch-icon se muestra sobre un fondo que iOS decide; si tu icono es transparente, puede quedar raro. Para ese tamaño conviene un fondo sólido.
Preguntas frecuentes
¿Sigo necesitando un archivo .ico?
Para navegadores modernos, no: basta con PNG. Un favicon.ico en la raíz sigue siendo una buena red de seguridad para software antiguo.
¿Google usa mi favicon en los resultados? En búsquedas desde móvil, sí, junto al nombre del sitio. Debe ser un múltiplo de 48x48 y estar en un formato que Google pueda rastrear.
¿Puedo usar un SVG como favicon?
Los navegadores modernos lo admiten con rel="icon" type="image/svg+xml", pero conviene mantener también versiones PNG como respaldo.