Herramientas Web

Generador de favicon

Sube tu logo o escribe unas letras y obtén el paquete completo: favicon.ico, íconos PNG para navegadores, iPhone y Android, manifiesto web y el código HTML para pegar. Todo se genera en tu navegador.

Se procesa en tu dispositivo. No se sube nada.

Crear el favicon desde

Arrastra tu logo o imagen aquíToca para elegir tu archivo

o haz clic para elegir · pega con Ctrl+VPNG, JPG, SVG, WebP, GIF, AVIF, HEIC y más · hasta 50 MB

Paso a paso

Cómo se usa

  1. Elige de dónde sale tu favicon: una imagen o SVG, unas letras o un emoji.
  2. Ajusta el fondo, la forma (cuadrada, redondeada o círculo) y el margen mientras ves cómo queda en una pestaña, en el iPhone y en Android.
  3. Toca «Generar y descargar ZIP». Recibes todos los archivos y las instrucciones.
  4. Sube los archivos a la carpeta raíz de tu sitio y pega el código que aparece en el resultado dentro de la etiqueta head.
FAQ

Preguntas frecuentes

¿Se suben mis imágenes a algún servidor?

No. El favicon se dibuja y se empaqueta dentro de tu navegador, en tu propio dispositivo. Tu logo nunca sale de él.

¿Qué archivos incluye el ZIP?

favicon.ico (con 16, 32 y 48 px), favicon-16x16.png, favicon-32x32.png, favicon-96x96.png, apple-touch-icon.png (180 px), android-chrome-192x192.png y android-chrome-512x512.png, los íconos adaptables de Android si los activas, site.webmanifest, favicon.svg cuando es posible y un archivo de instrucciones con el código HTML.

¿Qué tamaño debe tener mi imagen?

Lo ideal es una imagen cuadrada de 512 × 512 px o más, o un SVG. Con una imagen más chica los íconos grandes se ven borrosos. Si no es cuadrada, se ajusta dentro del cuadrado o, si lo prefieres, se recorta para llenarlo.

¿Puedo usar un emoji o unas letras como favicon?

Sí. Escribe una o dos letras (por ejemplo, tus iniciales) o pega un emoji, elige un color de fondo y listo. El emoji se dibuja con las fuentes de tu dispositivo, así que su aspecto puede variar entre sistemas.

¿Qué es el ícono adaptable (maskable) de Android?

Android recorta los íconos de las aplicaciones web con distintas formas (círculo, cuadrado redondeado). La versión adaptable ocupa todo el lienzo y deja tu diseño dentro de una zona segura para que no se corte. Es opcional y se activa en las opciones avanzadas.

Puse el favicon nuevo y no cambia. ¿Qué hago?

Los navegadores guardan el favicon durante mucho tiempo. Prueba con una ventana privada, borra la caché o abre la dirección del archivo (por ejemplo, tusitio.com/favicon.ico) y recarga con Ctrl + F5.

Qué necesita hoy un sitio web

  • favicon.ico en la raíz: lo piden buscadores, lectores de feeds y navegadores antiguos.
  • PNG de 32 y 16 px: la pestaña del navegador en pantallas normales y de alta densidad.
  • apple-touch-icon de 180 px: el ícono que aparece cuando alguien guarda tu sitio en la pantalla de inicio del iPhone.
  • Íconos de 192 y 512 px con un manifiesto web: para Android y para instalar tu sitio como aplicación.
  • Un SVG: nítido en cualquier tamaño y compatible con el modo oscuro si lo diseñas para eso.

Consejos para un favicon que se lea a 16 píxeles

A ese tamaño no caben los detalles. Usa una forma simple, colores con buen contraste y, si partes de un logo con texto, quédate solo con el símbolo o las iniciales. Deja poco margen: cuanto más grande sea la figura dentro del cuadrado, más se distingue en la pestaña.

Google recomienda que el favicon sea un múltiplo de 48 píxeles y que se pueda rastrear desde tu página de inicio. El paquete incluye el .ico con 48 px y el PNG de 96 px por esa razón.

Actualizada el 29 de septiembre de 2026