Genera un favicon ICO multiresolución sin salir del navegador

Qué debe incluir un favicon ICO

Los favicon.ico clásicos incorporan varias resoluciones para que pestañas, marcadores y accesos se vean nítidos en pantallas retina. Enviar solo un 16×16 borroso que se escala se ve anticuado.

WebP.Best ofrece paquetes como Favicon (16/32/48), Standard (añade 64) y Full (hasta 256) para cubrir navegadores y Windows habituales sin diseñar cada tamaño a mano.

• Pestañas del navegador → tamaños pequeños del paquete Favicon
• Accesos directos / algunas superficies del SO → Standard o Full
• Arte origen → preferiblemente un logo o marca cuadrada y clara

Prepara la imagen de origen

Parte de un master cuadrado o casi cuadrado con bordes limpios. PNG o WebP transparentes funcionan bien. Fotos muy cargadas hacen iconos débiles a 16 px: simplifica o recorta al símbolo primero.

Si tu logo es solo un wordmark ancho, espera bandas o recorte al forzar el cuadrado. Decide si el icono debe ser un símbolo o un monograma antes de convertir.

Pasos en WebP.Best

Abre el convertidor de la página principal y añade tu logo (PNG o WebP con transparencia es lo ideal). Formato de salida: ICO.

Elige un paquete de tamaños: Favicon (16/32/48 px) cubre pestañas; Standard añade 64 px para accesos; Full llega a 256 px para iconos Windows más nítidos. No exportes cada tamaño: el paquete los junta en un .ico.

Elige cómo llenar el cuadrado: Fit inside mantiene todo el logo visible con márgenes si la fuente no es cuadrada; Fill and crop escala hasta llenar y puede cortar bordes, mejor para símbolos simples que para texto pequeño.

Convierte, descarga el .ico y revisa el tamaño más pequeño en una pestaña. Todo corre localmente en tu dispositivo.

Fit inside vs fill and crop: cuál elegir

Piensa el icono como un marco cuadrado. Fit inside reduce el logo hasta que quepa entero: nada se corta, pero pueden quedar bandas vacías si el logo es ancho o alto.

Fill and crop amplía hasta cubrir el marco y recorta lo que sobresale. Funciona bien con círculos o letras simples; arriesgado con palabras largas que pierden letras a 16 px.

¿Necesitas un master cuadrado estricto antes del ICO? Expande Opciones avanzadas, elige Ancho × alto exactos (por ejemplo 512×512), Fill and crop o Fit inside, convierte a PNG una vez y luego genera el ICO con ese cuadrado. Si los paquetes por defecto ya se ven bien, omite este paso.

• Solo wordmark ancho → Fit inside, o rediseña un símbolo cuadrado primero
• Icono redondo estilo app → Fill and crop suele verse más limpio
• Dudas → prueba Fit inside; pasa a Fill and crop solo si los márgenes molestan

Usar el ICO en tu sitio

Coloca favicon.ico en la raíz del sitio o enlázalo en el head HTML con el type adecuado. Muchos hosts estáticos aceptan favicons PNG; el ICO sigue siendo útil para marcadores antiguos y algunos contextos de escritorio.

Tras desplegar, fuerza recarga o usa ventana privada: los navegadores cachean favicons con fuerza. Un icono «equivocado» tras subirlo suele ser caché, no un ICO malo.

Lo que esto no hace

Esta vía es para iconos estáticos. No diseña tu marca, no quita fondos automáticamente ni genera SVG. Líneas muy finas pueden desaparecer a 16 px: prueba el tamaño más pequeño.

El empaquetado corre en local con tamaños predefinidos. Si también necesitas icono «Añadir a pantalla de inicio» en el móvil, puede hacer falta PNG aparte; un ICO solo no siempre basta.