Generador de Favicon | ICO y PNG en varios tamaños
Sube una imagen, recórtala en cuadrado y genera un favicon.ico que agrupa varios tamaños (16, 32, 48px y más) junto a un juego completo de PNG. Reducción de alta calidad con Lanczos y código HTML listo para pegar, todo procesado en tu navegador.
Cómo declarar un favicon (por patrón)
La forma de declarar un favicon depende de hasta dónde quieras llegar. Aquí tienes los patrones necesarios, desde lo mínimo imprescindible hasta el soporte completo de PWA y modo oscuro. Todos los fragmentos asumen que los archivos generados están en la raíz de tu sitio.
Patrón 1: lo mínimo (solo colocar favicon.ico)
Sin escribir ni una línea de HTML: basta con colocar /favicon.ico en la raíz del documento. Los navegadores buscan esa ruta de forma implícita, así que el icono aparece sin ninguna etiqueta.
your-site/
└── favicon.ico ← solo colócalo aquí (no hace falta HTML)
<!-- Si prefieres declararlo, basta con esta única línea -->
<link rel="icon" href="/favicon.ico" sizes="any">| Ideal para | Sitios personales, herramientas internas y cualquier caso en el que baste con que se vea |
|---|---|
| Notas | Añadir sizes="any" permite que los navegadores traten correctamente el ICO como último recurso cuando más adelante añadas iconos SVG o PNG. Se recomienda incluir 16, 32 y 48px dentro del ICO. |
Patrón 2: configuración estándar (recomendada)
Además del ICO, archivos PNG y un Apple Touch Icon: con diferencia la configuración más habitual hoy. Cubre desde los navegadores de escritorio hasta añadir el sitio a la pantalla de inicio de iOS.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">| Ideal para | Webs corporativas, blogs y medios: sitios web convencionales |
|---|---|
| Notas | Las zonas transparentes de un apple-touch-icon se rellenan de negro, así que exporta siempre un PNG opaco con color de fondo. iOS además redondea las esquinas, por lo que dejar en torno a un 10% de margen evita que se recorten los bordes. |
Patrón 3: configuración completa para PWA
En una PWA que se abre como una aplicación desde la pantalla de inicio, los iconos se registran en site.webmanifest. Si no están presentes tanto 192px como 512px, Chrome no la considerará instalable.
<!-- HTML (dentro de head) -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<!-- site.webmanifest -->
{
"name": "My Site",
"short_name": "Site",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}| Ideal para | PWA, aplicaciones web y servicios usados sobre todo desde el móvil |
|---|---|
| Notas | iOS no consulta los iconos declarados en el manifest, así que sigue haciendo falta un apple-touch-icon junto a él. display: "standalone" oculta la interfaz del navegador para que el sitio se abra como una aplicación nativa. |
Patrón 4: favicon SVG con soporte de modo oscuro
Un favicon SVG es independiente de la resolución, y el CSS dentro del propio SVG puede cambiar los colores en modo oscuro. Declara junto a él los archivos ICO y PNG para los navegadores que no lo admiten.
<!-- HTML (dentro de head). Gana el primer formato que el navegador sepa leer -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- favicon.svg (invirtiendo el color en modo oscuro) -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #1a1a1a; }
@media (prefers-color-scheme: dark) { path { fill: #ffffff; } }
</style>
<path d="M4 4h24v24H4z"/>
</svg>| Ideal para | Sitios con un logotipo vectorial o para quien quiera que el icono cambie en modo oscuro |
|---|---|
| Notas | Chrome, Firefox y Edge admiten favicons SVG. Safari ignora actualmente el SVG en rel="icon", por lo que las alternativas en PNG e ICO son obligatorias. |
Patrón 5: subdirectorios y renovación de la caché
Qué escribir cuando los iconos no están en la raíz, o cuando has reemplazado el icono pero sigue apareciendo el antiguo. Los favicons se cachean con fuerza, así que cambiar la URL es la solución más fiable.
<!-- Indica la ruta completa cuando los archivos están en un directorio propio -->
<link rel="icon" href="/assets/icons/favicon.ico?v=2" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png?v=2">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png?v=2">
<!-- Cuidado con la ruta absoluta si el sitio se sirve desde un subdirectorio (p. ej. /docs/) -->
<link rel="icon" href="/docs/favicon.ico" sizes="any">| Ideal para | Distribución por CDN, sitios con gestión centralizada de recursos y sustituciones de icono |
|---|---|
| Notas | La búsqueda implícita de /favicon.ico en la raíz es la única ruta que no puedes cambiar, así que aunque sirvas los iconos desde un subdirectorio, conservar una copia en la raíz no deja huecos. |
Qué archivo se usa y dónde
Una referencia rápida de dónde se usa realmente cada archivo. No necesitas todos: elige según los entornos que quieras cubrir.
| Archivo | Tamaño | Dónde se usa |
|---|---|---|
| favicon.ico | 16 / 32 / 48px | Pestañas del navegador, marcadores y barra de tareas de Windows. Se busca en la raíz aunque no haya ninguna etiqueta |
| favicon-16x16.png | 16×16 | Pestaña del navegador en pantallas de resolución estándar |
| favicon-32x32.png | 32×32 | Pestaña del navegador en pantallas Retina y otras de alta resolución, y barra de marcadores |
| apple-touch-icon.png | 180×180 | El icono que aparece al añadir el sitio a la pantalla de inicio de iOS o iPadOS. La transparencia se rellena de negro |
| android-chrome-192x192.png | 192×192 | Icono de la pantalla de inicio de Android (a través del manifest) |
| android-chrome-512x512.png | 512×512 | Pantalla de inicio de la PWA y listados de aplicaciones (a través del manifest) |
| site.webmanifest | — | Archivo de configuración de la PWA que declara iconos, color de tema y modo de arranque |
| favicon.svg | Escalable | Chrome, Firefox y Edge. Permite cambiar de color en modo oscuro |
Qué es el generador de favicon
El generador de favicon es una herramienta que permite crear, a partir de una sola imagen, el archivo favicon.ico junto con un juego completo de PNG en distintos tamaños. El formato ICO tiene la particularidad de poder agrupar varias resoluciones —16, 32, 48px y más— dentro de un único archivo, de modo que cada destino (pestaña del navegador, marcador, barra de tareas) recibe automáticamente la versión pensada para él. No hace falta exportar cada tamaño a mano: desde el recorte a cuadrado hasta los ajustes finales de salida, todo el proceso se resuelve directamente en la pantalla.
La carga de la imagen, el recorte, la reducción de tamaño y la conversión a ICO o PNG se procesan íntegramente con JavaScript dentro de tu propio navegador. La imagen que subas nunca llega a ningún servidor, así que puedes usar la herramienta con total tranquilidad incluso con logotipos todavía sin publicar o con materiales que tu guía de marca considera confidenciales. Para la reducción se emplea el algoritmo Lanczos, que preserva el contraste de los contornos: incluso en tamaños tan diminutos como 16px, los trazos de letras y logotipos tienden a mantenerse legibles en lugar de convertirse en una mancha borrosa.
Cómo crear un favicon
- Sube la imagen Arrastra y suelta el logotipo o icono que quieras convertir, o haz clic para elegir el archivo desde tu equipo. Se admiten PNG, JPEG, SVG, WebP, GIF y BMP, así que puedes partir de casi cualquier material que ya tengas a mano.
- Recorta en cuadrado Arrastra el marco de recorte para desplazarlo y usa las esquinas para ajustar el tamaño de la selección. Como el favicon exige siempre una proporción cuadrada, el marco queda fijado en 1:1 y no es posible deformarlo por accidente; también puedes ajustar la posición con las flechas del teclado para lograr precisión de un solo píxel.
- Elige los ajustes de salida Configura, según lo que necesites, qué tamaños se agrupan dentro de favicon.ico, qué tamaños de PNG se generan por separado, el algoritmo de reducción (Lanczos, bilineal o vecino más cercano), el margen interior y el color de fondo para las zonas transparentes.
- Genera y revisa la vista previa Al pulsar «Generar favicons» se crean todos los tamaños de una sola vez. La vista previa a tamaño real te permite comprobar, sin ningún escalado adicional del navegador, cómo se ve realmente cada tamaño pequeño antes de publicarlo.
- Descarga e instala los archivos Descarga los archivos uno por uno o todos juntos en un ZIP, y pega el código HTML generado automáticamente dentro de la etiqueta de tu sitio para que los navegadores y dispositivos encuentren cada icono.
Consejos para aprovecharla mejor
- Parte de una imagen cuadrada de al menos 512×512px y el contorno seguirá siendo legible incluso a 16px. Si tu imagen no es cuadrada, la herramienta de recorte integrada te permite elegir justo la zona cuadrada que quieras.
- Lanczos3 calcula un promedio ponderado de los píxeles vecinos mientras los lóbulos negativos de su núcleo realzan los bordes. Conserva más del contorno que el escalado interno del navegador, y la diferencia se nota en logotipos y textos.
- La característica que define a ICO es que un solo archivo puede contener varios tamaños. Si incluyes 16, 32 y 48px, la pestaña, la barra de marcadores y la barra de tareas de Windows elegirán cada una la versión pensada para ellas.
- Los Apple Touch Icon rellenan de negro las zonas transparentes, así que lo más seguro es un PNG opaco con color de fondo. Un margen de alrededor del 10% también evita que la máscara redondeada de iOS recorte los bordes.
- Los navegadores guardan los favicons en caché de forma muy persistente. Si el reemplazo no aparece, añade una consulta como
?v=2a la URL o fuerza una recarga completa.
Casos de uso
Creación del favicon para un sitio web nuevo
Antes de publicar un proyecto puedes preparar de una sola vez el conjunto completo de archivos ICO y PNG junto con el código HTML correspondiente, evitando el descuido habitual de olvidar alguna etiqueta dentro de
.Generación conjunta de iconos para PWA
Los tamaños de 192px y 512px que exige añadir un sitio a la pantalla de inicio o mostrar una pantalla de carga se generan a la vez que el site.webmanifest correspondiente, sin tener que calcular ni exportar cada resolución por separado.
Conversión masiva a partir de un logotipo de marca
Puedes cargar el logotipo oficial de una empresa o proyecto y, ajustando el margen y el color de fondo según la guía de marca, exportar de una sola vez todos los iconos que necesitan los distintos dispositivos y sistemas operativos.
Actualización de favicons en un CMS o generador de sitios estáticos
Cuando toca renovar el favicon de un sitio gestionado con WordPress, Hugo u otra plataforma similar, esta herramienta permite reunir sin lagunas todos los formatos de archivo que ese entorno concreto espera encontrar.
Renovación de iconos durante un cambio de identidad de marca
Cuando un rediseño de logotipo obliga a actualizar a la vez la pestaña del navegador, los marcadores guardados y el icono de la pantalla de inicio, puedes regenerar todo el conjunto y comprobar de inmediato el resultado en cada destino antes de publicarlo.
Glosario
- favicon.ico
- El nombre de archivo que los navegadores buscan de forma implícita en la raíz de un sitio web, incluso sin ninguna etiqueta que lo declare explícitamente. Se guarda en formato ICO, capaz de contener varias resoluciones de imagen dentro de un mismo archivo.
- Apple Touch Icon
- El icono que aparece cuando un usuario de iOS añade una página a la pantalla de inicio de su dispositivo. Como iOS rellena de negro las zonas transparentes de este icono, se recomienda especificar siempre un color de fondo sólido en lugar de dejar transparencia.
- Algoritmo de Lanczos
- Un método de reducción de imágenes que utiliza como núcleo una función sinc truncada a un número finito de lóbulos. Gracias a sus lóbulos negativos, refuerza ligeramente el contraste de los bordes durante la reducción, lo que lo hace especialmente adecuado para encoger logotipos y texto sin que pierdan legibilidad.
- PWA (Progressive Web App)
- El nombre general para las tecnologías que permiten que un sitio web se comporte como una aplicación nativa: añadirlo a la pantalla de inicio, mostrar una pantalla de carga propia y funcionar sin conexión. Requiere, entre otros recursos, iconos de 192px y 512px además de un archivo site.webmanifest.
- site.webmanifest
- Un archivo de configuración en formato JSON que define el nombre, los iconos y el color de tema de una PWA. Se coloca en la raíz del sitio y se enlaza desde el HTML mediante una etiqueta , de modo que el navegador pueda leer sus datos al añadir el sitio a la pantalla de inicio.
- Vecino más cercano
- Un algoritmo de reducción que toma directamente el color del píxel más próximo sin mezclarlo con los píxeles vecinos. Al no promediar colores, conserva contornos nítidos y bien definidos, por lo que resulta especialmente indicado para reducir pixel art sin difuminar sus bordes.
Preguntas frecuentes
/favicon.ico sigue siendo una ruta que los navegadores buscan de forma implícita, incluso sin ninguna etiqueta. Los lectores de feeds, los servicios de marcadores y algunos rastreadores descargan ese ICO de la raíz sin analizar tu HTML, así que publicarlo junto a los PNG no deja huecos.<link rel="icon" type="image/svg+xml">. Declarar junto a él los archivos ICO y PNG generados aquí te da una alternativa fiable para los navegadores que ignoran los iconos SVG.
A propósito — El reto de dibujar sobre dieciséis píxeles
En 1999, Internet Explorer 5 añadió un pequeño icono junto a las entradas de la lista de Favoritos. El mecanismo era encantadoramente simple: bastaba con dejar un archivo llamado favicon.ico en la raíz del sitio para que lo recogiera. El propio nombre es una contracción de «favorite icon». El elemento <link rel="icon"> se formalizó en la especificación HTML bastante después, y la búsqueda implícita de un ICO en la raíz sobrevive hoy únicamente por compatibilidad.
Que ICO tomara prestado el formato de iconos de Windows resultó tener enormes consecuencias. Un solo archivo ICO puede alojar varias resoluciones, lo que significa que la pestaña de 16px y la barra de tareas de 48px pueden mostrar dibujos realmente distintos. Es algo más que una comodidad: en un lienzo de 16×16 píxeles, reducir mecánicamente un diseño pensado para 48px hace desaparecer los trazos finos y vuelve ilegibles las letras. Los diseñadores de iconos dibujaban cada tamaño a mano porque era la única forma de resolverlo.
La generación moderna de favicons sustituye ese trabajo manual por otra pregunta: ¿con qué inteligencia se puede reducir? Un promedio simple (bilineal) pierde contraste en los bordes, mientras que el muestreo directo (vecino más cercano) elimina los trazos finos por completo. El remuestreo Lanczos usa una función sinc truncada a un número finito de lóbulos: el lóbulo principal conserva la información original y los lóbulos negativos laterales vuelven a levantar los bordes. Ese leve énfasis en el contorno es justo lo que necesitan los iconos diminutos.
Las exigencias no han dejado de crecer. El iPhone llegó en 2007 con el Apple Touch Icon (57px al principio, 180px hoy), las PWA hicieron necesarios los 192px y 512px, y los favicons SVG con soporte de modo oscuro ya están sobre la mesa. Parece mucho alboroto comparado con dejar un solo archivo, pero la otra cara es que esas pocas decenas de píxeles de la pestaña las ve una cantidad enorme de gente.