Generador de Favicon SVG

Convierte un logo SVG o raster en un paquete favicon completo con ICO, variantes PNG, icono Apple Touch y web manifest

Resultados de ejemplo

2 Ejemplos

Generar un paquete favicon estandar desde SVG

Crea ICO, PNG, icono Apple Touch, manifest y un fragmento HTML listo para pegar a partir de un logo vectorial

svg-favicon-generator-example1.zip Ver archivo
Ver parámetros de entrada
{ "sourceFile": "/public/samples/svg/01-basic-shapes.svg", "backgroundColor": "#ffffff", "fitMode": "contain", "paddingPercent": 10, "siteName": "Studio Atlas", "themeColor": "#0f172a" }

Crear un conjunto de iconos de app desde un logo raster

Usa ajuste cover y un tema oscuro para crear una suite de favicon cuando el recurso fuente es PNG

svg-favicon-generator-example2.zip Ver archivo
Ver parámetros de entrada
{ "sourceFile": "/public/samples/images/logo.png", "backgroundColor": "#020617", "fitMode": "cover", "paddingPercent": 4, "siteName": "North Grid", "themeColor": "#020617" }

Click to upload file or drag and drop file here

Maximum file size: 20MB Supported formats: image/svg+xml, image/png, image/jpeg, image/webp

0 8 35

Datos clave

Categoría
Imágenes, audio y video
Tipos de entrada
file, color, select, range, text
Tipo de salida
file
Cobertura de muestras
4
API disponible
Yes

Resumen

Convierte tu logo SVG, PNG, JPEG o WebP en un paquete favicon completo listo para producción. Genera automáticamente el archivo ICO, múltiples tamaños PNG, el icono Apple Touch y el archivo site.webmanifest con su fragmento HTML correspondiente.

Cuándo usarlo

  • •Al lanzar un sitio web nuevo y necesitas todos los formatos de icono para navegadores, pestañas y dispositivos móviles.
  • •Cuando actualizas la identidad de marca y debes regenerar los favicons desde el logo vectorial o raster original.
  • •Para crear iconos de aplicación PWA con el manifest y metadatos necesarios para la instalación en Android e iOS.

Cómo funciona

  • •Sube tu archivo de logo en formato SVG, PNG, JPEG o WebP (hasta 20 MB).
  • •Personaliza el color de fondo, el modo de ajuste (contain o cover) y el porcentaje de relleno para controlar el espaciado del icono.
  • •Define el nombre del sitio y el color del tema para configurar el manifest y los metadatos del navegador.
  • •Descarga el paquete ZIP que incluye favicon.ico, variantes PNG, Apple Touch Icon, site.webmanifest y el código HTML de referencia.

Casos de uso

Desarrollo web: Generar favicons completos para lanzamientos de sitios corporativos o portfolios.
Progressive Web Apps: Crear iconos de app y manifests necesarios para la instalación en dispositivos móviles.
Rediseño de marca: Actualizar todos los assets de icono al cambiar el logo manteniendo consistencia across devices.

Ejemplos

1. Favicon corporativo desde logo vectorial

Desarrollador frontend
Contexto
Un estudio de diseño necesita implementar favicons profesionales para su nuevo sitio portfolio partiendo de su logo en formato SVG.
Problema
Necesita generar todos los formatos requeridos (ICO, PNG, manifest) sin diseñar manualmente cada tamaño.
Cómo usarlo
Sube el archivo SVG del logo, configura el color de fondo #ffffff, modo contain con 10% de padding, y define el nombre del sitio y color del tema.
Resultado
Obtiene un paquete ZIP listo para desplegar con favicon.ico, iconos PNG en múltiples resoluciones, apple-touch-icon.png y el fragmento HTML para el <head>.

2. Iconos de app para PWA desde imagen raster

Desarrollador full-stack
Contexto
Una startup utiliza un logo PNG con fondo oscuro y necesita iconos optimizados para su aplicación web progresiva.
Problema
El logo original es raster y necesita adaptarse a diferentes tamaños de icono de app con un tema oscuro coherente.
Cómo usarlo
Sube el PNG, establece el color de fondo #020617, selecciona modo cover con 4% de padding, y configura el color del tema igual al fondo.
Resultado
Genera un paquete completo con iconos que se integran perfectamente en la pantalla de inicio de iOS y Android, incluyendo el manifest configurado.

