Generador de Favicon: crea tu favicon.ico e íconos desde cualquier imagen
Este generador de favicon convierte una imagen, o una letra o un emoji, en todos los íconos que necesita un sitio web en 2026: favicon.ico, favicon SVG, ícono de Apple y de Android, en un ZIP con el código HTML listo para pegar. Todo ocurre en tu navegador.
- 1. SubeSuelta un PNG, JPG, SVG o WebP, o escribe una o dos letras. Lo ideal son 512 × 512 píxeles o más.
- 2. AjustaDefine el margen, el color de fondo y el radio de esquinas, y revisa la vista previa en la pestaña y en el celular.
- 3. DescargaObtén un ZIP con favicon.ico, los íconos de Apple y Android, el manifiesto y el código HTML.
¿Qué es un favicon?
Un favicon es el ícono pequeño que representa un sitio web en las pestañas del navegador, los marcadores, el historial, los resultados de Google y la pantalla de inicio del celular. El nombre viene de «favorite icon» (ícono favorito), una idea que introdujo Internet Explorer 5 en 1999.
El favicon es un archivo aparte del logo. Tiene que leerse a 16 píxeles, por eso suele ser una letra, un símbolo o una versión simplificada de la marca. Google también lo muestra junto a tus páginas en los resultados, y explica sus requisitos en Define a favicon to show in search results. Este generador de favicon crea el juego de íconos para la web; los íconos de apps para App Store o Google Play siguen otras reglas y no forman parte de él.
Cómo crear un favicon desde PNG, JPG o SVG en 4 pasos
Para crear un favicon, sube una imagen cuadrada, ajusta el margen y el fondo, revisa la vista previa y descarga el ZIP. En ningún paso la imagen sale de tu computadora.
- Sube la imagen. Suelta un PNG, JPG, SVG o WebP en el campo Imagen, o cambia a Texto y escribe una o dos letras o un emoji. Una imagen cuadrada de 512 × 512 píxeles o más da el resultado más nítido.
- Ajusta el diseño. Elige Ajustar o Rellenar si la imagen no es cuadrada y define Margen, Fondo y Radio de esquinas. Transparente deja el fondo sin color.
- Revisa la vista previa. Las pestañas clara y oscura muestran el ícono real de 16 píxeles, el celular muestra el ícono de Apple y debajo aparecen todos los tamaños generados.
- Descarga. Descargar ZIP baja el juego completo con el código HTML; Descargar favicon.ico baja solo el archivo ICO.
Tamaño del favicon: qué archivos necesitas en 2026
Usa un favicon.ico de 32×32, un favicon SVG, un ícono de Apple de 180×180 y dos íconos PNG de 192×192 y 512×512 para Android. Parte de una imagen cuadrada de al menos 512×512 píxeles.
favicon.ico
Tamaño32×32 (con 16 y 48 dentro)
Dónde se usaNavegadores antiguos, peticiones a /favicon.ico, algunas herramientas
¿Obligatorio?Sí
favicon.svg
TamañoVectorial
Dónde se usaChrome, Firefox y Edge modernos; admite modo oscuro con CSS
¿Obligatorio?Recomendado
apple-touch-icon.png
Tamaño180×180
Dónde se usaPantalla de inicio de iPhone y iPad, Safari
¿Obligatorio?Sí
icon-192.png
Tamaño192×192
Dónde se usaPantalla de inicio de Android (manifiesto web)
¿Obligatorio?Sí, si tienes manifiesto
icon-512.png
Tamaño512×512
Dónde se usaPantalla de carga de Android, instalación como PWA
¿Obligatorio?Sí, si tienes manifiesto
Este es el juego mínimo recomendado. Las listas antiguas de 20 o 30 tamaños para mosaicos de Windows ya no hacen falta. El ZIP incluye además icon-maskable-512.png, una versión con más margen que Android puede recortar en círculo, y favicon.svg aparece cuando partes de un SVG o de texto.
Cómo poner un favicon en tu sitio web
Sube los archivos a la carpeta raíz del sitio y pega estas cuatro líneas en la sección head de cada página:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Copiar HTML te da el código exacto para tu juego de íconos. Si partes de un PNG o JPG, la línea del SVG no aparece porque no hay archivo SVG. Puedes pegar el fragmento en el Editor HTML para revisar el código antes de publicarlo.
En WordPress, entra en Apariencia → Personalizar → Identidad del sitio → Icono del sitio y sube el ícono de 512 × 512. WordPress crea sus propios tamaños y agrega las etiquetas por ti.
PNG a ICO: por qué favicon.ico sigue siendo necesario
Un archivo ICO es un contenedor que guarda varias imágenes PNG de distintos tamaños, así que un solo favicon.ico sirve a la vez para 16, 32 y 48 píxeles. Los navegadores siguen pidiendo /favicon.ico en la raíz del sitio de forma automática, aunque la página no tenga ninguna etiqueta.
Por eso un favicon solo en PNG no alcanza. El botón Descargar favicon.ico funciona como conversor de PNG a ICO: transforma tu PNG, JPG o SVG en un ICO real con varios tamaños, directamente en el navegador y sin programas extra.
Consejos de diseño para un favicon legible a 16 píxeles
El favicon se ve a 16 píxeles mucho más que en cualquier otro tamaño, así que diséñalo primero para ese tamaño.
- Quédate con un solo símbolo. Una letra, una inicial o una marca simple se lee mejor que el logo completo.
- Usa trazos de al menos 2 píxeles a 32 × 32. Las líneas más finas desaparecen.
- Limita el texto a uno o dos caracteres. Una palabra se convierte en una mancha.
- Pruébalo en pestañas claras y oscuras. La vista previa muestra las dos, así que comprueba que el ícono se vea.
- Elige el fondo a propósito. Un color sólido se lee en todas partes; la transparencia necesita una marca con buen contraste.
- Recorta los logos horizontales. Toma el símbolo o la primera letra en lugar de achicar todo el logo.
- Dale fondo sólido al ícono del iPhone. iOS rellena lo transparente con negro, por eso el generador siempre agrega fondo a apple-touch-icon.png.
Preguntas frecuentes sobre favicons
¿Qué es un favicon y para qué sirve?
Un favicon es el ícono pequeño de un sitio web que aparece en la pestaña del navegador, los marcadores, los resultados de Google y la pantalla del celular. Sirve para que la gente reconozca tu sitio entre muchas pestañas y resultados, y da una imagen más profesional que el ícono vacío por defecto.
¿Qué tamaño debe tener un favicon?
Usa un favicon.ico de 32×32 con los tamaños de 16 y 48 dentro, un favicon SVG, un ícono de Apple de 180×180 y dos PNG de 192×192 y 512×512. Parte de una imagen cuadrada de al menos 512×512 píxeles y deja que el generador de favicon cree los tamaños menores.
¿Qué es favicon.ico?
favicon.ico es el archivo clásico de favicon en formato ICO, que guarda varios tamaños de imagen en un solo archivo. Los navegadores lo buscan en /favicon.ico en la raíz de cada sitio, así que funciona como respaldo aunque la página no tenga etiqueta de favicon.
¿Cómo convertir PNG a ICO?
Suelta el PNG en este generador de favicon y pulsa Descargar favicon.ico. La herramienta crea un archivo ICO con versiones de 16, 32 y 48 píxeles dentro, directamente en tu navegador. El PNG nunca se sube y no hay límite de archivos para convertir.
¿Todavía hace falta favicon.ico en 2026?
Sí. Los navegadores modernos usan favicons SVG y PNG, pero muchas herramientas, lectores de feeds y navegadores antiguos siguen pidiendo /favicon.ico. Tener un ICO de 32×32 en la raíz ocupa unos pocos kilobytes y evita errores 404 en los registros del servidor.
¿Cómo poner un favicon en WordPress?
Entra en Apariencia → Personalizar → Identidad del sitio y sube como Icono del sitio una imagen cuadrada de al menos 512×512 píxeles. WordPress crea los tamaños y agrega las etiquetas. Si prefieres este juego completo, sube los archivos a la raíz y pega el HTML en la cabecera.
¿Por qué no se ve mi favicon?
Casi siempre el navegador muestra un ícono guardado en caché. Recarga la página con Ctrl+Shift+R o agrega una versión al nombre del archivo, como favicon.ico?v=2. Revisa también que la ruta del archivo sea correcta y que robots.txt no bloquee el favicon.
¿Cuánto tarda Google en mostrar mi favicon?
Puede tardar varios días o más. Google tiene que volver a rastrear tu página de inicio y el archivo del favicon antes de actualizar los resultados. Mantén el favicon en una URL estable, cuadrado y de al menos 48×48 píxeles, como indican las pautas de Google.
¿Puedo usar un favicon SVG?
Sí. Chrome, Firefox y Edge admiten favicons SVG, que se ven nítidos en cualquier tamaño y pueden adaptarse al modo oscuro con CSS dentro del archivo. Conserva también favicon.ico para los navegadores y herramientas que no leen SVG. Este generador de favicon crea favicon.svg desde archivos SVG y desde texto.
¿Puedo crear un favicon con texto o un emoji?
Sí. Cambia el origen a Texto y escribe una o dos letras o un emoji, luego elige la fuente, el color del texto y el fondo. El generador crea el mismo juego de archivos, incluido un favicon.svg vectorial de verdad que se ve nítido en cualquier tamaño.
¿Se suben mis imágenes?
No. El generador de favicon funciona por completo en tu navegador: la imagen se lee, se redimensiona y se empaqueta en el ZIP en tu dispositivo. Nada se envía a un servidor, así que puedes usarlo con logos de productos que todavía no se lanzaron o con trabajos de clientes.
Otras herramientas de Ideluma
El Generador de Favicon es una de las herramientas gratuitas de Ideluma. Busca un nombre para tu marca con el Generador de marcas o prueba tu etiqueta head en el Editor HTML.
Elevate your design process with AI-driven creativity.