No. SVG es un formato de entrada admitido, pero el paquete contiene imágenes PNG rasterizadas y un ICO. No crea favicons vectoriales ni animados.
Generador de favicon
Convierte una imagen en un ZIP con un ICO de varios tamaños, cinco iconos PNG y un manifiesto web. Usa el ejemplo de instalación de abajo para enlazar los archivos con tu sitio.
También podrías necesitar:Generador de iconos de aplicación·PNG a ICO·Redimensionar imagen·Comprimir Imagen·Ver todas las herramientas
Archivos del paquete de favicon
La descarga es favicon-package.zip y contiene siete archivos. El HTML es un ejemplo de instalación de este artículo, no un archivo incluido en el ZIP.
| Archivo | Tamaño o contenido | Uso |
|---|---|---|
| favicon.ico | 16×16, 32×32 y 48×48 en un archivo | Icono del sitio en varios tamaños. |
| favicon-16x16.png | 16×16 | Icono pequeño del navegador. |
| favicon-32x32.png | 32×32 | Icono de navegador de mayor tamaño. |
| apple-touch-icon.png | 180×180 | Referencia de icono para la pantalla de inicio de Apple. |
| android-chrome-192x192.png | 192×192 | Icono al que apunta el manifiesto web. |
| android-chrome-512x512.png | 512×512 | Icono mayor al que apunta el manifiesto web. |
| manifest.json | Nombre del sitio, colores y dos referencias de iconos | Manifiesto inicial que debes revisar para tu sitio. |
Entradas: PNG, JPG/JPEG, WebP, GIF o SVG. Las salidas son ICO y PNG estáticos; subir un SVG no genera un favicon SVG.
Genera e instala los archivos
1
Elige una imagen reconocible
Sube un diseño sencillo. Una imagen cuadrada de al menos 512×512 píxeles ayuda con el PNG de mayor tamaño; aumentar el tamaño no arregla un diseño poco claro.
2
Genera y descarga el ZIP
Pulsa Generar paquete de favicon y descarga el ZIP cuando esté listo. Descomprímelo antes de añadir los archivos al sitio.
3
Revisa el manifiesto y publica los archivos
Edita el nombre y los colores predeterminados de manifest.json. Pon los archivos en URL públicas de tu sitio y ajusta las rutas si usas una subcarpeta.
4
Añade las referencias HTML y comprueba
Usa el ejemplo siguiente en la sección head. Confirma que las URL de iconos y manifiesto cargan y revisa el icono en el navegador.
Añade los iconos a tu sitio
Este ejemplo supone que los archivos se sirven desde la raíz del sitio. Añade estas referencias al head de la página y ajusta las rutas según tu publicación.
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#ffffff">Comprueba estos detalles antes de publicar:
| Comprobación | Qué hacer |
|---|---|
| Rutas públicas | La barra inicial indica la raíz del sitio. Si usas una subcarpeta, actualiza tanto los href del HTML como los src de los iconos en manifest.json. |
| Valores del manifiesto | name y short_name se generan como My Website; theme_color y background_color son #ffffff. Revísalos tras descargar. Estos valores no cambian el color de las imágenes de los iconos. |
| Configuración existente | Comprueba si el tema o framework declara otros iconos. Evita mantener referencias al favicon anterior junto con la configuración nueva. |
Un manifiesto con iconos no crea por sí solo una aplicación web instalable o sin conexión. Este generador no aporta un service worker ni garantiza la instalación en todos los dispositivos.
Haz que el icono se entienda a tamaño pequeño
🔎
Revisa el resultado de 16×16
Las letras pequeñas y los trazos finos pueden desaparecer. Prefiere una marca sencilla, buen contraste y espacio alrededor del motivo.
↔
Comprueba la forma y el espacio libre
Las imágenes no cuadradas se ajustan a un lienzo cuadrado con relleno transparente. Las pequeñas pueden ampliarse. Prepara una imagen cuadrada si necesitas un encuadre preciso.
Elige la salida adecuada para tu tarea
Esta página crea archivos favicon a partir de una imagen existente; no es una herramienta para dibujar logotipos.
¿Solo necesitas un ICO?
Usa PNG a ICO para convertir un PNG en ICO sin generar el paquete del sitio.
¿Desarrollas una aplicación móvil nativa?
Usa Generador de iconos de aplicaciones para recursos gráficos de iOS/Android nativos. Su función es distinta de la de los favicons de un sitio.
Las imágenes se suben para procesarlas en el servidor. Descarga el ZIP cuando esté listo; los temporales siguen el proceso de limpieza del servicio.
Preguntas sobre la instalación del favicon
Verifica primero las URL publicadas y las declaraciones de iconos de la página. El navegador puede guardar el favicon en caché; prueba una sesión nueva tras confirmar que el sitio apunta a los archivos nuevos.
El formulario actual solo permite seleccionar una imagen. Edita name, short_name, theme_color y background_color en el manifiesto descargado y mantén coherente el theme-color del HTML.
No. Proporciona iconos y un manifiesto inicial. La instalación y el funcionamiento sin conexión requieren configuración adicional del sitio; el paquete no añade esas funciones automáticamente.
Crea el favicon de tu sitio
Elige una imagen, genera el ZIP y revisa las rutas de instalación.