Convierte tu logo en favicon.ico y en un juego completo de iconos

Última revisión del contenido:2026-09-07

Sube tu logo en PNG, JPG o SVG. La herramienta arma con él un archivo favicon.ico que lleva tres tamaños dentro, más cinco iconos PNG por separado. Los archivos se crean en tu navegador y de ahí pasan directamente a tu disco: los descargas juntos o de uno en uno.

Vista previa y archivos de favicon

Añada una imagen a la izquierda para generar favicon.ico y un conjunto de iconos PNG conforme a las directrices actuales.

favicon.ico

ICO 16x16 + 32x32 + 48x48

Por generar

favicon-16x16.png

PNG 16x16

Por generar

favicon-32x32.png

PNG 32x32

Por generar

apple-touch-icon.png

PNG 180x180

Por generar

android-chrome-192x192.png

PNG 192x192

Por generar

android-chrome-512x512.png

PNG 512x512

Por generar

Esta herramienta funciona en una pantalla más grande

Para usar esta herramienta cómodamente, ábrala en un portátil, ordenador de escritorio o tableta en modo horizontal.

Consejo

Si usa una tableta, gírela a modo horizontal: cuando el ancho de la ventana sea suficiente, la herramienta se cargará automáticamente.

¿Qué es un favicon y qué es un apple-touch-icon?

El favicon es el icono del sitio que el navegador dibuja en la pestaña, junto al título de la página, en la barra de marcadores y en el historial. La definición enciclopédica lo describe como el icono que aparece delante de la dirección en la barra de direcciones o en la pestaña de una página abierta [1]. En la pestaña dispone de un lado de poco más de una decena de píxeles, es decir, menos espacio del que ocupa una sola letra de esta frase.

El apple-touch-icon es esa misma imagen preparada para el iPhone y el iPad. Llega a la pantalla de inicio cuando alguien guarda tu sitio como acceso directo. Su lado mide 180 píxeles, porque el sistema lo dibuja en un tamaño cercano al de una aplicación normal.

Los dos iconos más grandes del juego, de 192 y 512 píxeles, sirven a las aplicaciones web. Android recurre a ellos al crear un acceso directo y durante la instalación, y los encuentra a través del archivo de manifiesto, es decir, el documento donde el sitio declara su nombre, sus colores y precisamente esa lista de iconos [2].

¿Cómo hacer un favicon a partir de tu propio logo?

Sube tu logo en el campo Añadir imagen base, pulsa Generar favicon y descarga seis archivos: favicon.ico y los iconos PNG con lados de 16, 32, 180, 192 y 512 píxeles. La imagen la procesa el navegador en tu propio equipo y los archivos terminados los guardas directamente en el disco.

El archivo favicon.ico es algo más que una sola imagen. El formato ICO es un contenedor para varias versiones de la misma imagen, y el generador mete tres dentro: 16, 32 y 48 píxeles. El navegador o el sistema elige del archivo el tamaño que encaja con el lugar donde va a dibujar el icono. La pestaña del navegador toma el más pequeño y el acceso directo del escritorio, uno mayor.

Los nombres de archivo coinciden con lo que buscan las plantillas de sitios web y las documentaciones: favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png y android-chrome-512x512.png. Súbelos al servidor tal como salen del generador.

¿Qué archivos obtienes y dónde aparece cada uno?

El generador crea siempre el juego completo. Abajo tienes el tamaño de cada archivo y el lugar donde lo ve realmente quien visita tu sitio.

Nombre del archivo	Tamaño	Dónde aparece
favicon.ico	16, 32 y 48 px en un archivo	Pestaña del navegador, barra de marcadores, acceso directo del escritorio
favicon-16x16.png	16 × 16 px	Pestaña del navegador en una pantalla de densidad normal
favicon-32x32.png	32 × 32 px	Pestaña del navegador en una pantalla de densidad alta
apple-touch-icon.png	180 × 180 px	Pantalla de inicio del iPhone y del iPad
android-chrome-192x192.png	192 × 192 px	Acceso directo en la pantalla de inicio de Android
android-chrome-512x512.png	512 × 512 px	Pantalla de arranque e instalación de la aplicación web

¿Qué tamaño de icono piden Google, Apple, Android y WordPress?

Cada uno de estos lugares lee el icono con sus propias reglas. Un solo juego del generador los cubre todos a la vez.

Dónde aparece el icono	Lado necesario	Formato del archivo
Resultados de búsqueda de Google	Al menos 8 px, recomendado por encima de 48 px	ICO, PNG, JPEG, GIF, BMP, TIFF o PPM
Pestaña del navegador	16 px, en pantallas densas 32 px	ICO o PNG
Pantalla de inicio del iPhone y del iPad	180 px	PNG
Acceso directo en la pantalla de inicio de Android	192 px	PNG
Instalación de la aplicación web	512 px	PNG
Icono del sitio en WordPress	Al menos 512 px	PNG o JPG

