Gráficos y Web Design

Generador de Favicons y App Icons

Crea en segundos el paquete completo de iconos para navegadores, iOS y Android con previsualización en vivo.

Imagen Fuente

Formatos admitidos: PNG, JPG, SVG o WebP (mínimo 512x512 px recomendado).

Arrastra tu logo o icono aquí

o selecciona un archivo de tu equipo

Formatos: image/png,image/jpeg,image/svg+xml,image/webp (Máx. 50MB)

Archivo activo

logo-default.svg

1.0 KB

Ajustes de Icono

Radio de bordes

Color de fondo

Margen interno / Padding 0%

Nombre de la aplicación (para manifest)

Previsualizaciones Reales

Mi Aplicación Web ×

Nueva pestaña

https://miapp.com

Mi Aplicación Web

Así verán tus visitantes el favicon en la barra de navegación

Código de Integración

html

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

Cómo generar tus iconos y favicons paso a paso

1. Sube tu imagen o logotipo

Selecciona una imagen cuadrada de alta calidad en formato SVG o PNG transparente.

2. Ajusta bordes, fondo y padding

Adapta la curvatura de las esquinas o rellena el fondo para que luzca perfecto en pantallas oscuras y claras.

3. Descarga tus iconos y copia el HTML

Descarga los archivos generados y copia las etiquetas <link> directamente en el head de tu sitio web.

Privacidad 100% Client-Side

Procesamiento local en tu navegador

Tus imágenes se recortan y redimensionan usando la API Canvas local de tu navegador. Ningún dato ni gráfico viaja a servidores externos.

Preguntas Frecuentes sobre Favicons e Iconos Web

Los esenciales son 16x16 y 32x32 para pestañas de navegador, 180x180 para Apple Touch Icon en iOS, y 192x192 junto con 512x512 para aplicaciones web progresivas (PWA) en Android.

Los navegadores modernos soportan nativamente archivos PNG con alta resolución y transparencia alfa superior, reduciendo el peso de la página y simplificando la compatibilidad móvil.

Es el icono que iOS utiliza cuando un usuario añade un sitio web a la pantalla de inicio de su iPhone o iPad, mostrándolo como una app nativa con bordes redondeados automáticos.