Favicon (abreviatura de Favorites Icon, también llamado icono de sitio web, icono de marcador) es el pequeño icono que se muestra en la pestaña del navegador, barra de marcadores, historial, barra de direcciones, es uno de los elementos más básicos de identidad de marca de un sitio web. Un sitio web sin favicon muestra un icono de documento en blanco entre muchas pestañas, pareciendo poco profesional; un favicon bien diseñado permite a los usuarios encontrar rápidamente tu sitio web entre un montón de pestañas, es un recurso básico indispensable antes del lanzamiento de un sitio web.
Los sitios web modernos necesitan más que un solo favicon.ico. Con la popularización de dispositivos móviles y el desarrollo de PWA (Aplicaciones Web Progresivas), un paquete completo de iconos de sitio web necesita incluir múltiples tamaños y formatos: el tradicional favicon.ico compatible con navegadores antiguos, PNG de 16/32 para pestañas y marcadores de navegadores comunes, apple-touch-icon de 180×180 para que los usuarios de iPhone/iPad «añadan a la pantalla de inicio», PNG de 192/512 para el escritorio Android y pantallas de inicio de PWA, además de site.webmanifest que le dice al navegador la ubicación de estos iconos y el color de tema. Crear manualmente todos estos tamaños y escribir el código de referencia HTML correcto es una tarea complicada para desarrolladores sin experiencia en diseño.
El favicon de texto es la forma más rápida: la mayoría de blogs personales, proyectos de código abierto, sistemas internos en realidad no necesitan un diseño de logotipo complejo, usar la inicial de marca (como G para Google, F para Facebook) con el color de marca para crear un icono de texto simple funciona muy bien. La herramienta proporciona 8 fuentes del sistema comunes, ajuste de tamaño de fuente, personalización de colores, sin abrir Photoshop/Figma, puedes crear un favicon profesional en un minuto.
El favicon Emoji es una solución simple popular en los últimos años: los Emoji en sí mismos son pequeños iconos dibujados por diseñadores, con colores vivos y alta reconocibilidad, usar un Emoji relacionado (como cohete 🚀 para rápido, bombilla 💡 para creatividad, fuego 🔥 para popular) como favicon para proyectos personales, prototipos, sitios de documentación es divertido y conveniente, mucho mejor que un icono en blanco, y tiene consistencia multiplataforma incorporada (aunque el renderizado varía ligeramente entre sistemas).
El modo imagen es adecuado para escenarios donde ya tienes un logotipo: si ya tienes una imagen de logotipo de marca, después de subirla la herramienta la recorta y centra automáticamente en forma cuadrada, generando todos los tamaños necesarios. Ten en cuenta que en tamaños pequeños el icono solo tiene 16 píxeles de ancho, los logotipos complejos se verán borrosos al reducirse, por eso el favicon generalmente no es el logotipo completo, sino la parte del símbolo/identificador del logotipo: como el swoosh de Nike, la manzana de Apple, la M de McDonald's, las formas simples siguen siendo claramente reconocibles en tamaños pequeños.
¿Por qué generar localmente sin subir al servidor? Primero, privacidad: logotipos de marca no publicados, diseños de clientes son activos sensibles, subirlos a servidores de herramientas de terceros conlleva riesgo de fuga; segundo, velocidad: el dibujo local en Canvas se completa instantáneamente, no hay que esperar carga y descarga; tercero, confiabilidad: no requiere red, se puede usar en entornos de red interna. Todo el procesamiento de imágenes utiliza la API Canvas nativa del navegador, el empaquetado ZIP usa la biblioteca JSZip de JavaScript puro, no requiere servicios backend.
Las tres formas (cuadrado, bordes redondeados, circular) son para adaptarse a diferentes estilos de plataforma: Windows tradicionalmente usa iconos cuadrados, iOS/iPadOS usa rectángulos con bordes redondeados (Squircle), Android y algunos sitios web usan iconos circulares. El 22% de redondeo en la herramienta es un tamaño de redondeo bastante universal, cercano al estilo UI moderno. Nota: cuando el navegador muestra realmente el favicon generalmente no recorta el icono en círculo (excepto algunos navegadores), el circular afecta principalmente la apariencia después de añadirlo al escritorio del móvil.
Es importante aclarar: ① El efecto del favicon depende en gran medida de la simplicidad del diseño, los patrones complejos definitivamente se verán borrosos a 16×16, se recomienda usar texto/formas/Emoji simples; ② El efecto de renderizado de Emoji depende de la fuente del sistema operativo, los Emoji vistos en diferentes sistemas pueden variar ligeramente; ③ El archivo ICO se genera basándose en la incrustación de PNG de 32×32, cumpliendo con la mayoría de necesidades de compatibilidad; ④ El fondo transparente puede mostrarse como fondo negro o blanco en algunos navegadores antiguos, se recomienda usar fondo con color en el sitio principal para mayor seguridad.
