La respuesta corta
¿Por qué usar Favicon?
Los navegadores, el iPhone y las pantallas de inicio de Android piden cada uno un tamaño distinto. Exportar seis tamaños y montar un ICO a mano requiere un programa de diseño; aquí es un solo paso.
Tamaños PNG admite una lista separada por comas, que empieza como 16,32,48,180,192,512. Vale cualquier número entero de 16 a 512, y los repetidos se eliminan. Cada tamaño se guarda como favicon-NxN.png. La vista previa muestra el icono más grande, hasta 512 px, para que revises el encuadre antes de descargar.
Todos los iconos son cuadrados, y una imagen no cuadrada se recorta desde el centro para llenarlos, así que los extremos de un logotipo ancho se pierden. Los detalles finos y los textos pequeños desaparecen a 16 y 32 px. Un símbolo marcado o una o dos letras sobre fondo liso se leen mucho mejor en una pestaña.
Imagen cuadrada rellena un logotipo ancho hasta hacerlo cuadrado con un color de fondo en vez de recortarlo, un buen primer paso. Recorte circular da un icono redondo con esquinas transparentes si quieres ese estilo en los tamaños grandes. En cualquier caso, parte de la versión más grande del logotipo que tengas, porque cada icono se reduce a partir de ella.
Dónde encaja Favicon
Webs nuevas
Crea el juego completo de iconos a partir del logotipo antes de lanzar la web de un negocio.
Apps web
Genera los iconos de 192 y 512 px que pide el manifiesto de una app web.
Cambio de imagen
Sustituye el favicon antiguo después de cambiar el logotipo de un blog.
De principio a fin
Cómo usar Favicon
- 01Toca Elegir imagen y escoge el logotipo, mejor si ya es cuadrado.
- 02Revisa la lista de Tamaños PNG y toca Aplicar cambios.
- 03Comprueba el icono en la vista previa y toca Descargar resultado para guardar el ZIP.
Qué esperar de Favicon
| Comprobar | Qué significa aquí |
|---|---|
| Entrada admitida | Imágenes JPEG, PNG, WebP, GIF, BMP, SVG y AVIF si el navegador las admite |
| Controles principales | Dimensiones del lienzo más las etiquetas, colores, datos o disposición que pide el generador |
| Salida | PNG, SVG, código HTML o un ZIP si la herramienta produce varios recursos |
| Límite de trabajo | Los lienzos generados tienen un tope de 8.000 píxeles por lado |
Antes de exportar
- Los logotipos anchos se recortan desde el centro; rellénalos antes con Imagen cuadrada.
- favicon.ico contiene todos los tamaños de la lista hasta 256 px.
- Renombra el archivo de 180 px a apple-touch-icon.png si tu web espera ese nombre.
- Prueba el icono de 16 px en una pestaña real; los detalles finos desaparecen.
Preguntas frecuentes
¿Falta algo? Pregúntanos.
¿Para qué sirve cada tamaño?
¿Crea las etiquetas HTML o el manifiesto?
¿Se sube mi archivo?
¿Favicon es gratis?
¿Por qué falló Favicon o se ve mal?
Herramientas relacionadas
Más en Utilidades.