Arrastra y suelta
para subir tu archivo
Crear favicon
Crea un conjunto completo de favicons a partir de una imagen
Suelta un PNG, JPEG, WEBP, SVG o GIF y obtén todos los iconos que un sitio web moderno necesita de verdad: un favicon.ico real con varios tamaños, PNG de 16 a 512 píxeles, un apple-touch-icon para las pantallas de inicio de iOS, un site.webmanifest para aplicaciones web instalables y las etiquetas <link> exactas para pegar en tu <head>. Tu imagen nunca sale de tu navegador. También sirve como conversor de PNG a ICO: suelta cualquier PNG, JPG o WEBP y descarga un favicon.ico real con varios tamaños.
Imagen de origen:
Gratis, sin registro. 100 % en el cliente, no se sube nada a ningún servidor
Opciones del icono
La transparencia se conserva por defecto. Elige un color de fondo plano si quieres que el .ico siga siendo legible sobre la interfaz oscura del navegador; Windows y las barras de marcadores antiguas no siempre componen el alfa como esperas.
Fondo
0%
Espacio libre alrededor del diseño. Un 10 % va bien para logotipos de texto y logotipos densos; déjalo en 0 si el glifo ya tiene su propio margen.
Icono Apple touch
iOS ya aplica una máscara a los iconos de la pantalla de inicio, así que deja esto desactivado salvo que también sirvas el archivo de 180×180 en un lugar que no aplique su propia máscara.
Tamaños generados
16, 32, 48, 64, 96, 180, 192 y 512 píxeles (incluidos los iconos android-chrome-192x192.png y android-chrome-512x512.png para el manifiesto), además de un favicon.ico con varios tamaños que contiene las versiones de 16, 32 y 48.
Manifiesto de aplicación web
Estos campos rellenan el site.webmanifest. Chrome y Edge lo leen para decidir si tu sitio web se puede instalar, y Android usa el color del tema para la barra de estado.
Se usa para
theme_color y para la etiqueta <meta name="theme-color">.
Se muestra detrás del icono mientras arranca una aplicación instalada.
Vídeo tutorial (en inglés)
Aprende a crear un favicon con el generador de favicon gratuito de Static.app.
-
Todos los tamaños que piden los navegadores
16 y 32 para pestañas, 48 para accesos directos de Windows, 96 para los resultados de búsqueda de Android, 180 para la pantalla de inicio de iOS, 192 y 512 para el manifiesto de la PWA. Entra una imagen, sale el conjunto completo.
-
Tu logotipo nunca sale de la pestaña
El cambio de tamaño, el empaquetado del ICO y el ZIP ocurren en tu navegador con canvas y arrays tipados. No hay ningún endpoint de subida, así que una marca aún sin publicar se queda en tu ordenador.
-
Un .ico de verdad, no un PNG renombrado
El
favicon.icoes un contenedor ICO auténtico con tres entradas de directorio (16, 32 y 48), de modo que cada contexto elige el tamaño que necesita en lugar de reescalar mal una sola imagen.
Cómo generar un favicon
-
1
Suelta un PNG, JPEG, WEBP, SVG o GIF cuadrado en el cuadro de arriba, o haz clic para elegir uno.
-
2
Ajusta el fondo, el margen interior y el nombre de la aplicación hasta que las vistas previas se vean bien a 16 píxeles.
-
3
Descarga el ZIP, deja los archivos en la raíz de tu sitio web y pega el fragmento
<link>en tu<head>.
Todo lo que necesita un conjunto de favicons moderno
-
apple-touch-icon, con el tamaño correcto
iOS busca un PNG de 180×180 y no lee el alfa como lo hace la pestaña de un navegador. Lo aplanamos sobre el color que elijas y podemos redondear las esquinas de antemano si necesitas que el archivo se vea terminado fuera de Safari.
-
Iconos PWA maskable
Los iconos de 192 y 512 se incluyen como entradas separadas
"purpose": "any"y"purpose": "maskable"del manifiesto, como recomienda la especificación. Añade un margen de aproximadamente el 10 % y los lanzadores de Android podrán recortar tu icono en círculo, squircle o lágrima sin cortar el diseño. -
HTML para copiar y pegar, y un README
El ZIP incluye todos los PNG, el ICO, el manifiesto y un README con las etiquetas
<link>exactas y para qué sirve cada archivo, para que quien publique el cambio no tenga que adivinar.
Qué tamaños de favicon importan de verdad
Un favicon ya no es un solo archivo. Los navegadores, los sistemas operativos y los lanzadores de aplicaciones recurren cada uno a un recurso distinto, y el tamaño equivocado se reduce sobre la marcha, que es justo como un logotipo nítido se convierte en una mancha gris en una pestaña.
16×16 es el icono clásico de pestaña y barra de direcciones en pantallas de densidad estándar. También es el tamaño que castiga el detalle: los trazos finos y el texto pequeño desaparecen. Si tu marca tiene más de una o dos formas, simplifícala antes de generar los iconos.
32×32 es el que ve la mayoría de la gente, porque las pantallas retina y de alta densidad muestran el hueco de 16 píxeles al doble de densidad. También es el tamaño que usa Windows para los accesos directos de la barra de tareas. Considera el 32 tu objetivo principal.
48×48 aparece en los accesos directos del escritorio de Windows y viaja dentro de favicon.ico. 96×96 cubre los accesos directos de Android y algunos formatos de resultados de búsqueda.
180×180 es el apple-touch-icon: el archivo que usa iOS cuando alguien añade tu sitio web a la pantalla de inicio. Si lo omites, Safari hace una captura de tu página, y eso nunca parece intencionado.
192×192 y 512×512 pertenecen al manifiesto de aplicación web. Chrome necesita ambos antes de ofrecer un aviso de instalación, y el de 512 también se usa para la pantalla de bienvenida en Android.
Por qué sigue mereciendo la pena incluir favicon.ico
Todos los navegadores actuales leen favicons PNG, así que es tentador prescindir del .ico. No lo hagas. Los navegadores siguen pidiendo /favicon.ico en la raíz de tu sitio web automáticamente cuando no se resuelve ningún <link rel="icon">, y muchas de las cosas que muestran tu sitio web no son navegadores en absoluto.
Los lectores de feeds, los clientes de chat, los rastreadores de vistas previas de enlaces, los gestores de marcadores, algunos proxies corporativos y los navegadores antiguos de intranet recurren a esa ruta fija. Sin el archivo registran un 404 en tu sitio web en cada visita en frío y muestran un icono de página en blanco.
El otro motivo es que ICO es un contenedor, no un único mapa de bits. Un archivo guarda varias resoluciones, cada una con su propia entrada de directorio, y quien lo consume elige la más cercana. Por eso empaquetamos en él el 16, el 32 y el 48: una barra de marcadores toma el de 16, un acceso directo de Windows toma el de 48, y ninguno tiene que reescalar.
Esta herramienta construye ese contenedor byte a byte en tu navegador: una cabecera de seis bytes, una entrada de directorio de dieciséis bytes por imagen y después los datos PNG. Las entradas ICO comprimidas en PNG forman parte del formato y las leen correctamente todos los navegadores actuales, así como la Vista previa de macOS y el Explorador de Windows.
¿Ya tienes tus favicons? Publica el sitio web al que pertenecen con hosting estático
Seleccionar archivo
o suelta aquí tu archivo para subirlo
Preguntas frecuentes
¿Qué es un favicon?
Un favicon es el pequeño icono que el navegador muestra en la pestaña, en la barra de marcadores y en la lista del historial de tu sitio web. Es el elemento de marca más pequeño que tienes, y es de las primeras cosas que la gente nota cuando tu página está entre otras veinte pestañas abiertas. Google también muestra los favicons junto a los resultados de búsqueda, tanto en móvil como en ordenador.
¿Qué tamaños de favicon necesito realmente?
Un conjunto moderno práctico es 16x16 y 32x32 para las pestañas del navegador, 48x48 para los accesos directos de Windows, 180x180 para el icono Apple touch que se usa cuando alguien añade tu sitio web a la pantalla de inicio de iOS, y 192x192 más 512x512 para el manifiesto de aplicación web que usan Android y las PWA instalables. Este generador produce todos ellos, además de 64 y 96 por si acaso.
¿Sigo necesitando un archivo favicon.ico?
Sí, todavía merece la pena incluir uno. Los navegadores antiguos, algunos lectores de feeds y varios rastreadores piden /favicon.ico en la raíz de tu sitio web aunque tu HTML declare otra cosa, y servirlo evita una avalancha de errores 404 en tus registros. El contenedor ICO que creamos agrupa los PNG de 16, 32 y 48 píxeles en un solo archivo, que todos los navegadores y la Vista previa de macOS leen correctamente.
¿Qué es un icono maskable?
Android puede recortar el icono de tu aplicación en forma de círculo, squircle o cuadrado redondeado según el lanzador. Un icono maskable mantiene todo su contenido importante dentro de una zona segura central, más o menos el 80 % del centro, para que no se corte nada esencial sea cual sea la forma que se aplique. El manifiesto que genera esta herramienta incluye entradas any y maskable por separado para los iconos de 192 y 512, de modo que los lanzadores que aplican máscara reciben una imagen recortable y todos los demás reciben la original intacta.
¿Qué imagen de origen funciona mejor?
Empieza con una imagen cuadrada de al menos 512x512 píxeles, preferiblemente un SVG o un PNG de alta resolución con fondo transparente. Las formas simples y de mucho contraste aguantan bien la reducción a 16 píxeles; los logotipos detallados y el texto fino se vuelven una mancha. Si tu logotipo es apaisado, recorta o redibuja una marca cuadrada en lugar de reducir todo el conjunto.
¿Se sube mi imagen a algún sitio?
No. Cada cambio de tamaño, el empaquetado del ICO y el ZIP se hacen en tu navegador con la API Canvas. Tu imagen nunca sale de tu dispositivo, así que puedes generar iconos con marcas aún sin publicar con total seguridad.
¿Cómo convierto un PNG o JPG en favicon.ico?
Suelta el PNG o JPG en el cuadro de arriba. La herramienta lo redimensiona a 16, 32 y 48 píxeles y los empaqueta en un único contenedor favicon.ico: un archivo ICO de verdad, no un PNG renombrado. Descarga solo el .ico, o el ZIP completo con todos los tamaños de PNG y el fragmento de HTML.
¿Qué formato de favicon es mejor: ICO, PNG o SVG?
Cubre las tres funciones en lugar de elegir una: un ICO para la petición heredada de /favicon.ico que siguen haciendo los clientes antiguos, PNG para las pestañas del navegador y los iconos táctiles, y opcionalmente un SVG para un escalado preparado para el futuro en los navegadores que lo admiten. Este generador cubre el conjunto ICO y PNG; si partiste de un SVG, puedes enlazar el original junto a ellos.
¿Puede un favicon tener fondo transparente?
Sí, en las pestañas del navegador: tanto PNG como ICO conservan el canal alfa, y la vista previa en damero de arriba muestra exactamente qué queda transparente. La excepción es el apple-touch-icon: iOS muestra la transparencia en negro, así que aplánalo sobre un color de fondo sólido, que es para lo que sirve aquí la opción de fondo.
¿Puedo usar un emoji o una letra como favicon?
Sí. Exporta o captura el glifo como PNG o SVG cuadrado (un carácter sobre un cuadrado redondeado de color es el patrón clásico) y suéltalo aquí. Los glifos simples y en negrita aguantan mucho mejor la reducción a 16 píxeles que las palabras o las ilustraciones detalladas.
¿Qué tamaño de favicon recomienda Google para los resultados de búsqueda?
Google Search Central pide un favicon cuyo tamaño sea múltiplo de 48x48 píxeles, servido desde una URL estable. Los archivos de 96x96 y 512x512 de este conjunto lo cumplen, así que no tienes que hacer nada más.
¿Cómo instalo los archivos generados?
Sube los archivos a la raíz de tu sitio web y pega después el fragmento de HTML generado en tu <head>. Si un icono antiguo se resiste, los navegadores guardan los favicons en caché de forma agresiva: fuerza una recarga, o cambia el nombre del archivo y actualiza el fragmento. Nuestro Generador de meta tags crea el resto del bloque head que va junto a este.
¿Puedo alojar en Static.app un sitio web con estos iconos?
Sí. Pon el contenido del ZIP en la carpeta de tu proyecto, súbelo a Static.app y tu sitio web estará online en un dominio personalizado con SSL. Como los iconos son archivos estáticos normales, no hay paso de compilación ni nada que configurar.