Generador de favicon
Crea un juego completo de favicons para tu sitio web en segundos. Parte de un logotipo, una o dos letras o un emoji, dale estilo y descarga favicon.ico, todos los tamaños PNG, el icono táctil de Apple, un manifiesto web y el código HTML para pegar en tu página.
Última actualización:
Nombre del sitio, color del tema y ruta de los archivos
Cómo usar Generador de favicon
- Elige una fuente: Texto para letras o iniciales, Emoji para un icono con emoji o Imagen para subir un logotipo (PNG, JPG, SVG, WebP).
- Dale estilo: elige el texto o emoji, la fuente y los colores, el fondo (sólido, degradado o transparente), la forma y el margen.
- Revisa las vistas previas: la pestaña del navegador muestra cómo se ve a solo 16 px, y la vista del móvil muestra el icono en la pantalla de inicio.
- Escribe el nombre de tu sitio y el color del tema para el manifiesto web (opcional).
- Descarga el ZIP, descomprímelo en la carpeta raíz de tu sitio y pega el código HTML en el <head> de tus páginas.
¿Qué archivos de favicon necesitas?
| Archivo | Tamaño | Lo usa |
|---|---|---|
| favicon.ico | 16, 32, 48 px en un solo archivo | Navegadores que solicitan /favicon.ico directamente, accesos directos de Windows, navegadores antiguos |
| favicon-32x32.png | 32 × 32 | Pestañas y marcadores del navegador en pantallas de alta resolución |
| favicon-16x16.png | 16 × 16 | Pestañas del navegador en pantallas estándar |
| apple-touch-icon.png | 180 × 180 | "Añadir a pantalla de inicio" en iPhone y iPad, marcadores de Safari |
| android-chrome-192x192.png | 192 × 192 | Acceso directo en la pantalla de inicio de Android (a través del manifiesto) |
| android-chrome-512x512.png | 512 × 512 | Pantalla de bienvenida de apps web instalables y tiendas de apps (a través del manifiesto) |
| site.webmanifest | texto (JSON) | Nombre, iconos y color del tema para Android y apps web instalables |
Los demás tamaños PNG del ZIP (48, 64, 96, 128 y 256 px) son útiles para perfiles sociales, accesos directos de escritorio y documentación, pero no hace falta enlazarlos en tu HTML.
Consejos para un favicon que se lea bien a 16 píxeles
- Simplifica. Un logotipo completo con eslogan se convierte en una mancha a 16 × 16. Usa solo el símbolo, o una o dos letras.
- Usa un contraste fuerte. Las pestañas pueden ser claras u oscuras, así que un fondo sólido detrás de tu marca la mantiene visible en ambas. Revisa las vistas previas de pestaña clara y oscura.
- Llena el espacio. Mantén un margen pequeño (entre un 5 y un 15% aproximadamente). Los navegadores no añaden margen propio, y una marca diminuta en un gran cuadrado vacío es difícil de ver.
- Prefiere formas y fuentes gruesas. Las líneas finas y los detalles serif desaparecen en tamaños pequeños; las letras sans-serif extra negritas se mantienen nítidas.
- Empieza a lo grande. Al subir una imagen, usa un PNG o SVG cuadrado de al menos 512 × 512 px para que los iconos grandes sigan nítidos.
Cómo se construye el archivo ICO
Un archivo ICO es un pequeño contenedor: una cabecera de 6 bytes, una entrada de directorio de 16 bytes por imagen (ancho, alto, profundidad de bits, tamaño en bytes y desplazamiento) y, a continuación, las imágenes. Esta herramienta guarda los tamaños de hasta 64 px como mapas de bits de 32 bits con canal alfa, que cualquier versión de Windows y cualquier navegador pueden leer, y guarda 128 y 256 px como datos PNG comprimidos dentro del ICO, como esperan Windows Vista y versiones posteriores para los iconos grandes.
Preguntas frecuentes
¿Qué tamaños necesita un favicon?
Los navegadores modernos usan un favicon de 32 x 32 en las pestañas (16 x 16 en pantallas de baja resolución), los iPhone y iPad usan un apple-touch-icon de 180 x 180 para los accesos directos de la pantalla de inicio, y Android y las apps web instalables usan iconos de 192 x 192 y 512 x 512 indicados en el manifiesto web. Un favicon.ico de varios tamaños con 16, 32 y 48 px cubre los navegadores antiguos y Windows. Esta herramienta los crea todos.
¿Dónde pongo los archivos del favicon?
Súbelos a la carpeta raíz de tu sitio web, de modo que favicon.ico esté accesible en https://yourdomain.com/favicon.ico, y añade las etiquetas link HTML a la sección head de cada página. Si guardas los iconos en una subcarpeta, escribe esa ruta en el campo Ruta de los archivos y el código generado apuntará allí.
¿Es mejor PNG o ICO para un favicon?
Usa ambos. Todos los navegadores modernos aceptan favicons PNG mediante una etiqueta link, y son nítidos y ligeros. El archivo favicon.ico sigue siendo útil porque algunos navegadores, lectores de feeds y herramientas solicitan /favicon.ico directamente sin leer tu HTML.
¿Por qué no aparece mi favicon?
Los navegadores guardan los favicons en caché de forma muy agresiva. Después de subirlo, haz una recarga forzada (Ctrl+F5 o Cmd+Shift+R), abre directamente la URL del icono o prueba en una ventana privada. Comprueba también que las rutas de las etiquetas link coinciden con el lugar donde subiste los archivos.
¿Por qué el icono táctil de Apple tiene fondo?
iOS rellena de negro las zonas transparentes del apple-touch-icon y le añade sus propias esquinas redondeadas. Por eso el icono de 180 x 180 siempre se guarda con un fondo sólido: tu color de fondo, o blanco si elegiste transparente.
¿Puedo usar un emoji como favicon?
Sí. Elige la fuente Emoji y selecciona o pega cualquier emoji. El icono se dibuja con la fuente de emojis de tu dispositivo, así que tendrá el estilo de emoji de tu sistema operativo (Apple, Microsoft o Google).
¿Se suben mis imágenes?
No. Tu imagen se lee y se redimensiona en tu navegador con la API Canvas, y los archivos ICO y ZIP se generan en tu dispositivo. No se envía nada a ningún servidor.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.