Generador de favicon que crea todos los tamaños desde una imagen
Añade una imagen en la columna izquierda y elige los tamaños que necesitas: las vistas previas aparecen de inmediato a la derecha. No hay botón de generar que pulsar, y también recibes un favicon.ico multitamaño junto al código head listo para pegar. Tu imagen nunca sale del navegador.
Añadir una imagen
Suelta una imagen aquí
PNG · JPG · WEBP · SVG · un origen casi cuadrado funciona mejor
Tamaños a crear
Opciones
Conjunto generado
- Origen
- —
- Tamaños elegidos
- —
- Archivos creados
- —
- Tamaño total
- —
Se muestra una imagen de ejemplo. En cuanto añadas la tuya, la sustituye.
Código para pegar en head
Todo se genera dentro del navegador sobre un canvas. Las imágenes nunca se suben, y el favicon.ico reúne las versiones de 16, 32 y 48 píxeles en un solo archivo para que el navegador elija la adecuada.
sin rodeos.
- Todo a la vistaLa zona de entrada y los resultados se reconocen rápido.
- Resultado primeroEl número principal va delante; el detalle queda debajo.
- Menos requisitosSin registro ni datos innecesarios antes de usar la herramienta.
Cómo usar el generador de favicon
El favicon es la marca pequeña que representa tu sitio en las pestañas del navegador, las listas de marcadores y los accesos directos de la pantalla de inicio. Parece algo que basta con reducir, pero tiene que seguir siendo legible a 16 píxeles y verse nítido en una pantalla de inicio de 512, así que conviene preparar varios tamaños por separado.
Este generador de favicon toma una imagen, crea trece tamaños de una vez y además produce el favicon.ico multitamaño que los navegadores buscan realmente junto con el HTML que pegas en head. Todo se ejecuta dentro del navegador, de modo que tu logotipo original nunca sale del equipo.
Dónde aparece realmente el favicon
La misma imagen acaba en varios sitios con tamaños distintos. Saber a dónde va te dice qué tamaños merece la pena conservar.
- Pestañas y barra de direcciones — 16 y 32 píxeles son los que se ven de verdad
- Listas de marcadores e historial — 32 y 48 píxeles
- Accesos directos de iOS — 152, 167 y 180 píxeles
- Pantallas de inicio de Android y PWA instaladas — 192 y 512 píxeles
- Iconos en resultados de búsqueda — se recomiendan múltiplos de 48 píxeles
Cómo trata esta herramienta tu imagen
Al elegir un archivo, el navegador lo lee en memoria, lo dibuja en un canvas y lo vuelve a dibujar una vez por cada tamaño seleccionado antes de exportar PNG. No hay paso de subida, así que responde al instante y el archivo original queda intacto.
- Cambiar un tamaño o una opción refresca las vistas previas sin pulsar ningún botón
- Cada tamaño se dibuja directamente desde el origen, sin pasos intermedios que cuesten calidad
- Al redibujar se pierden metadatos como la información de cámara o de autoría
Sigue la pantalla en orden
La columna izquierda reúne la entrada y los ajustes; la derecha, el resultado. Con recorrerla una vez de arriba abajo basta.
- Suelta una imagen en el panel izquierdo o pulsa Elegir archivo
- Apaga los chips de tamaño que no necesites
- Activa el recorte automático si la imagen no es cuadrada, o el margen si el logotipo toca el borde
- Elige PNG, ICO o ambos como formato de salida
- Guarda favicon.ico o un ZIP y copia el código head bajo las vistas previas
Por qué favicon.ico debe contener varios tamaños
ICO es un formato contenedor capaz de guardar varias resoluciones en un solo archivo. Los navegadores y los sistemas operativos eligen la que encaja en cada hueco, así que un ICO con solo 16 píxeles se ve borroso donde hace falta algo mayor.
- El favicon.ico creado aquí reúne 16, 32 y 48 píxeles en un archivo
- Colocado en la raíz del sitio se encuentra automáticamente, sin declaración
- Los iconos grandes pesan menos como PNG referenciados desde head
Cuándo usar PNG y cuándo ICO
No compiten entre sí: atienden a consumidores distintos. La mayoría de los sitios publican ambos.
- PNG — el formato por defecto de los navegadores modernos y las pantallas de inicio móviles
- ICO — los navegadores antiguos y el entorno Windows buscan primero el favicon.ico de la raíz
- Crear PNG + ICO a la vez evita que algún cliente se quede sin icono
Cómo elegir la imagen de origen
Al reducir mucho solo sobreviven la forma y el contraste. Un origen recargado se convierte en una mancha a 16 píxeles.
- Parte de una imagen casi cuadrada de al menos 512 píxeles
- Si lleva texto, límitalo a uno o dos caracteres
- Las líneas finas y los degradados desaparecen en tamaños pequeños
- Un PNG transparente es más seguro cuando no conoces el fondo de destino
Dónde va el fragmento head
Sube los archivos generados a tu sitio y pega el código de la derecha dentro del head del HTML. Ajusta las rutas al lugar donde realmente los hayas colocado.
- link rel="icon" apunta al icono de la pestaña
- link rel="apple-touch-icon" cubre la pantalla de inicio de iOS
- El array icons de manifest.json gobierna los iconos de instalación de Android y PWA
- El favicon.ico de la raíz se descubre automáticamente sin declararlo
Un ejemplo paso a paso
Supongamos que tienes un logotipo cuadrado de 1024 píxeles y quieres el conjunto habitual de un sitio web. La selección mínima útil sería esta.
- Deja activados 16, 32 y 48 y guarda favicon.ico
- Deja activado 180 para obtener apple-touch-icon.png
- Deja activados 192 y 512 para los iconos de PWA
- Descarga el ZIP completo, descomprímelo en la raíz y pega el código head
Errores frecuentes
Los favicon se cachean con mucha fuerza, lo que dificulta confirmar los cambios. Estos cuatro casos cubren la mayoría.
- El icono antiguo persiste — limpia la caché del navegador y del CDN y recarga forzando
- Se convierte en una mancha a 16 píxeles — el origen tiene demasiado detalle, simplifica la forma
- Solo se recorta el icono de la pantalla de inicio — activa el margen para crear un área segura
- La transparencia sale negra — comprueba que exportaste las entradas PNG
Comprueba antes de publicar
Recorrer esta lista justo antes del despliegue evita una ronda de trabajo extra.
- ¿Está favicon.ico en la raíz del sitio?
- ¿Coinciden las rutas del código head con la ubicación real de los archivos?
- ¿Sobrevive el icono de 180 píxeles al redondeo de esquinas de iOS?
- ¿Están 192 y 512 registrados en el manifest?
- ¿Sigue siendo reconocible la forma a 16 píxeles en una pestaña real?
Preguntas frecuentes
¿Se sube mi imagen a un servidor?
No. Todo el proceso, desde elegir el archivo hasta guardarlo, ocurre dentro del navegador de tu propio dispositivo. El logotipo original nunca sale del equipo, así que puedes trabajar con material aún no publicado sin riesgo.
¿Qué tipo de origen conviene preparar?
Un PNG casi cuadrado de al menos 512 píxeles es lo más seguro. Si la proporción difiere, el recorte automático toma el centro. Partir de algo pequeño hace que los tamaños grandes se vean borrosos, así que prepara un original generoso.
¿Dónde va favicon.ico?
En la raíz del sitio, justo bajo el dominio. Colocado ahí se encuentra automáticamente sin nada en head. Si lo guardas en otra ruta tendrás que apuntarlo explícitamente.
Cambié el favicon pero sigue apareciendo el anterior.
Los favicon se cachean con especial dureza. Prueba primero una recarga forzada; si persiste, añade una versión al nombre del archivo o purga el CDN. Cerrar y abrir la pestaña a menudo no basta.
¿Se conserva la transparencia?
Sí en PNG, y también en el ICO de esta herramienta porque almacena datos PNG. Aun así, comprueba una pestaña real en modo oscuro, ya que un logotipo oscuro sobre una barra oscura puede desaparecer.
¿Qué ocurre con una imagen que no es cuadrada?
Con el recorte automático activado se corta el centro usando el lado más corto. Desactivado, la imagen se ajusta dentro de un cuadrado y el área sobrante queda transparente. Un logotipo apaisado suele quedar mejor si lo recortas tú antes.
¿Cuándo conviene activar el margen?
Cuando el logotipo llega al borde del cuadrado. Los entornos que redondean las esquinas del icono, como la pantalla de inicio de iOS, recortan esos bordes; un margen del 5% crea un área segura.
¿Qué tamaños necesita una PWA?
192 y 512 píxeles son prácticamente obligatorios. Crea ambos y registóralos en el array icons del manifest para que el icono de instalación de Android y la pantalla de bienvenida se muestren bien. El de 512 también sirve como origen maskable.
¿Puedo crear un favicon SVG?
Puedes subir un origen SVG y convertirlo a PNG en cada tamaño, pero la herramienta no emite salida vectorial. Para usar un favicon SVG, referencia el SVG original en head y conserva los archivos ICO y PNG de aquí como respaldo para navegadores antiguos.
Referencias
Documentación oficial de las declaraciones de icono y las convenciones de tamaño.