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 |
Consejos
- 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.
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.