Los requisitos de Google para el favicon, incluida la forma cuadrada y la lista de formatos, están en la documentación del buscador [3]. El umbral de 512 píxeles para el icono del sitio lo indica la documentación de WordPress [4].

¿Dónde se declara cada archivo descargado?

Cuatro archivos los escribes en la sección head de la página y los dos más grandes los indicas en el archivo de manifiesto.

Archivo del generador	Lugar de la declaración	Atributo rel
favicon.ico	Sección head de la página	icon
favicon-16x16.png	Sección head de la página	icon
favicon-32x32.png	Sección head de la página	icon
apple-touch-icon.png	Sección head de la página	apple-touch-icon
android-chrome-192x192.png	Archivo de manifiesto, lista icons	Declaración en el manifiesto
android-chrome-512x512.png	Archivo de manifiesto, lista icons	Declaración en el manifiesto

Los valores del atributo rel con los que Google reconoce un favicon son icon, apple-touch-icon y apple-touch-icon-precomposed [3]. Las líneas de código listas para copiar están más abajo, en la pestaña HTML.

¿Cómo se usa el generador de favicon?

Tres pasos te separan de un juego completo de iconos en el disco:

1. Añade la imagen base
Arrastra el archivo al campo Añadir imagen base o púlsalo y elige la imagen desde tu disco. La herramienta acepta PNG, JPG/JPEG y SVG, y debajo del campo muestra el nombre y el peso del archivo elegido.
2. Define el fondo
El generador arranca con el fondo blanco. Al marcar Fondo transparente (PNG/ICO) el área alrededor de tu marca queda vacía, y tu propio tono lo eliges con el selector que hay junto a Color de fondo.
3. Genera y descarga
Pulsa Generar favicon. Al momento aparecen en la columna derecha seis archivos con su peso y un tamaño total encima. El botón Descargar guarda el juego entero, y cada fila tiene su propio botón Descargar.

Fondo transparente (PNG/ICO)

Color de fondo:

Fondo del icono: ¿transparente o de color?

El blanco funciona como ajuste de partida

Al abrir la página el selector está en blanco, y ese color reciben los seis iconos. Encaja con logos en tonos oscuros y con cualquier caso en el que el icono deba verse igual sobre una barra de pestañas clara y sobre una oscura.

Fondo transparente (PNG/ICO)

Al marcar esta casilla el área alrededor de tu marca queda vacía, y el selector de color pasa a estar inactivo. Elígela si tu logo tiene forma propia — un círculo, un anagrama, una letra — y quieres que adopte el color del fondo sobre el que se apoya.

Un color propio de tu identidad

El selector admite cualquier tono, también el de tu manual de marca. Si necesitas el valor exacto de una imagen que ya tienes, sácalo con el extractor de colores de imagen y pégalo aquí.

¿Qué imagen de origen da el mejor resultado?

El icono más pequeño del juego tiene un lado de 16 píxeles, así que lo que subas decide casi todo el resultado.

Apuesta por una forma sencilla y un signo fuerte
Con un lado de 16 píxeles siguen leyéndose los anagramas, las letras sueltas y los símbolos compactos. En los carteles de señalización actúa el mismo mecanismo: el pictograma transmite su contenido con unos pocos trazos, porque tiene que funcionar a distancia y a escala pequeña.
Sube el logo en formato SVG
El archivo SVG describe las formas mediante curvas y figuras geométricas, así que el generador dibuja cada tamaño a partir de la descripción completa. En nuestra medición el borde de un círculo en el icono de 512 píxeles salió limpio: en una línea que pasa por su centro no cayó ni un solo píxel de tono intermedio. El mismo archivo sirve más allá de los iconos: un mapa de bits de esa marca para una presentación o una firma de correo sale del convertidor de SVG a PNG.
Elige un archivo con un lado de 512 píxeles como mínimo
Ese es el lado del icono más grande del juego. Con un archivo de mapa de bits de ese tamaño, cada icono menor sale de una reducción, y eso conserva la nitidez de los bordes.
Sube una imagen con cualquier proporción
La herramienta la encaja entera dentro del cuadrado: la escala hasta el lado más largo, la centra y rellena las franjas libres con el fondo elegido. Toma un logo horizontal de 400 × 100 píxeles. En el icono de 64 píxeles de lado sale de ahí una banda de 16 píxeles de alto, con fondo por encima y por debajo. Si prefieres que la marca llene todo el cuadrado, recorta antes el logo a un cuadrado en el editor de imágenes y súbelo aquí después.
Escoge un contraste que aguante los dos temas
El icono se apoya unas veces sobre una barra de pestañas clara y otras sobre una oscura. Los tonos que se distinguen con claridad tanto del blanco como del negro mantienen la legibilidad en ambos casos.
Deja margen en los bordes para Android
Android puede recortar el icono a un círculo o a un cuadrado de esquinas redondeadas. La especificación garantiza la visibilidad dentro de un círculo con un radio de dos quintas partes del lado más corto, medido desde el centro [2], así que un signo centrado supera cualquiera de esos recortes.
Empieza por PNG si tu logo está en otro formato
El campo Añadir imagen base trabaja con archivos PNG, JPG/JPEG y SVG. Una marca guardada de otra manera solo necesita una pasada previa por un convertidor. Una foto del iPhone la abre el convertidor de HEIC a PNG. Una imagen sacada de una web pasa por el convertidor de WEBP a PNG o por el convertidor de AVIF a PNG. Un logotipo entregado en el manual de marca como PDF sale del convertidor de PDF a PNG.

