Qué archivos de favicon necesita una web y qué tamaños tienen

Una web necesita un pequeño conjunto de archivos de icono, y la mayoría de las decisiones giran en torno al tamaño. Coloca un favicon.ico con imágenes de 16, 32 y 48 píxeles en la raíz del sitio, para las pestañas del navegador y Windows. Añade un icono de Apple touch de 180 píxeles para la pantalla de inicio de iPhone y iPad, y los iconos PNG de 192 y 512 píxeles enumerados en un manifiesto de aplicación web. El generador de favicon crea todos ellos a partir de un solo logotipo y escribe las líneas HTML para pegarlas en tus páginas.

Los archivos y sus tamaños

El ZIP que descarga el generador contiene los siete archivos. El archivo favicon.ico se construye con tres imágenes PNG, de 16, 32 y 48 píxeles, guardadas dentro de un único archivo. Cada icono es el mismo logotipo dibujado a menor tamaño. El generador trabaja a partir de una versión de 512 píxeles de tu imagen y crea cada tamaño a partir de ella.

Las líneas HTML

El generador escribe cuatro líneas para el encabezado (head) de tus páginas:

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

La primera línea apunta a favicon.ico y lo declara de 48 por 48. La segunda indica el PNG de 32 píxeles. La tercera nombra el icono de Apple touch, y la cuarta apunta al manifiesto, donde se enumeran los iconos de 192 y 512 píxeles. El PNG de 16 píxeles está en el ZIP, pero no en estas líneas. Los navegadores también buscan /favicon.ico por su cuenta, así que el archivo se sigue encontrando aunque falte la primera línea. Mantén las rutas tal como están, a menos que tus archivos estén en otro lugar.

Por qué los tamaños pequeños necesitan formas simples

A 16 por 16 píxeles, un icono tiene 256 píxeles en total. Uno de 48 píxeles tiene 2.304, y el origen de 512 píxeles tiene 262.144. La mayor parte del detalle de un logotipo desaparece al llegar a 16 píxeles, así que una línea fina o una palabra pequeña se convierten en una mancha. Usa una marca sencilla, o una o dos letras con mucho contraste.

La opción de letra acepta uno o dos caracteres y los dibuja grandes en el centro del icono, reduciéndolos si son demasiado anchos. Sus formas son Cuadrado, Redondeado y Círculo. La vista previa muestra los resultados de 16, 32, 48, 180 y 512 píxeles uno junto a otro, y las pestañas claro y oscuro, para que puedas juzgar los tamaños pequeños antes de descargar. Las vistas previas se actualizan al cambiar la forma, el margen o el fondo, así que puedes probar cada ajuste primero.

Margen, fondo y el icono de Apple

El margen tiene tres opciones: Sin margen, Pequeño y Grande. Pequeño deja vacío el 10 % del icono en cada lado, y Grande deja el 20 %. En el modo imagen, Sin margen recorta la imagen a su cuadrado central, así que se pierden los extremos de un logotipo ancho. Los ajustes con margen encajan en cambio la imagen completa dentro del cuadrado.

Las opciones de fondo son Transparente, Blanco y Personalizado, y Transparente es la predeterminada. El icono de Apple touch siempre es opaco. En el modo imagen, sus zonas transparentes toman el fondo elegido, o blanco si el fondo es Transparente. En el modo letra toman el color de fondo de la letra. Las zonas transparentes de un icono de Apple touch pueden verse negras en iPhone y iPad, por eso el generador las rellena. Los demás tamaños conservan la transparencia que elegiste. Por qué un PNG transparente se vuelve negro explica la causa.

Un favicon es cuadrado, así que un logotipo ancho necesita antes un marco cuadrado. El creador de fotos cuadradas ajusta la imagen completa dentro de un marco 1:1, con un borde difuminado, blanco, negro o personalizado, para que no se corte nada. Redimensionar imagen fija píxeles exactos. Con Mantener proporciones activado y ambos lados rellenos, la imagen encaja dentro de la caja sin deformarse. Proporciones de foto explicadas cubre las formas más habituales.

Cambios que tardan en verse

Los navegadores guardan los favicons en caché. Un archivo modificado en la misma dirección puede seguir mostrando el icono antiguo durante un tiempo, así que a menudo no basta con recargar normalmente. Abre directamente la dirección del icono para comprobar que el nuevo archivo está en el servidor, y luego recarga la página saltándote la caché. Si el icono antiguo sigue apareciendo, dale al nuevo archivo otro nombre y actualiza el enlace para que apunte a él.

Cómo hacerlo con fixmint

1. Elige Imagen y arrastra tu logotipo a la caja, o elige Letra y escribe uno o dos caracteres.
2. Ajusta el Margen a Sin margen, Pequeño o Grande, y el Fondo a Transparente, Blanco o Color personalizado.
3. Revisa los iconos de 16, 32 y 48 px en las pestañas claro y oscuro, y las vistas previas de 180 y 512 px.
4. Pulsa Descargar ZIP para los siete archivos, o Descargar favicon.ico para ese archivo solo.
5. Pulsa Copiar HTML y pega las líneas de HTML para el encabezado en el head de cada página.

Casos límite

• Tu imagen se queda en tu dispositivo. El generador crea los iconos en tu navegador, y no se sube nada.
• Letras de dos caracteres. Se aceptan dos caracteres y se dibujan más pequeños para que quepan ambos, lo que los hace más difíciles de leer a 16 píxeles que una sola letra.
• Nombres de archivo. Mantén los nombres que usa el HTML, porque los enlaces apuntan a ellos.
• Archivos ilegibles. Si una imagen no se puede convertir en iconos, el generador muestra el mensaje «No se pudieron crear los iconos a partir de esta entrada. Prueba con otra imagen.» y vacía los resultados. Prueba con otro archivo o vuelve a guardar la imagen en un formato habitual.