30 puntos por huiya 2025-02-13 | 6 comentarios | Compartir por WhatsApp

Favicon Generator

Después de ver Cómo preparar un favicon en 2025, hice una herramienta que genera automáticamente un favicon según el contenido del artículo.

Probarlo

Uso

  1. Sube una imagen SVG con proporción cuadrada.
  2. Incluye en tu proyecto el código HTML generado y los archivos de imagen descargados.
  3. Eso es todo.

Detalles

  • ✅ Los archivos SVG se optimizan con SVGO.

  • ✅ El archivo ICO incluye imágenes de 16px y 32px.

  • ✅ Se generan imágenes PNG de 180px, 192px y 512px.

  • ❌ Los archivos PNG no se comprimen con Squoosh.

Comentarios

Trabajé en esto junto con GPT; hizo bien la UI, pero hubo muchos problemas en la parte de importar módulos externos. En esa parte tuvo que intervenir una persona.
Tampoco pudo crear el archivo ICO, así que tuve que abrir una conversación nueva por separado para volver a generar el código.

Hacía tiempo que no hacía algo así, y fue muy divertido.

6 comentarios

 
honglu 2025-02-19

¡Me fue muy útil! Gracias.

 
hi098123 2025-02-13

Para comprimir PNG, sin usar Squoosh,
si usan UPNG https://github.com/photopea/UPNG.js, deberían poder comprimirlo sin mucha dificultad con el código actual.
(La vez pasada que comparé, recuerdo que en PNG el rendimiento y la tasa de compresión eran similares o ligeramente mejores. No es exacto.)
Se puede especificar la compresión con el valor cnum de 0 a 256, y con alrededor de 128 debería comprimir de forma bastante usable.

 
secret3056 2025-02-13

Creo que sería bueno agregar información adicional de que la creación del icono mask hay que hacerla manualmente, quitando el color.

 
secret3056 2025-02-13

Ah, entonces ya no se usa mask icon....

 
xguru 2025-02-13

Guau, qué bueno. Ver el artículo y que sea un proyecto para hacerlo de inmediato junto con la IA, jaja. Parece que así es como el mundo está cambiando.

 
huiya 2025-02-13

Parece que, como se redujo el trabajo repetitivo, la carga del trabajo ya no se siente tan pesada. ¡Qué buena época para vivir!