Generador de iconos de sitio: de un prompt a todos los tamaños de favicon
Un icono de sitio supera tres exámenes a la vez: 16 píxeles en una pestaña del navegador, un múltiplo de 48 píxeles en los resultados móviles de Google y 180 píxeles en la pantalla de inicio del iPhone. Describe el símbolo una vez y el generador de iconos de sitio lo convierte en cada tamaño de favicon, exportado desde un máster de 1024px.
Ejemplos de iconos de sitio y favicons
Marcas generadas para sitios y apps web reales, en estilos plano, lineal, cristal y minimalista que se mantienen nítidos de 512 px a la pestaña de 16 px.
Pule tu icono de sitio en un lienzo infinito
Un favicon vive a 16 px y los detalles lo deciden todo. Genera en el lienzo, ramifica variantes, recorta fondos en un clic y comprueba cada candidata contra tamaños reales de pestaña antes de exportar el set completo.
Árbol de linaje visual (Visual Lineage)
Rastrea iteraciones de prompts y variantes remix con curvas Bézier para comparar iluminación, textura y ramas de color una al lado de otra.
Postprocesamiento integrado (Post-Processing)
Recorte instantáneo de fondo en 1 clic con relleno de color preciso para cumplir la exigencia de no transparencia de Apple App Store.
Protección de zona segura (Safe Zone)
Guías de relleno interior ajustables que evitan que esquinas agresivas del sistema recorten elementos clave de la ilustración.
Ejemplos de prompts para iconos de sitio
Copia cualquiera de estos en el generador de iconos de sitio y cambia las palabras de sujeto, estilo y color por las tuyas. Un buen prompt de icono de sitio dice tres cosas: el sujeto, el estilo y la paleta, y el hecho de que el símbolo debe leerse a 16 píxeles.
Lettermark minimalista
Minimal site icon for a developer blog, one bold letter P centered on a dark slate square, white mark with high contrast, readable at 16 px, flat style, no fine detail, no text besides the letter
Marca de tienda cercana
Site icon for a plant shop, simple monstera leaf glyph centered, deep green on a cream background, soft rounded shapes, flat minimalist style, crisp edges that survive tiny sizes
Favicon glassy para SaaS
Glassy site icon for a SaaS dashboard, abstract cube mark with a subtle highlight, blue gradient background, single clear silhouette, thick shapes, nothing that breaks below 32 px
Cómo crear un icono de sitio en 3 pasos
De una frase a un set completo de favicons: el generador de iconos de sitio se encarga de los tamaños, sin abrir ningún editor de imágenes.
- 1
Describe el símbolo
Resume sujeto, estilo y colores en una frase, como "a flat compass mark, navy on white, site icon for a travel planner". Cuanto más simple sea la forma descrita, más cerca estará la IA de la silueta limpia que necesita un favicon.
- 2
Genera el máster de 1024 y compruébalo pequeño
Genera a 1024x1024 y revisa el resultado a 16 y 32 px antes de decidir. La pestaña es donde vive el icono; un símbolo que solo funciona en grande fracasa ahí.
- 3
Exporta el set completo de favicons
Exporta en una sola pasada el ICO multiTamaño, el icono Apple touch de 180px, los PNG de 192 y 512 del manifiesto y el WEBP moderno; luego súbelos o guárdalos en tu repositorio.
Tamaños y formatos del icono de sitio, en una sola tabla
Navegadores, Apple, Android y Google Search buscan archivos distintos, y un generador de iconos de sitio tiene que entregarlos todos. Estos son los números vigentes.
| Superficie | Qué entregas | Reglas de formato | Dónde aparece |
|---|---|---|---|
| Pestaña del navegador | PNG de 16x16 y 32x32 px | Cuadrado; un solo glifo con contraste fuerte, porque es la superficie más pequeña que tu icono llenará jamás | Barra de pestañas y título de ventana; Chrome usa 16 px en pantallas estándar y 32 px en HiDPI |
| favicon.ico clásico | Un ICO multitramaño con 16, 32 y 48 px | Colocado en /favicon.ico de la raíz, para que lo encuentren también las herramientas que no leen etiquetas link | Navegadores antiguos, lectores y rastreadores que piden el archivo raíz directamente |
| Resultados de Google | Archivo cuadrado, con lado múltiplo de 48 px: 48, 96, 144 o 192 px | PNG, ICO, GIF, JPEG o SVG; debe poder rastrearse, declararse en el head de la portada y representar visualmente el sitio | Junto a los nombres de sitio en resultados móviles; los iconos que incumplen reglas de tamaño o marca se retiran |
| Apple touch icon | PNG de 180x180 px | Cuadrado completo sin transparencia; iOS redondea las esquinas y lo deja tal cual en la pantalla de inicio | Accesos directos de iOS y marcadores de favoritos |
| Manifiesto web (PWA) | PNG de 192x192 y 512x512 px | Declarados en el manifiesto web; mantén el contenido dentro del área segura enmascarable porque Android recorta a su propia forma | Avisos de instalación de Android, iconos de inicio y pantallas de carga |
| Icono SVG | Un SVG cuadrado de cualquier tamaño | Escala nítido en cualquier superficie y puede llevar una variante prefers-color-scheme para temas oscuros | Firefox, Chrome y Safari actuales lo sustituyen por el favicon de mapa de bits cuando se declara |
Tamaños según las directrices de favicon de Google y el comportamiento actual de los navegadores, revisados en septiembre de 2026.
Describe el símbolo, previsualízalo a tamaño de pestaña y exporta de una pasada los archivos ICO, Apple touch, manifiesto y WEBP de la tabla de arriba.
Abrir el generador de iconos de sitioUn máster, todas las superficies
Cada superficie de la tabla lee un archivo distinto del mismo máster. Los sitios programados a mano los conectan con tres etiquetas de head como máximo: <link rel="icon">, <link rel="apple-touch-icon"> y un enlace al manifiesto. ¿Ya tienes un logo? El redimensionador de iconos de app gratuito lo corta en el set completo.
La pestaña de 16px
La superficie más difícil que llena un icono de sitio. El máster de 1024px se reduce 64 veces y los logos con detalle acaban hechos papilla. Los símbolos que sobreviven tienen un motivo, dos colores como máximo y trazos visibles cuando falta la mitad de los píxeles.
El respaldo favicon.ico
Un formato de 1996 sobre el que sigue corriendo parte de la web. Navegadores que ignoran cada etiqueta link y rastreadores que nunca leen tu head siguen pidiendo /favicon.ico en la raíz. Un ICO multitamaño allí es el seguro de compatibilidad más barato.
La regla de 48px de Google
Los resultados móviles muestran favicons junto a los nombres de sitio, pero solo los que pasan las directrices: cuadrado, lado múltiplo de 48px, declarado en la portada, rastreable y representativo de la marca. Los sitios que solo servían 32px vieron desaparecer el suyo.
Subidas al CMS, sin código
WordPress llama favicon al icono del sitio: sube un cuadrado de 512x512 en Identidad del sitio y él recorta los tamaños menores. Squarespace, Wix y Shopify guardan un campo de favicon en sus ajustes y aceptan el export de 512px sin cambios.
Dónde aparece realmente un icono de sitio
La pestaña del navegador es el lugar más obvio, pero el mismo archivo viaja más lejos: barras de marcadores y listas de lectura, páginas de historial, la rejilla de más visitados de las nuevas pestañas, los resultados móviles de Google sobre la URL, los accesos directos de iOS y Android y el conmutador de tareas de una PWA instalada. Cada superficie recorta y reduce el icono a su manera; por eso existe la tabla de arriba. Un símbolo que aguanta a 16 px en la pestaña aguanta en todas partes. Al revés, no.
Tres maneras de conseguir un icono de sitio
Un generador de iconos de sitio y un conversor de favicons resuelven mitades distintas del problema: los conversores reducen un arte que ya tienes; los generadores de IA crean primero ese arte.
| Generador de IA | Conversor de favicons | Diseñador | |
|---|---|---|---|
| Punto de partida | Un prompt de texto o una imagen de referencia | Un logo cuadrado terminado que subes | Un brief y varias rondas de revisión |
| Qué obtienes | Símbolos originales creados para tu encargo | Tu arte existente cortado en archivos de favicon | Arte original, ajustado a mano |
| Legibilidad a 16 px | Regenera hasta que el símbolo sobreviva a la barra de pestañas | Tan fuerte como el logo con el que empieces | Fuerte, si hay tiempo de iteración |
| Export completo | ICO multitramaño, Apple touch, PNG de manifiesto y WEBP desde un máster | Justamente lo que hacen la mayoría de conversores | Según lo que diga el contrato |
| Tiempo hasta publicar | Menos de un minuto por concepto | Minutos | Días por ronda |
| Coste | Créditos gratis para empezar, luego créditos por lote | Gratis | Cientos por proyecto |
Comparación de flujos de trabajo típicos, verificada en septiembre de 2026.
Lo que el generador hace por ti
Todo lo que el generador de iconos de sitio hace entre el primer prompt y los archivos listos para un repositorio o un campo de CMS.
Un máster de 1024px
Genera en alta resolución una sola vez; cada tamaño de favicon se reduce desde ahí sin emborronarse a 16 px.
Exportes listos para favicon
ICO multitramaño, icono Apple touch de 180px y PNG de 192/512 del manifiesto, sin abrir un editor de imágenes.
PNG, ICO y WEBP
Entrega el formato que pida cada plataforma, incluido un WEBP moderno y ligero.
Fondo transparente o sólido
PNG transparentes para sitios con cabecera propia, y rellenos sólidos que aguantan cualquier color de pestaña y tema oscuro.
Variantes e historial
Regenera direcciones sobre el mismo concepto y conserva cada versión hasta que el set salga.
Referencia de marca
Sube un logo existente para guiar paleta y lenguaje de formas, y que el favicon encaje con el resto del sistema de marca.
Estilos de icono de sitio que sobreviven a 16 píxeles
El estilo decide cuánto diseño queda tras reducir a tamaño de pestaña; prueba dos o tres direcciones en el generador de iconos de sitio. Los símbolos planos y minimalistas aguantan mejor porque nada depende de degradados ni líneas finas. Los presets glassy funcionan mientras la silueta siga siendo una sola y gruesa. Los estilos 3D lucen en tamaños Apple touch y manifiesto y resultan aceptables en pestañas si el contorno es claro. El pixel art convierte el lienzo diminuto en la estética misma. Compáralos a escala de icono en la galería de estilos: las páginas de minimalista, 3D y glassy muestran cada estilo sobre símbolos reales.
Diseñar un icono de sitio que sobreviva a la barra de pestañas
Casi todos los problemas de favicon nacen de diseñar con el zoom equivocado, y cuatro hábitos los evitan casi todos. Compón alrededor de un solo motivo: dos formas compitiendo a 16 px son ruido. Limita la paleta a dos o tres colores: el antialiasing borra los contrastes sutiles más rápido de lo que el ojo cree. Prueba en tema de navegador claro y oscuro: una pestaña oscura se traga los símbolos oscuros. Y renuncia a las palabras: una letra cabe a 16 px; una palabra, nunca. Previsualiza a tamaño de pestaña antes de decidir, no después de exportar.
Dónde encaja este flujo
Un máster del generador de iconos de sitio, exportado a cada superficie que muestra un cuadrado pequeño junto al nombre de tu sitio.
Iconos de sitio de WordPress
Sube el export de 512x512 en Identidad del sitio; los tamaños menores y las etiquetas link los genera WordPress solo.
Squarespace, Wix y Shopify
Cada plataforma tiene un campo de favicon o icono de navegador en los ajustes, y todos aceptan el export de 512 px sin cambios.
Sitios programados a mano
Deja los archivos exportados en la raíz, añade las etiquetas link una vez, y quedan cubiertos navegadores, resultados de búsqueda y accesos directos.
PWAs y apps web
Los export enmascarables de 192 y 512 van directos al manifiesto web mientras el mismo máster alimenta el icono de pestaña.
Estudios y trabajo para clientes
Conserva el historial por proyecto, regenera el set completo cuando el cliente cambie de marca y entrega sets coherentes para cada propiedad.
Proyectos paralelos y portafolios
Créditos gratis para empezar, un prompt para un set completo de favicon, y el icono de pestaña se publica esa misma tarde.
Herramientas relacionadas
Blog
Seguir leyendo
Lecturas más largas sobre diseño de iconos, tamaños y flujos de trabajo.
Preguntas frecuentes sobre iconos de sitio
Tamaños, formatos, subidas al CMS y las preguntas que la gente hace de verdad sobre favicons.
¿Qué tamaño debe tener un icono de sitio?
Diseña a 1024x1024 y exporta hacia abajo: 16 y 32 px para pestañas del navegador, un cuadrado múltiplo de 48 px para los resultados de Google, 180x180 para el Apple touch icon y 192 más 512 px para el manifiesto web. El generador de iconos de sitio exporta todos desde el máster de 1024, porque cada tamaño es una reducción limpia.
¿Cómo añado un icono de sitio a mi web?
Sube los archivos a la raíz del sitio y decláralos en el head de la portada: una etiqueta <link rel="icon"> hacia el ICO, SVG o PNG, una <link rel="apple-touch-icon"> hacia el archivo de 180 px y un enlace al manifiesto si publicas tamaños PWA. En WordPress, Squarespace, Wix o Shopify basta con subir el icono en los ajustes del sitio; la plataforma escribe todas las etiquetas por ti.
¿Por qué mi favicon no sale en los resultados de Google?
Google solo muestra favicons que cumplen sus directrices: archivo cuadrado con lado múltiplo de 48 px, declarado en el head de la portada, alojado en una URL estable y rastreable, no bloqueado por robots.txt y representativo del sitio. Un icono de solo 32 px no cumple la regla de tamaño. Tras corregir el archivo, el cambio llega cuando Google vuelva a rastrear, lo que puede tardar unos días.
Icono de sitio, favicon o icono de app: ¿en qué se diferencian?
Favicon e icono de sitio son dos nombres para lo mismo: el cuadrado pequeño que representa a la web en pestañas, marcadores y resultados de búsqueda. Icono de sitio es simplemente como lo llama WordPress. El icono de app es el recurso mayor de pantalla de inicio y tiendas, con sus propias normas; lo cubre la guía del icono de aplicación móvil.
¿Puede un favicon tener fondo transparente?
Sí, y los export PNG o ICO transparentes son la opción por defecto en webs hechas a mano. Comprueba el símbolo en un tema oscuro antes de publicar: los símbolos oscuros desaparecen sobre pestañas oscuras. Para el Apple touch icon, usa arte opaco; iOS rellena la transparencia de negro.
ICO, PNG o SVG: ¿qué formato debo usar?
El set mínimo actual son tres archivos: un ICO multitramaño en /favicon.ico como respaldo, un SVG cuadrado para navegadores modernos y un PNG de 180x180 para dispositivos Apple. Si la web se instala como PWA, añade PNG de 192 y 512 px al manifiesto. Todo lo demás es redundancia.
¿Cómo cambio el icono del sitio en WordPress?
Ve a Apariencia → Personalizar → Identidad del sitio y sube una imagen cuadrada de al menos 512x512 px; WordPress la recorta y genera todos los tamaños menores y las etiquetas link automáticamente. Genera el archivo de 512 px en la herramienta de arriba, súbelo y, al caducar la caché, el icono de pestaña se actualizará.
¿De quién son los iconos que genero?
Tuyos. Conservas todos los derechos comerciales sobre cada icono que crees, según los términos del servicio; incluye favicons publicados en webs de clientes y comerciales.
Publica un icono de sitio que sobreviva a la barra de pestañas
Describe el símbolo una vez, deja que el generador de iconos de sitio exporte todos los tamaños en una pasada y actualiza la web esa misma tarde.