Generador de favicon
Convierte un logo en un paquete completo de favicon para tu sitio web.
Funciona en tu navegador. Tus archivos nunca salen de tu dispositivo.
- ICO más cada tamaño en PNG
- Fragmento HTML listo
- Relleno ajustable
Cómo generar un favicon
- Suelta aquí un logo o imagen cuadrada.
- Ajusta el relleno y el fondo si hace falta.
- Descarga el ZIP y pega el fragmento HTML.
Qué hay dentro del ZIP
| Archivo | Tamaño | Lo usa |
|---|---|---|
| favicon.ico | 16, 32 y 48 px en un archivo | Navegadores antiguos, marcadores |
| favicon-16x16.png | 16 x 16 | Pestañas del navegador |
| favicon-32x32.png | 32 x 32 | Pestañas del navegador, barras de tareas |
| apple-touch-icon.png | 180 x 180 | Pantalla de inicio de iPhone y iPad |
| android-chrome-192x192.png | 192 x 192 | Pantalla de inicio de Android |
| android-chrome-512x512.png | 512 x 512 | Splash de Android e icono de app |
| site.webmanifest | Archivo de texto | Le dice a Android qué icono usar |
Dónde van los archivos
Sube cada archivo del ZIP a la carpeta raíz de tu sitio web, la misma carpeta que index.html, no una subcarpeta. Luego pega el fragmento HTML proporcionado dentro del head de cada página, o en la plantilla de encabezado compartida de tu sitio si tiene una.
Consejos de relleno y fondo
- Agrega entre 10 y 15 por ciento de relleno para logos que tocan los bordes de su cuadrado, así no se ven recortados a 16 píxeles.
- Activa un relleno de fondo si tu logo tiene transparencia y se ve raro contra el color de pestaña propio de un navegador.
- Un logo simple y de alto contraste se lee mejor a 16x16 que uno con detalle fino o texto delgado.
Preguntas frecuentes sobre Generador de favicon
¿Qué contiene el ZIP?
favicon.ico con tamaños de 16, 32 y 48 píxeles, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, dos PNG android-chrome y un archivo site.webmanifest.
¿Dónde van estos archivos?
Súbelos a la carpeta raíz de tu sitio web y luego pega el fragmento HTML dentro del head de cada página.
¿Mi imagen debe ser cuadrada?
Un logo cuadrado da el mejor resultado. Las imágenes no cuadradas se ajustan dentro de un cuadrado con relleno, así que nada se estira.
¿Qué hace el relleno?
Agrega espacio vacío alrededor de tu logo dentro del cuadrado, lo que evita que el diseño toque los bordes en los tamaños de icono más pequeños.
¿Se sube mi imagen?
No. Cada tamaño de icono se genera en tu navegador, así que la imagen nunca sale de tu dispositivo.
¿Necesito los seis archivos, o solo favicon.ico?
Los navegadores modernos usan sobre todo los archivos PNG y site.webmanifest. favicon.ico se mantiene para navegadores más antiguos y algunas barras de marcadores, así que sube todos para la mayor compatibilidad.
¿Con qué tamaño de imagen debería empezar?
Al menos 512 por 512 píxeles. El icono maestro se genera a ese tamaño, así que una imagen de origen más pequeña se estira para ajustarse y puede verse borrosa.
¿Hay que editar el archivo manifest?
El site.webmanifest generado usa texto de marcador de posición para el nombre del sitio. Ábrelo después en un editor de texto y actualiza los campos name y short_name para que coincidan con tu sitio.