Generador de favicon
Convierte letras, iniciales o una imagen local en favicon.ico, iconos PNG, un site.webmanifest y el fragmento HTML que necesita tu web, todo en tu navegador.
Contenido del icono
Vista previa y descargas
Fragmento de enlaces HTML
<link rel="icon" href="/favicon.ico" sizes="any">
<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">
Qué hace un generador de favicon
Un favicon es el icono pequeño que el navegador muestra en la pestaña, en los marcadores y en el historial. Servir los archivos correctos importa más que el dibujo: si la página no declara ningún icono, el navegador pide /favicon.ico en la raíz del sitio, y los móviles y tablets necesitan un PNG y un manifest para añadir la web a la pantalla de inicio.
Este generador dibuja el icono con canvas en tu navegador, así que el logo de un cliente o tus iniciales no se suben a ningún sitio. Escribe favicon.ico con fotogramas de 16, 32 y 48 px, seis tamaños PNG, un site.webmanifest y las cinco etiquetas link que hacen falta, todo junto en un ZIP o archivo a archivo.
Cómo generar un favicon
- Elige el origen: escribe de uno a cuatro caracteres para un icono de texto o suelta un logo local en PNG, JPG, WebP o SVG.
- Ajusta la tipografía, el tamaño de letra, los colores, la forma y el margen, o el ajuste de la imagen, y mira cómo cambia la vista previa de la pestaña.
- Compara la vista previa de 16 px con la de 512 px. Si el tamaño pequeño se ve sucio, usa menos caracteres, formas más gruesas o más contraste.
- Pulsa Descargar .zip, coloca los archivos en la raíz del sitio y pega el fragmento HTML en el head. Debajo de la vista previa tienes el ico, los PNG, el manifest y el fragmento por separado.
Ejemplos de favicon
Iniciales sobre loseta redondeada
AK, sans, tamaño de letra 58%, blanco sobre verde azulado, redondeado, margen 8%
favicon.ico con fotogramas de 16/32/48 px, seis PNG y un manifest con color de tema #0f766e
Logo local como icono de app
logo.png, encajar dentro, fondo transparente, círculo
Los PNG conservan las esquinas transparentes y favicon.ico empaqueta los tres fotogramas pequeños
Una letra, un color
U, tipografía display, tamaño de letra 85%, cuadrado, sin margen
Una loseta compacta que sigue leyéndose a 16 px
UrsaKit frente a otros generadores de favicon
| Aspecto | UrsaKit | realfavicongenerator.net | favicon.io | favicomatic.com |
|---|---|---|---|---|
| Precio | Gratis, sin registro | Gratis con extras de pago | Gratis, sin registro | Gratis |
| Dónde se genera | Tu navegador | Su servidor | Tu navegador en modo texto | Su servidor |
| Sube tu logo | No | Sí | Solo en modo imagen | Sí |
| Modo texto o iniciales | Sí | No | Sí | No |
| Fotogramas del ico | 16, 32, 48 | 16, 32, 48 | 16, 32, 48 | Lista seleccionable |
| Archivos extra | PNG, manifest, fragmento HTML | HTML y guías por plataforma | PNG y manifest | PNG y losetas Metro |
| Descarga en paquete | Un ZIP | Un ZIP | Un ZIP | Un ZIP |
Preguntas frecuentes
¿Este generador de favicon es gratis?
Sí. Los modos de texto e imagen, todos los tamaños y el paquete ZIP son gratis, sin cuenta y sin marca de agua.
¿Se sube mi logo a un servidor?
No. Los iconos de texto se dibujan con canvas y las imágenes se leen con FileReader, así que todo se queda en tu navegador y el ZIP se monta en local.
¿Qué tamaños necesito de verdad?
favicon.ico con fotogramas de 16, 32 y 48 px cubre los navegadores. Añade favicon-32x32.png y favicon-16x16.png para navegadores modernos, apple-touch-icon.png de 180 px para iOS y 192 y 512 px para el manifest.
¿Hacen falta el ICO y los PNG?
Es la combinación más segura. Los navegadores que siguen pidiendo /favicon.ico obtienen un icono, y los PNG con el manifest dan a Android e iOS un icono nítido en la pantalla de inicio.
¿Cómo instalo los archivos?
Coloca favicon.ico y los PNG en la raíz del sitio, junto a index.html, y pega las cinco etiquetas link en el head. El fragmento que aparece bajo la vista previa se copia tal cual.
¿Puedo usar mi propio logo en lugar de letras?
Sí. Cambia el origen a Imagen, elige un PNG, JPG, WebP o SVG de hasta 5 MB y escoge Encajar dentro o Rellenar y recortar.