Generar favicon
Crea los tamaños estándar de favicon (16×16, 32×32, 48×48 y 180×180) desde cualquier imagen. Descarga cada PNG con el nombre correcto y copia las etiquetas HTML listas para tu `<head>`.
Recomendación: usa una imagen cuadrada PNG con fondo transparente de al menos 180×180 px para obtener los mejores resultados.
Tamaños que se generarán
- 16×16favicon-16x16.png
- 32×32favicon-32x32.png
- 48×48favicon-48x48.png
- 96×96favicon-96x96.png
- 180×180 (Apple)apple-touch-icon.png
Favicons para web, WordPress, Shopify y constructores online
El favicon es la primera imagen que el usuario ve asociada a tu sitio web: aparece en las pestañas del navegador, los favoritos, la barra de tareas de Windows y la pantalla de inicio del móvil. Una web sin favicon o con el icono genérico del framework transmite descuido e impacta negativamente la confianza del usuario. La herramienta genera los 5 tamaños estándar (16, 32, 48, 96, 180 px) con las etiquetas HTML listas para copiar, compatibles con WordPress, Wix, Squarespace, Shopify y cualquier web estática.
Buenas prácticas para favicons que se ven bien en todos los dispositivos
Para que tu favicon se vea bien en todos los contextos, usa una imagen cuadrada con tu símbolo de marca sobre fondo transparente: el isotipo, la letra inicial o el ícono principal. Evita logos horizontales y texto pequeño: serán ilegibles a 16×16 px. El tamaño 180×180 (Apple Touch Icon) es el que se muestra cuando el usuario añade tu web al home de iPhone o iPad, por lo que debe ser reconocible y atractivo a ese tamaño. Una vez generados, verifica que los iconos se ven correctos en Google Chrome y Safari para confirmar compatibilidad completa.
Otras herramientas
Preguntas frecuentes
- ¿Qué tamaños de favicon necesita mi web?
- Los tamaños esenciales son: 16×16 px (pestaña del navegador y lista de favoritos), 32×32 px (acceso directo en escritorio Windows y barra de tareas), 48×48 px (Windows Vista y superior), y 180×180 px para el Apple Touch Icon (cuando el usuario añade la web a la pantalla de inicio en iOS/iPadOS). La herramienta genera los 5 tamaños automáticamente, incluyendo el de 96×96 px para Android y Chrome OS.
- ¿Cómo añado los favicons a mi web?
- Descarga los archivos PNG, súbelos a la raíz de tu dominio (carpeta pública) y copia las etiquetas HTML que genera la herramienta. Pégalas dentro del `<head>` de tu HTML. Para WordPress, añádelas en el archivo header.php o en un plugin de SEO. Para Wix, Squarespace o Shopify, usa la opción de "icono del sitio" o "favicon" en ajustes. La herramienta genera las etiquetas link exactas listas para copiar con un clic.
- ¿Qué tipo de imagen debo usar como fuente?
- Lo ideal es una imagen cuadrada PNG con fondo transparente de al menos 180×180 px. Imágenes con fondo opaco también funcionan pero el favicon mostrará el fondo. Evita logos con texto pequeño: a 16×16 px el texto será completamente ilegible. Usa solo el símbolo, isotipo o la inicial de tu marca. Si tu logo solo existe en forma horizontal, crea una versión cuadrada solo con el símbolo antes de convertirlo.
- ¿Por qué generar PNG en lugar de un archivo .ico?
- Los navegadores modernos (Chrome, Firefox, Safari, Edge) aceptan PNG directamente como favicon a través de `<link rel="icon" type="image/png">`. Los PNG son más fáciles de generar, editar y tienen mejor calidad que el antiguo formato .ico. Solo necesitas .ico si requieres compatibilidad con Internet Explorer 8 o inferior (menos del 0.1% del tráfico global). Si necesitas .ico, usa la herramienta de convertir a ICO.
- ¿Necesito favicons diferentes para Android y Chrome?
- Para Progressive Web Apps (PWA) Chrome recomienda un archivo `manifest.json` con iconos de 192×192 y 512×512. Esta herramienta genera el tamaño 96×96, adecuado para uso básico en Chrome para Android. Para una PWA completa, usa los 96×96 como punto de partida y escálalos manualmente a 192 y 512 con la herramienta de redimensionar.
- ¿Los archivos se envían a algún servidor?
- No. La generación de favicons usa exclusivamente la Canvas API del navegador. La imagen original no se sube a ningún servidor; todo el procesamiento (escalado a cada tamaño, exportación como PNG) ocurre localmente en tu dispositivo. Puedes generar favicons para proyectos confidenciales con total seguridad.
- ¿Puedo descargar todos los favicons a la vez?
- Sí. El botón "Descargar todos" inicia la descarga de los 5 archivos PNG (favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, favicon-96x96.png, apple-touch-icon.png) con un pequeño intervalo de 150ms entre cada uno para que el navegador pueda procesarlos. También puedes descargar cada tamaño individualmente haciendo clic en el nombre del archivo bajo cada preview. El HTML generado apunta a las rutas de archivo estándar.