¿Dónde pongo los archivos?

En la raíz de tu sitio: /public/ en Next.js, /htdocs/ en Apache, /var/www/html/ en Nginx, o la raíz de cualquier hosting estático. Los navegadores solicitan /favicon.ico automáticamente.

¿Por qué necesito tantos tamaños?

Cada plataforma usa tamaños distintos. 16×16 y 32×32 son pestañas del navegador y marcadores. 180×180 es la pantalla de inicio de iOS. 192×192 y 512×512 son la pantalla de inicio de Android y las splash screens de PWA. Incluirlos todos garantiza un icono nítido en todas partes.

¿Debo usar un favicon ICO o PNG?

Ambos. Los navegadores modernos prefieren SVG o PNG, los navegadores antiguos y Windows solo leen .ico. La mejor práctica es declarar ambos: un .ico multi-tamaño en /favicon.ico y un PNG vía .

¿Mi imagen se sube a algún servidor?

No. Todo ocurre al instante. Tu imagen nunca sale de tu dispositivo.

¿Con qué tamaño de imagen debo empezar?

Las imágenes cuadradas funcionan mejor. Mínimo 512×512 para iconos grandes nítidos; 1024×1024 o SVG es lo ideal. Las imágenes no cuadradas se centran y rellenan automáticamente, pero las cuadradas llenan el marco.

¿Puedo añadir relleno o un color de fondo?

Sí. El control de relleno añade 0–25% de espacio alrededor del icono. El selector de fondo te permite establecer cualquier color sólido, o mantener la transparencia (que funciona para PNG e ICO).

¿Por qué sigue apareciendo mi favicon antiguo?

Los navegadores cachean los favicons agresivamente — a veces durante semanas. Fuerza la recarga (Ctrl+Shift+R / Cmd+Shift+R), luego visita la misma URL en una ventana privada para confirmar. Forzar una recarga con una cadena de consulta como /favicon.ico?v=2 también funciona.

Ad Slot — Header Banner

Generador de Paquete Completo de Favicon

Generador de Favicon — Cualquier Imagen a Set Completo

Suelta un logo o imagen y obtén un paquete completo de favicon: .ico multi-resolución, PNGs para navegador, icono Apple Touch, iconos Android Chrome y un snippet HTML listo para pegar — todo generado al instante. Sin registro, sin subir archivos, sin marcas de agua.

#ICO#PNG#Apple Touch#Android#Manifiesto Web#Gratis

Suelta una imagen o haz clic para buscar

PNG, JPG, WebP, SVG, HEIC, TIFF · Las imágenes cuadradas funcionan mejor · Se recomienda 512×512+

Ad Slot — Below the Fold

Cómo crear un favicon en 3 pasos

Cualquier imagen de entrada, paquete completo de favicon de salida.

Sube tu imagen

Suelta un logo o icono — los PNGs cuadrados de 512×512 o más grandes dan los resultados más nítidos. SVG y HEIC también funcionan.

Elige un preajuste y ajusta

Elige Mínimo, Estándar o Completo. Ajusta el relleno alrededor del icono, establece un color de fondo o mantén la transparencia.

Descarga el paquete

Haz clic en Generar. Previsualiza cómo se ve tu favicon en pestañas del navegador, en pantallas de inicio de iOS y en Android. Descarga todo como ZIP con un snippet HTML listo para pegar y un manifiesto web.

Preguntas Frecuentes

Un paquete completo: favicon.ico (multi-resolución, hasta 256×256), PNGs individuales de 16×16 a 512×512, un apple-touch-icon.png (180×180), iconos Android Chrome (192×192 y 512×512), un site.webmanifest, un snippet.html con las etiquetas <link> exactas para pegar en tu <head>, y un README que explica la instalación.

Acerca del Generador de Favicon

Everything you need to know

¿Qué es un favicon?

Un favicon es el pequeño icono que se muestra en las pestañas del navegador, marcadores y pantallas de inicio de móviles. Las plataformas modernas esperan varios tamaños y formatos: un .ico multi-resolución para navegadores antiguos y mosaicos de Windows, PNGs para Android y PWA, un Apple Touch Icon para iOS, y opcionalmente un SVG para renderizado nítido a cualquier escala. Este generador produce todos ellos desde una sola imagen de origen.

Mejores prácticas para el diseño de favicon

Empieza con una imagen cuadrada de 512×512 o más grande — los SVGs son ideales. Mantén el diseño simple; los iconos suelen mostrarse a 16×16 a 32×32 píxeles, así que los detalles finos desaparecen. Usa alto contraste; prueba en temas de navegador claros y oscuros. Si tu logo es horizontal, genera una alternativa cuadrada solo para el favicon. Añade 8–15% de relleno alrededor del icono para que no toque el borde de la pestaña.

El set completo de favicon para 2025

Para proyectos web modernos, genera: favicon.ico (multi-tamaño, 16–48), favicon-16x16.png y favicon-32x32.png (pestañas del navegador), apple-touch-icon.png a 180×180 (pantalla de inicio iOS, sin transparencia), android-chrome-192x192.png y android-chrome-512x512.png (pantalla de inicio Android y splash PWA), un site.webmanifest que enlace los iconos Android, y opcionalmente favicon.svg para renderizado vectorial. El preajuste Completo genera todos estos a la vez.

Privacidad, caché y solución de problemas

Como todo se ejecuta en tu dispositivo, tu imagen de origen nunca sale de tu navegador — ideal para logos privados y marcas no publicadas. Una vez que subes los archivos generados, los navegadores los cachean intensamente; al actualizar, fuerza la recarga del navegador y verifica en una ventana de incógnito. Algunos CDNs (Cloudflare, Fastly) cachean favicon.ico por separado — purgalos después de reemplazar. Si tu favicon aún no se actualiza, verifica que el archivo esté en la raíz del sitio y devuelva 200 OK cuando se solicite directamente.