Generador de favicon: un lienzo, doce archivos
Un solo lienzo de 512×512 píxeles alimenta todos los tamaños de icono, desde los 16 píxeles de la pestaña hasta los 512 de Android. El generador de favicon parte de una imagen, un emoji o hasta tres letras y enseña el resultado en directo como pestaña del navegador, como resultado de Google y en la pantalla de inicio de un móvil.
Qué hay en el paquete, archivo por archivo
Son doce imágenes:
favicon.ico- PNG de 16, 32, 48 y 96 píxeles.
- Tres Apple Touch Icon (180, 152 y 120), dos iconos Android (192 y 512) y un icono maskable de 512.
- Un mosaico de Windows de 150 píxeles.
El ZIP añade site.webmanifest, browserconfig.xml y un README.txt. El botón Copiar código te da las etiquetas <link> y <meta> para el head de tu página. Ese código enlaza el .ico, los PNG de 16 y 32, el icono Apple de 180, el manifiesto y la configuración de Windows. Los archivos de 48, 96, 152 y 120 píxeles van en el ZIP, pero sin enlace.
Fallos habituales y datos que no salen de tu navegador
El .ico lleva tres capas PNG de 16, 32 y 48 píxeles, sin capas de 64 ni de 256. Los emojis se dibujan con la fuente de emojis de tu sistema operativo, así que el mismo emoji cambia en macOS, Windows y Android. Los monogramas usan fuentes del sistema. Impact o una cursiva pueden sustituirse por otra fuente en tu equipo.
El redondeo y el margen se aplican a todos los archivos, también al icono maskable. Para un maskable a sangre, pon el redondeo en 0 y deja el dibujo dentro del círculo punteado. Una imagen pequeña se amplía, así que parte de 512×512 píxeles o más. Si el fondo no es sólido, el color de tema del manifiesto es #2563eb.
La imagen se lee con FileReader y se dibuja en un canvas dentro del navegador. Al subir un archivo o pulsar una descarga no se envía ninguna petición. Puedes comprobarlo en la pestaña de red de las herramientas de desarrollo. Los archivos se guardan como descargas normales, y el código solo llega al portapapeles si pulsas Copiar código.
Los cinco pasos, de la imagen al ZIP
- Elige la pestaña Subir imagen / SVG, Favicon de emoji o Texto / monograma. Suelta un archivo PNG, SVG, JPG o WebP, o escribe de una a tres letras.
- Elige el fondo: Transparente, Color sólido o Degradado moderno. El degradado usa dos colores y un ángulo de 0° a 360°.
- Ajusta el margen interior (0–40 %, por defecto 15 %) y el redondeo de esquinas (0–50 %, por defecto 22 %, el aspecto de iOS).
- Escribe el nombre del sitio. Pasa al manifiesto como
name, y sus primeros 12 caracteres son elshort_name. - Pulsa Descargar paquete completo (.ZIP) o baja archivos sueltos desde las tarjetas bajo el lienzo.