Cómo crear un favicon.

Abra el Generador de Favicon / ICO y elija Imagen. Suba un PNG, JPG, JPEG, WebP o GIF, o seleccione Probar una muestra. El ejemplo trabajado utiliza favicon-orbit.png, una marca de órbita violeta de 512 × 512 píxeles con esquinas transparentes. La entrada es de 202,491 bytes.

Para una marca sin un logotipo terminado, seleccione Texto en la página de la herramienta. Ingrese una o dos letras y elija Continuar. El editor ofrece fuentes Modern sans, Classic serif y Monospace, además de colores separados para el texto y el fondo. Se aceptan hasta tres caracteres, pero los caracteres adicionales pueden volverse difíciles de reconocer en tamaños pequeños.

Conserve la obra de arte original. El generador crea nuevos archivos de iconos y no sobrescribe la fuente. La entrada GIF se convierte en un icono estático en lugar de un favicon animado.

Para un monograma, el menú Fuente comienza con tres estilos incluidos. Seleccione Usar fuentes del sistema en un navegador de escritorio compatible y permita el acceso para agregar las fuentes instaladas en su dispositivo. Use los cheurones anterior y siguiente para comparar fuentes adyacentes, o elija una familia e inspeccione la vista previa en vivo, especialmente a 16 píxeles. Las fuentes permanecen en su dispositivo; los estilos incluidos funcionan sin permiso.

El editor muestra pestañas de navegador claras y oscuras, además de vistas previas en tamaños de icono comunes. Compruebe primero el ejemplo de 16 píxeles; es la prueba más estricta de si la marca sigue siendo reconocible. La vista previa de Apple Touch representa una exportación de 180 píxeles y se muestra más pequeña en el espacio de trabajo.

En un teléfono, abra Configuración. Deje Crear a partir de configurado en Imagen subida y Ajuste de imagen configurado en Mostrar toda la imagen. Para esta muestra, establezca Espacio alrededor del contenido en 0 y habilite Fondo transparente. La fuente ya contiene su propia forma violeta redondeada y márgenes claros, por lo que no necesita un fondo de color adicional.

Con una fuente diferente, Mostrar toda la imagen mantiene sus bordes, mientras que Rellenar el icono puede recortarlos. Cuadrado redondeado, Cuadrado y Círculo definen la forma exterior. El fondo transparente conserva las áreas claras, pero no puede eliminar un fondo opaco ya dibujado en una foto. Revise la vista previa más pequeña después de cada cambio de encuadre.

En Descargar, elige Paquete de iconos para sitio web (ZIP) para este ejemplo. Deja el Nombre del sitio web como My website para la muestra, o sustitúyelo por el nombre de marca real para tu propio proyecto. Este nombre se utiliza en site.webmanifest; no se añade como texto sobre la imagen.

Selecciona Iniciar. El navegador genera un favicon.ico de siete fotogramas con imágenes cuadradas de 16, 24, 32, 48, 64, 128 y 256 píxeles. También crea iconos PNG de 16, 32, 48, 180, 192 y 512 píxeles, un manifiesto e instrucciones de instalación. El resultado es un único ZIP en lugar de un botón de descarga independiente para cada icono.

Si solo necesitas un favicon.ico clásico, elige ICO de varios tamaños en su lugar. Esto es útil cuando una plataforma de sitios web acepta una carga de ICO y no requiere un paquete independiente.

Descargar guarda website-icons.zip. El ejemplo práctico real contiene nueve archivos y tiene 304,351 bytes. La comparación anterior muestra la fuente de 512 píxeles junto al fotograma genuino de 256 píxeles extraído del ICO exportado, en lugar de una captura de pantalla simulada del navegador.

Extrae el ZIP, sube los archivos de icono a la raíz de tu sitio web y lee INSTALL.txt. Incluye etiquetas de enlace HTML para el ICO, el icono PNG, el icono Apple Touch y el manifiesto web. Si colocas los archivos en una subcarpeta, actualiza tanto las rutas HTML como las rutas de los iconos dentro de site.webmanifest.

Comprueba tu sitio en una pestaña nueva del navegador y en los dispositivos que te interesen. Los navegadores pueden almacenar favicons en caché, por lo que un icono antiguo no demuestra inmediatamente que la instalación haya fallado. Conserva la imagen original y el paquete descargado antes de actualizar el editor, ya que al actualizar se vuelve a la página principal de la herramienta.