Generador de favicon
Crea un favicon con letras, un emoji o una imagen: favicon.ico multitamaño, PNG de 16 a 512 px, Apple touch icon, web manifest y las etiquetas link HTML. En tu navegador.
Hasta 3 caracteres, p. ej. «A», «AK» o «🚀».
¿Qué es Generador de favicon?
Genera un conjunto completo de favicons para tu web a partir de letras o un emoji (con tus colores y forma) o de una imagen. Obtienes un favicon.ico multitamaño (16, 32 y 48 px), iconos PNG de 16, 32, 48, 180 (Apple touch icon), 192 y 512 px, un site.webmanifest y las etiquetas HTML <link> para pegar en tu <head>.
Cómo usar Generador de favicon
- Elige el Origen: Texto o emoji, o Imagen (funciona mejor una imagen cuadrada).
- Configura la Forma, el Fondo y el Color del texto, y el Nombre de la app (para el manifest).
- Haz clic en Descargar favicon.ico y descarga desde las vistas previas los archivos PNG que necesites.
- Copia el HTML para el <head> y el site.webmanifest, y pon todos los archivos en la carpeta raíz de tu sitio.
Ejemplo
Texto "A", redondeado, fondo #4f46e5
<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">
Además de favicon.ico (16, 32 y 48 px) y seis archivos PNG.
Cuándo usar Generador de favicon
Úsalo para webs nuevas, proyectos personales, herramientas internas y sitios de documentación. Si tienes un logotipo detallado, diseña versiones simplificadas para 16 y 32 px, porque los detalles finos desaparecen a esos tamaños. Usa además un favicon SVG si quieres un icono nítido que se adapte al modo oscuro.
Cómo funciona Generador de favicon
Cada tamaño se dibuja en un canvas aparte: la forma se rellena con el color de fondo y hasta tres caracteres se centran y escalan al tamaño del icono, o la imagen se recorta al centro en un cuadrado y se redimensiona con suavizado de alta calidad. Cada canvas se exporta como PNG. El archivo .ico se monta byte a byte: una cabecera ICONDIR de 6 bytes, una entrada de directorio de 16 bytes por tamaño (ancho, alto, 32 bpp, tamaño de los datos y desplazamiento) y las imágenes PNG incrustadas a continuación: el formato PNG dentro de ICO que admiten todos los navegadores actuales y Windows Vista y posteriores. El Apple touch icon de 180 px siempre es cuadrado y opaco, porque iOS redondea las esquinas por su cuenta.
Casos de Uso Comunes
- Crear en segundos un favicon con una letra o un emoji para un proyecto personal
- Generar todos los tamaños de icono a partir de un logotipo cuadrado
- Añadir un Apple touch icon y un web manifest para instalar en la pantalla de inicio
- Producir un favicon.ico multitamaño real para navegadores antiguos
Preguntas Frecuentes
¿Sigo necesitando favicon.ico?
Los navegadores piden /favicon.ico automáticamente, y algunas herramientas y lectores RSS solo buscan ahí, así que sigue valiendo la pena incluirlo junto a los iconos PNG.
¿Por qué no se actualiza mi favicon?
Los navegadores guardan los favicons en caché de forma agresiva. Fuerza la recarga, abre directamente la URL del icono o añade un parámetro de versión a las etiquetas link.
¿Se sube mi imagen?
No. Todos los iconos y el archivo .ico se crean en tu navegador.