¿Basta un archivo SVG por sí solo como icono del sitio?

Hoy el icono en formato SVG funciona en los navegadores de ordenador: Chrome y Edge lo leen desde la versión 80 y Firefox desde la 41. En el iPhone y el iPad lo hace Safari desde la versión 26 [5]. Por eso el SVG rinde mejor como complemento del juego, junto a los archivos ICO y PNG.

Google lee el favicon de los resultados de búsqueda a partir de archivos ICO, PNG, JPEG, GIF, BMP, TIFF y PPM [3]. El juego de este generador entra dos veces en esa lista: una con favicon.ico y otra con los iconos PNG. Si ya tienes tu propio archivo SVG, déjalo en la sección head junto a ellos y así cada uno de estos lugares encontrará un formato que sepa leer.

¿Dónde se suben los archivos generados?

Cuatro caminos, según lo que haya debajo de tu sitio:

WordPress
En el WordPress actual el icono se define en el escritorio, en Ajustes › Generales. El campo se llama allí Icono del sitio. Los temas clásicos ofrecen además esa misma opción en el personalizador, en la sección de identidad del sitio.
Sube ahí el archivo android-chrome-512x512.png. La documentación pide una imagen cuadrada de 512 píxeles como mínimo [4], y las versiones menores las prepara WordPress por su cuenta.
¿Prefieres controlar cada archivo? Sube el juego entero por FTP al directorio raíz del sitio y escribe los enlaces tal como muestra la tarjeta HTML.
Shopify
En el panel de la tienda entra en Online Store, busca tu tema y pulsa Editar tema. Dentro de Configuración del tema abre la sección del logotipo y, en ella, el campo Favicon.
Shopify da 32 × 32 píxeles como tamaño recomendado y reduce a esa medida las imágenes mayores [6]. Sube por tanto android-chrome-512x512.png: te deja margen de calidad para las pantallas de densidad alta.
HTML
Copia los archivos al directorio raíz del sitio, es decir, donde está index.html. Los navegadores consultan la dirección /favicon.ico por su cuenta, y los demás iconos los encuentran por los enlaces de la sección <head>:
```
<link rel="icon" href="/favicon.ico" sizes="32x32">
<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
```
Los dos iconos más grandes los indicas en el archivo de manifiesto, en la lista icons, junto con sus dimensiones y el tipo image/png.
El icono también se puede incrustar directamente en el código como una cadena de caracteres: la prepara el convertidor de imagen a Base64. En páginas de un solo archivo y en prototipos resulta cómodo; deja al lado un archivo normal en /favicon.ico, porque es el que busca el robot de Google [3].
Next.js
Next.js con App Router reconoce los iconos por el nombre del archivo y añade él mismo los enlaces a la sección head [7]:
- app/favicon.ico — solo en el directorio app/ y solo con la extensión .ico
- app/icon.png — el icono PNG; con ese nombre funcionan también .jpg y .svg, y las variantes siguientes se numeran como icon1.png, icon2.png
- app/apple-icon.png — el equivalente del archivo apple-touch-icon.png; ese nombre admite .png, .jpg y .jpeg
Los iconos de 192 y 512 píxeles se quedan en el directorio public/ y se indican desde el manifiesto. También puedes describir el juego entero en layout.tsx, en el objeto metadata.icons.

¿Cómo se comporta el favicon en los resultados de Google?

Google muestra el icono del sitio junto a su nombre en los resultados, tanto en el móvil como en el ordenador. Para descargarlo necesita acceso a dos cosas: el Googlebot de imágenes tiene que poder rastrear el propio archivo del icono, y el Googlebot normal, la página de inicio [3]. Deja por tanto el directorio del icono fuera de las reglas de bloqueo del archivo robots.txt.