Probar con muestras

xml, image, png
Ejemplos SVG
Ejemplos de Gráficos Vectoriales Escalables (SVG) que demuestran varias características y técnicas SVG
title token svg
image
Ejemplos de Procesamiento de Imágenes Web Python
Ejemplos de procesamiento de imágenes Web Python usando PIL/Pillow incluyendo lectura, guardado, redimensionamiento y conversión de formato
preferred input family image
image
Ejemplos de Procesamiento de Imágenes Android Java
Ejemplos de procesamiento de imágenes Android Java incluyendo lectura/escritura, escalado y conversión de formato
preferred input family image
image
Ejemplos de Procesamiento de Imágenes Android Kotlin
Ejemplos de procesamiento de imágenes Android Kotlin incluyendo lectura/escritura, escalado y conversión de formato
preferred input family image
image

Hubs relacionados

Herramientas de conversion de formatos de imagen y exportacion animada
Compara convertidores de imagen para JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 y salidas pensadas para animacion en un solo hub.
Herramientas de video a audio y conversion de animacion
Compara herramientas para convertir video en audio, extraer streams y pasar entre video corto y formatos de imagen animada en un solo hub.
Herramientas de conversion, mapeo y XPath para XML
Herramientas reunidas para conversion, mapeo, union y extraccion XPath en XML en un solo hub.
Herramientas de limpieza, acabado y preparacion por lotes de imagenes
Reune en un solo hub herramientas para limpiar imagenes, recortar bordes, agregar margen o marco, redimensionar y comprimir por lotes, poner marcas de agua y pulir activos visuales.

Preguntas frecuentes

¿Qué formatos de imagen de entrada soporta la herramienta?

Acepta archivos SVG, PNG, JPEG y WebP con un tamaño máximo de 20 MB.

¿Qué archivos contiene el paquete generado?

Incluye favicon.ico, iconos PNG en múltiples resoluciones, apple-touch-icon.png, site.webmanifest y un fragmento HTML listo para usar.

¿Cuál es la diferencia entre los modos de ajuste Contain y Cover?

Contain ajusta el logo dentro del canvas manteniendo sus proporciones; Cover llena todo el espacio permitido, recortando el excedente si es necesario.

¿Puedo usar un color de fondo transparente?

Sí, puedes seleccionar un color sólido o configurar la transparencia según las necesidades de tu marca.

¿Cómo implemento los favicons en mi sitio?

Descomprime el ZIP en la raíz de tu servidor y pega el fragmento HTML proporcionado dentro de la etiqueta <head> de tus páginas.

Documentación de la API

Punto final de la solicitud

POST /es/api/tools/svg-favicon-generator

Parámetros de la solicitud

Nombre del parámetro Tipo Requerido Descripción
sourceFile file (Subida requerida) Sí -
backgroundColor color No -
fitMode select No -
paddingPercent range No -
siteName text No -
themeColor color No -

Los parámetros de tipo archivo necesitan ser subidos primero vía POST /upload/svg-favicon-generator para obtener filePath, luego pasar filePath al campo de archivo correspondiente.

Formato de respuesta

{
  "filePath": "/public/processing/randomid.ext",
  "fileName": "output.ext",
  "contentType": "application/octet-stream",
  "size": 1024,
  "metadata": {
    "key": "value"
  },
  "error": "Error message (optional)",
  "message": "Notification message (optional)"
}
Archivo: Archivo

Documentación de MCP

Agregue este herramienta a su configuración de servidor MCP: 

{
  "mcpServers": {
    "elysiatools-svg-favicon-generator": {
      "name": "svg-favicon-generator",
      "description": "Convierte un logo SVG o raster en un paquete favicon completo con ICO, variantes PNG, icono Apple Touch y web manifest",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=svg-favicon-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Puede encadenar múltiples herramientas, por ejemplo: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, máximo 20 herramientas.

Soporte para enlaces de archivos URL o codificación Base64 para parámetros de archivo.

Si encuentra algún problema, por favor, póngase en contacto con nosotros en [email protected]