Un favicon no es una sola imagen. Es el pequeño icono de una pestaña del navegador, el mayor que usa un móvil cuando se añade un sitio a la pantalla de inicio y el aún mayor que esperan un manifiesto PWA y los selectores de aplicaciones. Cada contexto quiere un tamaño distinto, y equivocarse se nota: un icono de 16 píxeles estirado para llenar un mosaico de pantalla de inicio se ve roto de una forma que los visitantes perciben.
Este generador crea el juego completo a partir de una sola imagen. Tu original se recorta al centro en cuadrado, se escala a cada tamaño necesario con el remuestreador pica en lugar del filtro por defecto del navegador —lo que importa enormemente a 16 píxeles, donde un escalado tosco convierte un logotipo en una mancha— y se empaqueta en un ZIP junto con un archivo .ico multirresolución de verdad.
Los iconos se generan en tu navegador. Logotipos sin publicar y material de marca no se suben a ningún servicio de iconos.
<head> de tus páginas.| Archivo | Tamaño | Lo usa |
|---|---|---|
| favicon.ico | 16, 32 y 48 combinados | Pestañas del navegador, marcadores, compatibilidad heredada |
| favicon-16x16.png | 16 × 16 | Icono de pestaña en pantallas de densidad estándar |
| favicon-32x32.png | 32 × 32 | Icono de pestaña en pantallas de alta densidad |
| favicon-48x48.png | 48 × 48 | Accesos directos de sitio en Windows |
| apple-touch-icon.png | 180 × 180 | Pantalla de inicio de iOS |
| icon-512.png | 512 × 512 | Pantalla de inicio de Android, manifiesto PWA, selectores de aplicaciones |
El .ico es un contenedor multirresolución de verdad que aloja las versiones de 16, 32 y 48 píxeles, no un PNG renombrado. Windows y los navegadores antiguos eligen el tamaño que conviene al contexto en el que están dibujando.
Descomprime el ZIP en la raíz de tu sitio y añade esto al <head> de cada página:
| Finalidad | Etiqueta |
|---|---|
| Favicon clásico | <link rel='icon' href='/favicon.ico' sizes='any'> |
| Densidad estándar | <link rel='icon' type='image/png' sizes='16x16' href='/favicon-16x16.png'> |
| Alta densidad | <link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'> |
| Pantalla de inicio de iOS | <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'> |
El icono de 512 píxeles se referencia desde el manifiesto de tu aplicación web y no desde una etiqueta link.
Un favicon se muestra a menudo a 16 píxeles de lado, aproximadamente el tamaño de un solo carácter de texto corrido. Un logotipo con texto completo resulta ilegible a esa escala; una ilustración detallada se convierte en ruido.
Lo que funciona es una sola letra, un monograma sencillo o una forma rotunda con fuerte contraste tanto sobre fondos de pestaña claros como oscuros. Compruébalo reduciendo tu logotipo a 16 píxeles y mirándolo a un brazo de distancia: si no distingues qué es, nadie lo hará.
Al menos 512 × 512 y cuadrada si es posible. El origen se recorta al centro en cuadrado, así que un logotipo apaisado perderá sus extremos. Rellénalo antes hasta un cuadrado con la herramienta Hacer cuadrada si eso es un problema.
Sí. Es un contenedor ICO multirresolución de verdad con imágenes de 16, 32 y 48 píxeles, no un PNG con la extensión cambiada. Windows y los navegadores antiguos lo leen correctamente.
En el directorio raíz de tu sitio web, de modo que sean accesibles en rutas como /favicon.ico. Después añade a tus páginas las etiquetas link mostradas arriba.
Los navegadores guardan los favicon en caché con mucha insistencia. Haz una recarga forzada, o abre directamente la URL del archivo de icono para confirmar que se está sirviendo, y recarga la página.
Sí en los archivos PNG, que conservan su canal alfa. Ten en cuenta que un icono transparente debe funcionar tanto sobre fondos de pestaña claros como oscuros.
No. El recorte, el escalado y el montaje del ICO ocurren todos dentro de tu navegador.