Generador de Favicon, Iconos y Manifiesto PWA
Genere archivos binarios favicon.ico (16x16, 32x32, 48x48), iconos Apple Touch para iOS, iconos Android PWA con zona segura del 80% y site.webmanifest.
Herramientas en LíneaZona Segura de Icono Enmascarable PWA y Geometría
Un 20%+ mantiene tu logotipo dentro del Círculo de Zona Segura del 80% en Android
Panel de Vista Previa Multiplataforma en Tiempo Real
Simulación simultánea para Resultados de Google Search (SERP), Pestañas de Navegador, iOS y Máscaras Adaptativas Android
Comprueba cómo muestra Google Search tu favicon circular de 48×48 px junto a la ruta del dominio en móviles y ordenadores.
Comprueba cómo muestra Google Search tu favicon circular de 48×48 px junto a la ruta del dominio en móviles y ordenadores.
La transparencia se respalda automáticamente con tu color sólido para evitar que iOS convierta el canal alfa en negro puro.
Metadatos del Manifiesto de Aplicación Web (site.webmanifest)
<!-- Standard Favicon & Google Search (48x48 multiple) -->
<link rel="icon" href="/favicon.ico" sizes="48x48" />
<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="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
<!-- Apple iOS Home Screen -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<!-- Android & PWA Web App Manifest -->
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#4f46e5" />Tabla Oficial de Tamaños de Favicon, Apple Touch Icon y Manifiesto PWA
Especificación técnica completa según Google Search Central, Apple iOS Human Interface Guidelines y W3C Web App Manifest
| Nombre de Archivo | Resolución (px) | Estándar de Codificación | Plataforma de Destino y Contexto | Regla de Cumplimiento Técnico |
|---|---|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Contenedor Binario Microsoft ICONDIR | Navegadores Clásicos y Rastreador de Google Search | Debe incluir obligatoriamente una capa binaria real de 48×48 px; nunca renombres un archivo PNG a .ico. |
| favicon-16x16.png | 16×16 px | PNG RGBA de 32 bits | Pestañas de Navegador de Escritorio (1x) y Marcadores | Silueta de alto contraste para conservar la legibilidad a 16 píxeles. |
| favicon-32x32.png | 32×32 px | PNG RGBA de 32 bits | Pestañas de Navegador en Pantallas Retina (2x HiDPI) | Icono principal de pestaña en monitores modernos de alta densidad. |
| favicon-48x48.png | 48×48 px | PNG RGBA de 32 bits | Resultados de Búsqueda de Google (SERP) Móvil y Escritorio | Mínimo exigido por Google Search Central (múltiplo exacto de 48 px: 48×48, 96×96, 144×144). |
| favicon-96x96.png | 96×96 px | PNG RGBA de 32 bits | Resultados Google SERP de Alta Densidad y Accesos Directos | Múltiplo 2x de 48 px recomendado para un recorte circular nítido en el buscador. |
| apple-touch-icon.png | 180×180 px | PNG Opaco de 24 bits | Pantalla de Inicio de Apple iPhone y iPad (Web Clips) | Requiere fondo opaco; iOS convierte cualquier píxel transparente en negro sólido (#000000). |
| android-chrome-192x192.png | 192×192 px | PNG 32 bits (purpose: any) | Lanzador de Pantalla de Inicio y Cajón de Apps Android | Requisito indispensable en las auditorías de instalabilidad PWA de Google Lighthouse. |
| android-chrome-512x512.png | 512×512 px | PNG 32 bits (purpose: any) | Pantalla de Carga (Splash Screen) Android PWA y WebAPK | Activo maestro de alta resolución obligatorio para generar la pantalla de bienvenida. |
| maskable-icon-512x512.png | 512×512 px | PNG Opaco (purpose: maskable) | Formas Adaptativas de Android (Círculo, Squircle, Gota) | El logotipo debe situarse dentro del círculo central seguro del 80% (mínimo 20% de margen interno). |
Debe incluir obligatoriamente una capa binaria real de 48×48 px; nunca renombres un archivo PNG a .ico.
Silueta de alto contraste para conservar la legibilidad a 16 píxeles.
Icono principal de pestaña en monitores modernos de alta densidad.
Mínimo exigido por Google Search Central (múltiplo exacto de 48 px: 48×48, 96×96, 144×144).
Múltiplo 2x de 48 px recomendado para un recorte circular nítido en el buscador.
Requiere fondo opaco; iOS convierte cualquier píxel transparente en negro sólido (#000000).
Requisito indispensable en las auditorías de instalabilidad PWA de Google Lighthouse.
Activo maestro de alta resolución obligatorio para generar la pantalla de bienvenida.
El logotipo debe situarse dentro del círculo central seguro del 80% (mínimo 20% de margen interno).
Cómo Generar e Instalar Favicons, Iconos iOS y Manifiestos PWA
Flujo de trabajo en 5 pasos para cumplir con Google Search Central y las normas de aplicaciones web progresivas
Elige tu Fuente Gráfica en el Estudio 3 en 1
Sube un archivo SVG o PNG existente, diseña un monograma de 1 a 3 letras con tipografía personalizada o selecciona un emoji vectorial.
Audita el Contraste en Modo Oscuro y el Margen Seguro
Revisa el detector automático de invisibilidad en pestañas oscuras y ajusta el control de margen interno (20%+ para Android Maskable) dentro del círculo del 80%.
Comprueba las 4 Vistas Previas Multiplataforma en Vivo
Inspecciona en tiempo real cómo luce tu icono en Google SERP (móvil y escritorio), pestañas claras y oscuras, el squircle 180×180 de iOS y las máscaras de Android.
Personaliza el Manifiesto Web y Descarga el Paquete ZIP
Define el nombre de tu aplicación y los colores de tema; luego pulsa Descargar Paquete Completo de Iconos (.ZIP) para obtener los 10 archivos listos para producción.
Extrae los Archivos en tu Raíz Pública y Pega el Código
Coloca los archivos en la carpeta public/ de tu servidor y copia en un clic las etiquetas HTML5 <head> o el objeto Metadata nativo para Next.js App Router.
Codificación Binaria 100% en el Navegador y Privacidad Total de Marca
Todo el escalado en lienzo HTML5, el empaquetado binario de cabeceras ICONDIR, la auditoría de luminancia de píxeles y la compresión ZIP se ejecutan localmente en la memoria RAM de tu dispositivo. Tus logotipos nunca se envían a ningún servidor externo.
Preguntas Frecuentes sobre Favicons, Apple Touch Icon y PWA
Respuestas técnicas sobre indexación en Google Search, archivos binarios .ICO e iconos enmascarables
Q:¿Por qué Safari en macOS e iOS muestra a veces una letra genérica dentro de un cuadro de color en lugar de mi icono?
Safari es especialmente estricto con la resolución y la opacidad de los iconos. Si falta el archivo apple-touch-icon.png de 180×180 píxeles o si el servidor devuelve un tipo MIME incorrecto, Safari genera automáticamente un bloque con la inicial del dominio. Al incluir el paquete completo y las etiquetas HTML5 generadas arriba, Safari cargará siempre tu diseño real.
Q:¿Cómo logra el archivo favicon.ico guardar tres resoluciones distintas ocupando tan pocos kilobytes?
A diferencia de los antiguos archivos .ico de los años noventa que guardaban mapas de bits BMP sin comprimir, la especificación moderna permite encapsular flujos PNG comprimidos de 16×16, 32×32 y 48×48 dentro de la tabla binaria ICONDIRENTRY. Así obtienes nitidez en 32 bits con canal alfa manteniendo un peso mínimo.
Q:¿De qué manera influye el favicon circular de 48×48 píxeles en el porcentaje de clics (CTR) en Google?
En los resultados de búsqueda móvil y de escritorio, el icono de 48×48 px aparece justo al lado del nombre de tu sitio y de la ruta URL. Un logotipo nítido y con buen contraste capta la atención visual antes que el título azul, diferenciando tu dominio de los competidores que aún muestran el globo gris por defecto.
Q:¿Qué diferencia práctica hay entre las formas Círculo, Squircle, Gota y Cuadrado Redondeado en Android?
Cada fabricante de teléfonos Android permite al usuario elegir la máscara visual de su pantalla de inicio. Nuestro selector interactivo simula exactamente ese recorte sobre el lienzo de 512×512 px para que compruebes que ninguna esquina ni letra de tu logotipo quede mutilada en ningún modelo.
Q:¿En qué carpeta debo colocar los 10 archivos descargados si utilizo WordPress, Astro, Vite o Next.js?
En frameworks modernos como Next.js, Astro o Vite, basta con descomprimir los 10 archivos directamente dentro de la carpeta public/ en la raíz del proyecto. Si trabajas con WordPress o un servidor estático tradicional (Apache/Nginx), súbelos al directorio raíz público (public_html o /var/www/html) para que /favicon.ico sea accesible en la ruta principal.
¿Qué es Generador de Favicon, Iconos y Manifiesto PWA?
Pocas cosas restan tanta credibilidad a un proyecto web recién publicado como ver ese globo gris genérico junto a tu dominio en Google o descubrir que tu logotipo se ve pixelado y cortado al guardarlo en la pantalla del móvil. En el desarrollo web actual, un único icono ya no sirve para todo: el rastreador de Google exige múltiplos exactos de 48×48 píxeles, las pantallas Retina de ordenador demandan capas nítidas de 32×32 px, Safari en iPhone convierte cualquier transparencia en un bloque negro si no usas un lienzo opaco de 180×180 px, y los teléfonos Android recortan el perímetro exterior de las aplicaciones web progresivas (PWA) con formas variables. El Generador de Favicon, Iconos y Manifiesto PWA resuelve todo este proceso de una sola vez y 100% dentro de tu navegador mediante las APIs nativas HTML5 <canvas>, ArrayBuffer y DataView.
Caso Práctico: Renovación Visual de un Medio Digital con Lectura Offline en PWA
Un diario digital que acababa de lanzar su aplicación web progresiva para lectura sin conexión detectó tres problemas reportados por sus lectores: el clásico monograma negro de estilo editorial (con una luminancia relativa de apenas 9,5%) desaparecía por completo cuando el usuario activaba el modo oscuro en Chrome o Safari; al añadir el periódico al inicio del iPhone aparecían dos franjas negras a los lados; y en móviles Android con máscara en forma de gota se cortaba el remate inferior de las letras. Utilizando la pestaña de monogramas del estudio superior, el equipo diseñó sus iniciales sobre un fondo sólido Rosa Carmesí (#E11D48) con un 23% de margen interno seguro, descargando en el acto un paquete ZIP de tan solo 17,8 KB con los 10 archivos listos para producción.
Auditoría de Activos Gráficos para Portal Editorial y PWA (17,8 KB en Total)
| Archivo de Salida | Escala y Peso | Arquitectura Interna | Garantía de Visualización |
|---|---|---|---|
| favicon.ico | 16, 32, 48 px (4,1 KB) | Cabecera ICONDIR de 54 bytes + 3 vistas | Compatibilidad universal y rastreo inmediato por Googlebot |
| favicon-48x48.png & 96x96.png | 48² & 96² px (2,9 KB) | PNG RGBA 32 bits (densidad 1x y 2x) | Máxima nitidez en el círculo de resultados móviles de Google |
| apple-touch-icon.png | 180×180 px (4,5 KB) | Lienzo opaco 24 bits sin canal alfa | Elimina los bordes negros al guardar la web en iPhone y iPad |
| maskable-icon-512x512.png | 512×512 px (6,3 KB) | Círculo central 80% + 23% margen | Logotipo intacto bajo máscaras de gota, círculo o squircle |
Por Qué Este Estudio Binario Supera a los Convertidores Tradicionales
- Empaquetado Binario
ICONDIRAuténtico: Construimos el archivofavicon.icobyte por byte uniendo las capas de 16×16, 32×32 y 48×48 píxeles, evitando el error común de cambiar únicamente la extensión de un PNG. - Detector de Invisibilidad en Pestañas Oscuras y Claras: Analiza la luminancia perceptual de tu gráfico y te avisa al instante si el icono corre peligro de perderse contra el fondo del navegador.
- Código Listo para Copiar y Pegar: Obtén las etiquetas HTML5
<head>, la configuración tipada para Next.js App Router y el archivosite.webmanifesten un solo clic.
Historia y Origen
El origen del favicon se remonta a marzo de 1999, cuando Microsoft lanzó Internet Explorer 5 e incorporó una función que buscaba un archivo llamado favicon.ico en la raíz del servidor cada vez que alguien guardaba una página en su carpeta de «Favoritos». Al principio ni siquiera se mostraba en las pestañas normales, sino solo al marcar el sitio como favorito, lo que convirtió las peticiones a ese archivo en el primer medidor estadístico de marcadores de la historia de Internet. En 2007, la llegada del primer Apple iPhone revolucionó el diseño móvil al introducir apple-touch-icon.png, permitiendo que cualquier sitio web luciera en la pantalla de inicio con la misma calidad visual que una aplicación nativa. Años más tarde, el consorcio W3C consolidó el Manifiesto de Aplicaciones Web (site.webmanifest) y el estándar de iconos enmascarables (Maskable Icons) en Android, completando el ecosistema multiplataforma actual.