Después de cambiar el archivo hay que tener algo de paciencia: la documentación dice claramente que volver a rastrearlo lleva de varios días a varias semanas [3]. Google señala además que la aparición del favicon en los resultados no está garantizada aunque se cumplan todas las directrices.

El icono en sí pertenece a la capa de presentación del resultado, y así lo describe la documentación del buscador. Donde sí actúa de verdad es en el reconocimiento: en la columna de resultados y entre una docena de pestañas abiertas suele ser el único elemento de color por el que alguien distingue tu sitio de los demás.

Fuentes

Favicon — Wikipedia
Web Application Manifest — W3C
Definir un icono de página para mostrarlo en los resultados de la Búsqueda — Centro de la Búsqueda de Google
Customizer — Identidad del sitio — WordPress
SVG favicons — Can I use
Configuración del tema — imagen del favicon — Centro de ayuda de Shopify
favicon, icon y apple-icon — Next.js

Todos los valores de las tablas se calcularon a partir de las definiciones de las unidades y se comprobaron aritméticamente antes de publicarlos. Los datos históricos y los nombres de las unidades locales proceden de las fuentes indicadas arriba.

Última revisión del contenido: 7 de septiembre de 2026 · redactado y verificado por el equipo de Arteon

Preguntas frecuentes sobre el generador de favicon

¿Cuántos archivos le bastan a una web de empresa corriente?

Tres: favicon.ico, favicon-32x32.png y apple-touch-icon.png. El primero cubre la pestaña del navegador y los resultados de búsqueda, el segundo las pantallas de densidad alta y el tercero la pantalla de inicio del iPhone. Los dos iconos más grandes entran en juego en el momento en que quieras ofrecer el sitio como aplicación web.

¿El favicon tiene que ser cuadrado?

Google exige una proporción de 1:1 [3], y WordPress también espera un cuadrado para el icono del sitio [4]. El generador se encarga de eso por ti: una imagen de cualquier proporción se encaja entera en el cuadrado y se completa con el fondo elegido, así que los seis archivos salen cuadrados.

¿Por qué el navegador sigue mostrando el icono antiguo?

El navegador guarda los iconos en la memoria caché durante más tiempo que el resto de la página. Abre la dirección del propio archivo, por ejemplo /favicon.ico, y recárgala saltándote la caché con Ctrl + F5. También puedes añadir un número de versión al enlace, por ejemplo /favicon.ico?v=2: para el navegador esa es una dirección nueva.

¿El favicon influye en la posición del sitio en Google?

La documentación del buscador describe el favicon como parte del aspecto del resultado [3]. Su influencia en la posición es indirecta y tiene que ver con la rapidez con la que alguien reconoce tu marca en la columna de resultados.

¿Qué hay exactamente dentro del favicon.ico de este generador?

Tres imágenes del mismo diseño: 16 × 16, 32 × 32 y 48 × 48 píxeles, cada una guardada como PNG dentro del contenedor ICO. El navegador y el sistema eligen la versión que encaja con el lugar donde dibujan el icono.

¿Qué es un icono maskable y qué zona suya es segura?

Es un icono preparado para las máscaras del sistema de Android, que lo recorta a un círculo, a un cuadrado de esquinas redondeadas o a una gota. La especificación del manifiesto garantiza la visibilidad dentro de un círculo con un radio de dos quintas partes del lado más corto, medido desde el centro de la imagen [2]. Un signo colocado en esa zona supera cualquier forma de máscara.

¿Dónde hay que poner en el servidor los archivos descargados?

En el directorio raíz del sitio, junto al archivo de inicio. Los navegadores consultan la dirección /favicon.ico por su cuenta, incluso sin un enlace en el código, y los demás iconos los encuentran por las líneas de la sección head que aparecen arriba, en la pestaña HTML.

¿Puedo descargar un solo archivo del juego?

Sí. Cada fila de la lista de resultados tiene su propio botón Descargar, así que guardas un icono suelto cuando en tu sitio solo actualizas un tamaño. El botón Descargar que hay encima de la lista guarda todo el juego de una vez.

¿Qué imágenes acepta el generador y qué pasa con mi archivo?

El campo Añadir imagen base acepta archivos PNG, JPG/JPEG y SVG. Todo el trabajo ocurre en tu navegador: la imagen se carga en la memoria de la pestaña, allí se crean todos los iconos y de ahí pasan al disco. El botón Borrar quita la imagen y los resultados al instante, y cerrar la pestaña hace lo mismo.

Ayúdanos a mejorar nuestras herramientas

¿Tienes una idea para una función nueva, has encontrado un error o quieres proponer otra herramienta que te facilite el trabajo? Escríbenos: respondemos en 24 horas.