Generador de faviconTodos los tamaños, y el bloque head que los acompaña.
Suelta un logo y llévate un favicon.ico multirresolución de verdad, los tamaños PNG que piden los navegadores, un apple touch icon, el icono maskable de Android y un site.webmanifest ya relleno. Todo se genera en esta pestaña, tu imagen nunca se sube.
Suelta tu logo aquí
O toca para elegir un archivo. Una imagen cuadrada de 512 px o más funciona mejor.
PNG, JPG, WebP, SVG, ICO o GIF
Tu imagen se lee, se redimensiona y se empaqueta dentro de esta pestaña. Nunca se sube, y no hay ningún servidor de por medio en ningún momento.
¿Qué tamaños de favicon necesitas de verdad en 2026?
Muchos menos que los paquetes de veinte archivos que siguen repartiendo casi todos los generadores. Cinco superficies cubren todos los navegadores y sistemas que importan, y lo que va más allá es peso en tu <head> sin ganancia.
favicon.ico, 16 y 32 y 48
Sigue siendo el archivo que un navegador busca en la raíz de tu dominio antes de haber leído una sola línea de HTML. Un contenedor guarda los tres tamaños, y por eso este convertidor de favicon construye un .ico real en vez de renombrar un PNG. 16 px es la pestaña, 32 px es la pestaña retina y la barra de marcadores, 48 px son los accesos directos de Windows.
favicon.svg, cuando tienes un vectorial
Un favicon vectorial se ve nítido a cualquier tamaño e incluso puede responder al modo oscuro del sistema con una media query dentro del propio archivo. Los navegadores que lo entienden lo prefieren al .ico. Si subes un SVG aquí sigue siendo vectorial, nunca se rasteriza para devolvértelo como una copia falsa.
apple-touch-icon.png, 180×180
El icono que usa iOS cuando alguien añade tu sitio a su pantalla de inicio. Con un archivo basta: iOS reduce un único icono de 180 px desde iOS 8, así que el viejo montón de apple-touch-icon-57x57 hasta 152x152 es lastre. Este generador de apple touch icon escribe uno solo, y lo hace opaco.
android-chrome 192 y 512, más el maskable
Se referencian desde site.webmanifest y no desde una etiqueta link. 192 px es la pantalla de inicio, 512 px es la pantalla de carga y el aviso de instalación. La variante maskable es la que Android recorta a la forma que use el launcher, así que su dibujo necesita un margen real.
mstile-150x150.png, barato de conservar
Los sitios anclados de Windows todavía lo leen. Cuesta un PNG pequeño y dos etiquetas meta, así que va incluido, pero no se rompe nada si lo borras. Esa es la respuesta honesta, y por eso está el último de la lista en lugar de presentarse como imprescindible.
¿Por qué un archivo .ico contiene varias imágenes?
Porque .ico es un formato contenedor, no un formato de imagen. Entenderlo marca la diferencia entre un favicon que se ve en todas partes y otro que falla en silencio en Windows y en los lectores de feeds.
Primero un directorio, después las imágenes
El archivo abre con una cabecera de seis bytes que dice cuántas imágenes vienen, después una entrada de dieciséis bytes por imagen con su ancho, su alto, su longitud en bytes y su posición en el archivo, y solo entonces los datos de imagen. Todo es little-endian. Esa estructura es la razón de que un PNG renombrado a .ico no sea un .ico.
Quien lo consume elige el tamaño
Un navegador que dibuja una pestaña de 16 px lee el directorio, encuentra la entrada de 16 px y decodifica solo esa. Dale una única imagen de 512 px y la reducirá al dibujar, con un muestreo barato y un resultado borroso. Dale un 16 px hecho a propósito y usará ese.
Los datos pueden ser PNG
El formato original incrustaba BMP con el orden de píxeles invertido y una máscara de transparencia aparte de un bit. Todos los navegadores y todos los Windows desde Vista aceptan también PNG dentro del contenedor, y eso es lo que escribe este convertidor ico: archivos más pequeños, alfa de verdad, sin codificadores heredados.
En 16 px es donde se nota la calidad
Reducir un logo de 1024 px directamente a 16 px muestrea demasiados pocos píxeles del original y te deja una mancha gris. Esta herramienta va partiendo la imagen por la mitad en canvas intermedios, de 1024 a 512 a 256 y así sucesivamente, para que cada píxel aporte. Es la única razón de que un favicon pequeño siga siendo legible.
¿Sigo necesitando un apple-touch-icon?
Sí, y es el único archivo cuyas reglas son distintas a las del resto del paquete. Dos cosas que conviene saber, las dos ya resueltas arriba.
iOS tira tu transparencia
Safari compone el icono de la pantalla de inicio sobre negro y no sobre el fondo de pantalla, así que un logo que exportaste con cuidado con fondo transparente llega como una forma flotando en un cuadro negro. Por eso esta herramienta escribe siempre el apple-touch-icon con fondo opaco, blanco por defecto, aunque hayas elegido transparente para todo lo demás. Además iOS ya no aplica su propio brillo desde iOS 7, así que lo que entregas es lo que la gente ve.
Android recorta, no rellena
Un launcher de Android coge el icono maskable y lo corta a su propia forma, un círculo, un squircle o un cuadrado redondeado según el teléfono. Solo el 80 % central está garantizado, así que un logo que llena su lienzo de borde a borde pierde los extremos. Aquí el archivo maskable conserva un margen del 20 % pongas lo que pongas en el control, y la vista previa circular te enseña exactamente lo que va a quedar.
¿Cómo añado un favicon a mi sitio?
Dos pasos, y el segundo es donde se concentran los errores. Copia el bloque que genera la herramienta en lugar de escribirlo de memoria.
Deja los archivos en la raíz
Pon favicon.ico y los demás junto a tu index.html, para que respondan en tusitio.com/favicon.ico. Los navegadores piden esa ruta exacta por su cuenta, sin que nadie se lo diga, y por eso la ubicación importa más que la etiqueta link.
Pega el bloque head en todas las páginas
No solo en la portada. Quien aterriza en una página profunda y la guarda en marcadores debería llevarse el icono correcto. Si tu sitio usa una plantilla o un framework, el bloque va en el layout compartido.
Declara el .ico sin tamaño
Usa rel="icon" href="/favicon.ico" sizes="any". Los tamaños ya están dentro del contenedor, y fijar uno en el marcado impide que el navegador vaya a por los demás. La línea del SVG va primero para que los navegadores que entienden vectores se queden con ella.
Y luego recarga en profundidad, dos veces
Los favicons se cachean con dureza y aparte de la página, así que tu icono antiguo puede sobrevivir a una recarga normal durante días. Abre el archivo directamente en tusitio.com/favicon.ico para confirmar que se está sirviendo el nuevo antes de dar nada por roto.
¿Quieres comprobar a dónde apunta de verdad un código QR o un enlace corto que ya existe? Descífralo con el resolvedor de códigos QR
¿Necesitas un enlace corto para el sitio nuevo? Crea uno con el acortador de enlaces gratuito
El icono es la mitad pequeña de una primera impresión.
Un favicon es lo que la gente ve cuando ya está en tu sitio. El enlace que la trajo hace el trabajo más difícil, y suele ser la parte que nadie mide. Si eso te resulta útil, LinkScale es lo que construimos.
Mira de dónde vino la visita
Clics, países, dispositivos y qué pasó después, para cada enlace que repartes, en vez de un número en el panel de otra persona.
Cambia el destino más tarde
Manda un enlace impreso o publicado a otro sitio a posteriori, sin pedirle a nadie que actualice lo que guardó.
Una página para todo
Una página de enlace en bio con la tienda, el formulario de reserva y las redes, para que el único enlace que te dejan poner llegue más lejos.
Preguntas sobre el generador de favicon
¿Aún tienes preguntas?
En líneaPersonas reales, normalmente responden en unos minutos.
Es gratis, sin cuenta, sin marca de agua y sin límite de archivos generados. Tu imagen no se sube nunca: se lee con el propio FileReader del navegador, se dibuja en un canvas y se empaqueta en Blobs, todo dentro de la página. Detrás de esta herramienta no hay ningún endpoint, así que no hay a dónde enviarla. Puedes comprobarlo abriendo la pestaña de red de tu navegador mientras la usas, o desconectando internet una vez cargada la página.
Ve más lejos con LinkScale
Favicon listo. El enlace que trae a la gente es la otra mitad.
LinkScale es una plataforma de gestión de enlaces para quien quiere saber qué pasa después del clic, y cambiar el destino sin reimprimir nada.
Free 14-day trial on every plan