Generador de favicon

Porque el favicon no se guarda en la caché normal de la página: va en una caché aparte, y recargar con Ctrl+F5 no la vacía. Es la duda más frecuente de todo esto y casi nunca significa que hayas hecho nada mal.

Lo que funciona, en este orden:

1. Abre el icono directamente en una pestaña —tusitio.com/favicon.ico— y recarga esa dirección con Ctrl+F5 (Cmd+Shift+R en un Mac).
2. Comprueba en una ventana privada, que no arrastra la copia vieja. Ahí ves el de verdad.
3. Si sigue, en Chrome se limpia entrando en la configuración del sitio (el icono a la izquierda de la dirección) y borrando sus datos.

Que se actualice para todos los visitantes puede tardar días, porque cada navegador guarda su propia copia. Mientras tanto, un truco que funciona: añade un número de versión en la etiqueta —favicon.ico?v=2— y el navegador lo trata como un archivo distinto.

Porque cada sitio donde aparece tu icono lo pide distinto y ninguno reescala bien. El de 16 es la pestaña y los marcadores; el de 32, lo mismo en pantalla de mucha densidad y la barra de tareas de Windows; el de 48, los accesos directos.

El de 180 es el de la pantalla de inicio del iPhone, y los de 192 y 512 los de Android, que además usa el grande para la pantalla de arranque cuando alguien instala la web. La tabla de arriba lo detalla archivo por archivo.

Es un contenedor: dentro del mismo archivo caben varias imágenes de distinto tamaño y cada programa coge la que le conviene. El que se genera aquí lleva el de 16, el de 32 y el de 48.

Sigue haciendo falta porque muchos navegadores y buscadores piden /favicon.ico a la raíz aunque no haya ninguna etiqueta que lo mencione, y porque es lo que entienden los programas antiguos. La mayoría de generadores meten una sola imagen dentro, y entonces el navegador acaba reescalándola él en la pestaña.

No. Leer la imagen, recortarla, generar cada tamaño, escribir el .ico byte a byte y montar el ZIP ocurre todo dentro de tu navegador. No hay cuentas ni base de datos, y no hay ninguna petición que lleve tu imagen a ninguna parte.

Importa porque un logotipo suele ser material de marca que aún no es público. Con la página ya cargada, desconecta internet y compruébalo: sigue funcionando igual.

Cuadrada y de 512 píxeles de lado o más: así todos los tamaños se generan reduciendo, que es lo que sale nítido. Si subes algo menor, la herramienta te avisa y te dice qué tamaños hay que inventar ampliando.

Lo ideal es un SVG: al no tener resolución propia, todos los tamaños salen perfectos. Si la imagen no es cuadrada se centra dentro del cuadrado y ajustas el encuadre con el zoom y el margen.

Para los tamaños grandes sí; para el de 16 casi nunca. En 16 por 16 hay 256 píxeles en total, y una palabra escrita se convierte en una mancha gris.

Por eso la herramienta lo enseña a tamaño real antes de que lo des por bueno. Lo que funciona es quedarse con el símbolo o la inicial y dejar el texto fuera; y si no tienes símbolo, la segunda pestaña genera uno con una letra o un emoji, que a 16 píxeles se lee mucho mejor.

Los archivos, normalmente en la raíz del sitio, al lado del index. Las etiquetas, dentro del <head>: la herramienta te las da escritas y en orden.

Si prefieres otra carpeta, escríbela en su campo y las rutas se ajustan solas. Una excepción: el favicon.ico conviene tenerlo también en la raíz, porque hay programas que lo piden ahí sin mirar las etiquetas.

Describe tu sitio como si fuera una aplicación: nombre, iconos, color de la barra y cómo se abre al instalarlo. Android lo lee para poner el icono en la pantalla de inicio con buena calidad, y es lo que hace falta para que la web se pueda instalar.

Incluye además una versión recortable del icono de 512, porque Android recorta a la forma del teléfono —círculo, cuadrado redondeado, gota—. Por eso conviene dejar margen alrededor del dibujo.