Generador de favicon.

Crea todos los iconos que necesita una web o una aplicación web a partir de una o dos letras o de tu propio logo: favicon.ico, el icono táctil de Apple, iconos de Android y maskable, un manifiesto web y las etiquetas para tu HTML o Next.js, además de un favicon SVG si tu logo es SVG. Mira cómo quedan en una pestaña del navegador y en las pantallas de inicio de iPhone y Android, y descárgalos todos en un ZIP. Funciona en tu navegador, así que tus imágenes nunca se suben.

Crearlo a partir de

LetrasImagen

LetrasFuente

Forma

CuadradaRedondeadaCírculo

FondoColor de las letras

Colores de nuestros sistemas de diseño

Nombre de la app

favicon.ico, apple-touch-icon.png, Android 192 y 512, un icono maskable, site.webmanifest y head.html.

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#2F6FEB">

Funciona en tu navegador. Nada de lo que añadas aquí se sube ni se guarda.

Cómo crear un favicon

Elige a partir de qué crearlo.
- Letras: escribe una o dos letras, elige una fuente y una forma (cuadrada, redondeada o círculo) y define el color del fondo y de las letras. Para empezar con una paleta que funciona, haz clic en uno de los colores de nuestros sistemas de diseño.
- Imagen: añade tu logo en PNG, JPG, WebP o SVG y ajusta el margen a su alrededor. Puedes dejar el favicon con fondo transparente.
Revisa las vistas previas: una pestaña del navegador en modo claro y oscuro, la pantalla de inicio de un iPhone y la de Android con su máscara redonda.
Descarga todos los iconos en un único archivo ZIP.
Pon los archivos en la carpeta raíz de tu sitio (public/ en la mayoría de proyectos) y copia en tu proyecto las etiquetas HTML o los metadatos de Next.js que muestra la página.

Qué hay en el ZIP

Archivo	Dónde se usa
`favicon.ico` (16, 32 y 48 píxeles)	Pestañas, marcadores y navegadores antiguos
`favicon.svg`	Pestañas nítidas en navegadores modernos; solo si subes un logo SVG
`apple-touch-icon.png` (180 píxeles)	El icono al añadir tu sitio a la pantalla de inicio de un iPhone o iPad
`android-chrome-192x192.png` y `512x512.png`	Pantallas de inicio de Android y el aviso de instalación de apps web
`maskable-icon-512x512.png`	Iconos de Android que se recortan en círculo u otra forma
`site.webmanifest` y `head.html`	El nombre, los colores y los iconos de tu app, y las etiquetas que los enlazan

El icono maskable mantiene tus letras o tu logo dentro del 80 % central de la imagen, la zona segura que Android nunca recorta. Los iconos de Apple y Android siempre llevan un fondo sólido, porque las pantallas de inicio no muestran bien la transparencia.

Añade los iconos con Codex

Pon los archivos descargados en tu proyecto y pídele a Codex que los conecte:

Añadir los archivos del favicon

He puesto nuevos archivos de favicon en [public/]: favicon.ico, favicon.svg (si lo hay), apple-touch-icon.png, los iconos de Android y maskable y site.webmanifest. Elimina los archivos antiguos de favicon e iconos, añade las etiquetas de head.html a [el layout raíz], cambia el nombre de la app en site.webmanifest a [el nombre de tu app] y comprueba que no quede ninguna otra referencia a iconos.

Si usas el App Router de Next.js, copia el código de metadata y viewport de la herramienta en lugar de las etiquetas HTML.

Preguntas frecuentes

¿El generador de favicon es gratis?

Sí. Sin registro, sin marca de agua y sin límite.

¿Se suben mis imágenes?

No. Tu navegador dibuja cada icono y crea el ZIP en tu dispositivo. El sitio solo cuenta que se usó la herramienta, nunca lo que pusiste.

¿Qué tamaños de favicon necesito?

Para casi cualquier sitio: favicon.ico con 16, 32 y 48 píxeles, un icono táctil de Apple de 180 píxeles e iconos de 192 y 512 píxeles en un manifiesto web. Es justo lo que trae el ZIP. Si tu logo es SVG, el ZIP también incluye un favicon SVG, que se ve nítido en navegadores modernos.

¿Por qué sigue apareciendo mi favicon antiguo?

Los navegadores guardan los favicons en caché durante mucho tiempo. Comprueba que los archivos antiguos ya no están en tu proyecto y abre el sitio en una ventana privada o borra la caché del navegador para ver el nuevo.