Qué tamaños genera y para qué sirven
- 16 y 32 px: la pestaña del navegador y los marcadores.
- 48 y 64 px: accesos directos y pantallas de escritorio.
- 128 y 192 px: iconos de Chrome y Android (apps instaladas, PWA).
- 180 px: apple-touch-icon para iPhone e iPad.
- 512 px: pantalla de inicio de apps instaladas (PWA).
El favicon.ico y el recorte automático
El fichero .ico es un contenedor que guarda varias imágenes dentro: el navegador elige la más nítida para cada sitio. Lo generamos aquí mismo empaquetando los PNG de 16 a 192 px con la estructura estándar ICONDIR, sin herramientas externas (el formato ICO llega hasta 256 px, por eso el de 512 va solo como PNG).
Si tu imagen no es cuadrada, se recorta automáticamente por el centro para que el icono no salga deformado: te avisamos con las medidas finales.
Copia el código en el <head> de tu web y sube los ficheros a la carpeta raíz (junto al index.html) para que /favicon.ico funcione.