Genera favicons en 16×16, 32×32, 48×48 y 192×192 desde cualquier imagen
Arrastrá una imagen o hacé clic para seleccionarla
PNG, JPEG, WebP, SVG — se recomienda imagen cuadrada
Recomendaciones
También podrías necesitar
El favicon es el pequeño icono que aparece en la pestaña del navegador, los marcadores y la pantalla de inicio en móviles. Aunque visualmente simple, una implementación correcta requiere varios tamaños: 16×16 para pestañas en alta densidad, 32×32 como estándar de escritorio, 48×48 para accesos directos en Windows, y 192×192 para el icono de 'Agregar a pantalla de inicio' en Android y PWAs. Esta herramienta usa la API Canvas 2D del navegador para redimensionar tu imagen fuente a los cuatro tamaños de forma instantánea — el mismo motor que usan ImageResizer y otras herramientas de imágenes del catálogo. La imagen se procesa completamente en tu dispositivo: ningún byte de tu imagen se envía a ningún servidor. Para mejores resultados, la imagen fuente debería ser cuadrada (1:1) con fondo transparente si el logo o icono tiene forma irregular — la transparencia se mantiene en los PNG de salida. El generador también incluye los <link> tags HTML listos para copiar y pegar en el <head> de tu documento.
¿Qué tamaños de favicon debería incluir en mi proyecto?
Los cuatro tamaños más importantes son: 16×16 (favicon clásico de pestaña en todos los navegadores), 32×32 (estándar moderno de alta densidad y Windows), 48×48 (accesos directos de Windows), y 192×192 (icono Android 'Agregar a pantalla de inicio' y PWA). Para proyectos modernos en Next.js, también podés agregar un archivo app/favicon.ico y app/icon.png — Next.js los gestiona automáticamente. Para soporte completo en Apple, considerá también 180×180 (apple-touch-icon).
¿Por qué mi favicon de 16×16 se ve borroso?
Un favicon de 16×16 tiene solo 256 píxeles totales — es una de las resoluciones más bajas de la web. Si tu imagen fuente tiene muchos detalles finos (letras pequeñas, ornamentos, gradientes complejos), estos se perderán a 16×16. Las mejores fuentes para favicon son: íconos geométricos simples, letras grandes y únicas (inicial de la marca), o el isotipo simplificado de tu logo. El redimensionamiento con Canvas 2D usa interpolación bilinear — si necesitás mayor nitidez en tamaños muy pequeños, considera diseñar una versión específica para 16×16 en un editor vectorial.
¿Cómo instalo los favicons en Next.js?
En Next.js App Router, el método más simple es colocar los archivos en /public y referenciarlos en tu layout.tsx: export const metadata = { icons: { icon: '/favicon-32x32.png', apple: '/favicon-192x192.png' } }. Alternativamente, coloca un favicon.ico en la carpeta /app — Next.js lo detecta automáticamente. Para control completo, usa los <link> tags directamente en tu layout.tsx dentro de la sección <head>. El método de metadata.icons es el más moderno y soporta múltiples tamaños y tipos.
¿La imagen original necesita ser cuadrada?
No es obligatorio, pero es muy recomendable. Si subís una imagen rectangular, el redimensionamiento la estirará para llenar el cuadro — el logo o ícono aparecerá distorsionado. Si tu imagen fuente es rectangular, la mejor práctica es recortarla o agregarle padding hasta hacerla cuadrada antes de subirla, o usar una herramienta de edición para crear una versión cuadrada específica para favicons. Imágenes cuadradas con el contenido principal centrado y algo de padding producen los mejores resultados.
¿Puedo usar un SVG como favicon directamente?
Sí, navegadores modernos como Chrome, Firefox y Edge soportan <link rel='icon' type='image/svg+xml' href='/icon.svg'>. Las ventajas de SVG como favicon son que escala perfectamente a cualquier tamaño sin pérdida de calidad y soporta media queries (podés tener versiones para modo claro y oscuro en el mismo archivo). Sin embargo, Safari tiene soporte limitado para SVG favicons, por lo que se recomienda mantener los PNG de 16×16 y 32×32 como fallback. Esta herramienta también acepta SVG como imagen fuente para la conversión.