Generador de favicon
Crea de una vez favicon.ico, PNG de cada tamaño e iconos para iPhone y Android a partir de un texto, un emoji o tu logo.
1. Escribe un texto o elige una imagen
Escribe los caracteres (también emojis) del icono o elige una imagen, como tu logo.
Crear desde
Hasta 3 caracteres. El icono se ve muy pequeño, así que lo mejor son 1 o 2 caracteres.
Fuente
2. Elige forma y color
Elige la forma y el color del fondo, y el tamaño del contenido. La vista previa cambia al instante.
Forma
Color de fondo
Solo el icono de la pantalla de inicio del iPhone (apple-touch-icon) se rellena con el color de fondo elegido arriba, porque ahí las zonas transparentes se ven negras.
Color del texto
Colores en modo oscuro
Solo cambia favicon.svg. En automático, el brillo se invierte solo si un color se vería mal en una pantalla oscura.
3. Revisa y guarda
Comprueba cómo se ve en la pestaña del navegador y en la pantalla de inicio, y guárdalo todo en un solo ZIP.
Escribe un texto para ver aquí la vista previa
En la pestaña del navegador (claro y oscuro)
Se guarda en site.webmanifest como el nombre que aparece al añadir el sitio a la pantalla de inicio.
Añade 64, 128 y 256 px, que se usan cuando el icono se muestra grande, por ejemplo en accesos directos del escritorio de Windows. El archivo pesa más.
HTML para tu sitio
Coloca los archivos del ZIP en la raíz (/) de tu sitio y pega este HTML dentro de <head>.
Ver HTML
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Archivos del ZIP
- favicon.ico (16 / 32 / 48)
- favicon.svg
- favicon-16x16.png
- favicon-32x32.png
- apple-touch-icon.png
- android-chrome-192x192.png
- android-chrome-512x512.png
- site.webmanifest
- favicon-html.txt
Todo ocurre en este dispositivo. Tus imágenes nunca se suben.
¿Te resultó útil? Nos encantaría que lo compartieras
¿Algo no funciona o tienes una idea para mejorarlo?
Cómo se usa
1. Escribe el texto
Con «Texto» seleccionado, toca el campo «Texto del icono» y escribe de 1 a 3 caracteres. También admite emojis. El estilo de letra se elige justo debajo, en «Fuente».
Con «Texto» seleccionado en el panel izquierdo, haz clic en el campo «Texto del icono» y escribe de 1 a 3 caracteres. También admite emojis. La vista previa del panel derecho cambia al instante. El estilo de letra se elige justo debajo, en «Fuente».
2. Elige forma y color
Toca «Elegir forma y color en pantalla completa» para abrir el editor. En la barra de abajo, toca «Círculo» en la pestaña «Forma» y luego una muestra de color de fondo en la pestaña «Color». La vista previa del centro muestra al instante cómo se ve en pantallas claras y oscuras.
En la sección «Elige forma y color», haz clic en «Círculo» en «Forma» y luego en una muestra de color en «Color de fondo». La vista previa del panel derecho muestra al instante cómo se ve en pantallas claras y oscuras y en la pestaña del navegador. Con «Editar en pantalla completa», sobre la vista previa, eliges viendo una vista previa grande.
3. Crear desde una imagen
Para usar una imagen, como un logo, toca «Imagen» arriba y elígela con «Elegir archivos». Se abre el editor en pantalla completa y la imagen entera cabe en el icono. Si quieres que llegue hasta los bordes, toca «Rellenar» en «Ajuste», en la barra de abajo.
Para usar una imagen, como un logo, haz clic en «Imagen» arriba del panel izquierdo y arrastra y suelta la imagen (o usa «Elegir archivos»). La imagen entera cabe en el icono. Si quieres que llegue hasta los bordes, haz clic en «Rellenar» en «Ajuste», dentro de «Elige forma y color».
4. Guardar todo de una vez
En la sección «Revisa y guarda», toca «Descargar todo en ZIP» para guardar todos los archivos en un solo ZIP. El HTML para tu sitio se copia justo debajo con «Copiar HTML».
Haz clic en «Descargar todo en ZIP» en el panel derecho para guardar favicon.ico, favicon.svg, los PNG de cada tamaño y site.webmanifest en un solo ZIP. El HTML para tu sitio se copia justo debajo con «Copiar HTML».
Ideal para
Un icono al momento para tu web
Crea en segundos, a partir de una letra o un emoji, el icono que aparece en la pestaña de tu blog, web personal o aplicación web. Sin programas de diseño.
Quienes crean su propia web
Todos los tamaños a la vez
Crea de una vez favicon.ico, PNG de 16/32 px e iconos para iPhone y Android, todo reunido en un ZIP. Sin exportar cada tamaño a mano.
Diseñadores y desarrolladores web
Desde el logo de tu tienda o empresa
Solo elige tu logo y se ajusta al tamaño adecuado para pestañas y pantalla de inicio. Los fondos transparentes se conservan tal cual.
Tiendas y pequeñas empresas
Para páginas de práctica en HTML
El HTML listo para pegar muestra qué archivo va en cada sitio. Útil para páginas hechas en clase o para practicar.
Estudiantes de programación y docentes
Conviene saber antes de empezar
- Los textos finos o las fotos quedan ilegibles a 16 px. Lo mejor es un símbolo claro o 1 o 2 caracteres.
- No crea imágenes de mosaico de Windows. Los navegadores y móviles actuales muestran sin problema los archivos de esta herramienta.
- Si quieres recortar antes el margen alrededor de un logo, usa «Recortar imágenes».
Qué archivos y tamaños necesita un favicon
El favicon es el icono del sitio que aparece en las pestañas del navegador, los marcadores, los resultados de búsqueda y la pantalla de inicio del móvil. Cada lugar usa un tamaño distinto, así que normalmente se preparan varios archivos a partir de una misma imagen. Esta herramienta crea todo lo que necesitan los navegadores y móviles actuales, junto con el HTML para pegar en tu sitio.
favicon.ico es un formato que guarda tres tamaños (16, 32 y 48 px) en un solo archivo y se muestra también en navegadores antiguos y accesos directos de Windows. El icono de la pantalla de inicio del iPhone (apple-touch-icon) no admite transparencia y es el propio iPhone el que redondea las esquinas, por eso esta herramienta lo crea cuadrado y con el fondo relleno. favicon.svg puede cambiar de color según el modo oscuro, y Chrome, Firefox y Edge lo usan en las pestañas.
Preguntas frecuentes
Las dudas más habituales al crear y colocar un favicon.
¿Se envían mis imágenes a algún sitio?
No. Desde cargar la imagen hasta dibujar los iconos y crear el ZIP, todo ocurre en el navegador de este dispositivo. Las imágenes que eliges y el texto que escribes no se envían a ningún sitio.
¿Qué tipo de imagen funciona mejor?
Imágenes cuadradas y de formas claras. A 16 px el icono es diminuto, así que los textos finos y las fotos quedan ilegibles. Usa solo el símbolo de tu logo o crea un icono de 1 o 2 caracteres con «Texto». Para imágenes apaisadas, elige «Imagen completa» o «Rellenar» en «Ajuste».
¿Puedo crear un favicon con un emoji?
Sí. Escribe un emoji en «Texto del icono» y se convierte en un icono. El diseño del emoji depende del dispositivo que uses (iPhone, Android, Windows, etc.).
¿Dónde coloco los archivos?
Descomprime el ZIP y coloca todos los archivos en la raíz de tu sitio (donde se abriría https://example.com/favicon.ico). Después copia el «HTML para tu sitio» y pégalo dentro de <head> en cada página.
¿Basta con favicon.ico?
Para la pestaña del navegador, favicon.ico basta. Si además quieres un icono nítido cuando se añada el sitio a la pantalla de inicio del móvil, sube todos los archivos del ZIP y pega el HTML.
¿Puede ser transparente el fondo?
Sí. Activa «Fondo transparente» y el fondo y todo lo que queda fuera de la forma serán transparentes. La excepción es el icono de la pantalla de inicio del iPhone (apple-touch-icon.png): ahí las zonas transparentes se ven negras, así que se rellena con el color elegido en «Color de fondo».
¿Sirve para WordPress?
Sí. En WordPress, ve a «Apariencia» → «Personalizar» → «Identidad del sitio» y, en «Icono del sitio», elige android-chrome-512x512.png del ZIP (WordPress necesita una imagen de al menos 512 px).
He cambiado el favicon, pero sigue saliendo el antiguo
Los navegadores pueden guardar los favicons en caché durante mucho tiempo. Si recargar la página no basta, borra la caché del navegador o vuelve a comprobarlo pasado un rato.
¿Puedo crear favicons SVG?
Sí. El ZIP incluye favicon.svg. En modo oscuro cambia a los colores de «Colores en modo oscuro» (en automático, el brillo solo se invierte en colores poco visibles). El texto se incrusta como imagen con la fuente elegida y el SVG solo pinta su color.
¿Es gratis?
Sí, es gratis. Sin registro y sin anuncios. No hay límite de iconos.
Más herramientas
- Generador de códigos QR
Crea códigos QR a partir de enlaces, textos o datos de Wi-Fi, con la forma, los colores, el icono central o la foto que elijas.
- Convertir imágenes a WebP
Convierte PNG o JPEG a WebP, un formato más ligero que mantiene buena calidad.
- Convertir imágenes a PNG
Convierte JPEG o WebP a PNG, un formato que no pierde calidad.
- Convertir imágenes a JPG
Convierte PNG o WebP a JPG (JPEG), un formato que se abre en cualquier sitio.
- Convertir HEIC a WebP
Convierte las fotos HEIC del iPhone a WebP, un formato más ligero y fácil de usar.
- Convertir HEIC a PNG
Convierte las fotos HEIC del iPhone a PNG, que se abre en cualquier sitio, sin perder calidad.