Qué hace la herramienta
El generador de favicon crea iconos PNG, favicon.ico, site.webmanifest y un snippet HTML para enlazar los recursos. Puedes elegir fondo, relleno y modo de recorte.
Cómo usarla
- Sube un logo cuadrado o casi cuadrado.
- Configura fondo, relleno, modo de recorte y nombre de la app.
- Descarga el ZIP y coloca los archivos en la raíz de tu sitio.
Qué incluye el paquete favicon
El ZIP contiene favicon.ico para navegadores clásicos, iconos PNG de 16, 32, 48, 180, 192 y 512 píxeles, un archivo site.webmanifest y un fragmento HTML para enlazar los recursos. El conjunto cubre pestañas, marcadores, iconos de inicio en iOS e iconos Android/PWA.
favicon.ico se crea a partir de varios tamaños PNG para que navegadores antiguos y modernos elijan la versión adecuada. El PNG 180x180 se usa como apple-touch-icon, y los de 192 y 512 píxeles se declaran en el manifest para iconos instalables.
Preparar el logo de origen
Funciona mejor un logo cuadrado o casi cuadrado con suficiente espacio alrededor del símbolo. Si el logo es ancho o alto, usa fondo y padding para que no toque los bordes en iconos pequeños.
El fondo transparente es útil para marcas simples, pero algunas plataformas pueden mostrarlo de forma distinta. Para un aspecto estable, elige un color de fondo y revisa las vistas previas de 192, 48 y 32 píxeles antes de descargar.
Instalar los archivos en un sitio
En la mayoría de proyectos, los archivos del ZIP se colocan en la raíz del sitio junto a /favicon.ico, y el fragmento HTML se añade al head de la plantilla. Si usas un framework, coloca los archivos en la carpeta pública que se copia sin renombrar.
Después de cambiar el favicon, navegadores y buscadores pueden seguir mostrando el icono anterior desde caché. Comprueba la página en una ventana privada, actualiza la caché y espera un nuevo rastreo si el icono ya estaba publicado.