Cómo funciona
El Generador de favicon crea los iconos que se ven en la pestaña del navegador a partir de un texto, un emoji o una imagen, y produce los formatos ICO, PNG y SVG que hacen falta para que el favicon funcione en todos los navegadores y plataformas.
El favicon aparece en la pestaña, en la barra de marcadores, en el historial y en la pantalla de inicio del móvil. Hoy hacen falta más cosas que el viejo archivo .ico de 16×16: necesitas un PNG de 32×32 para pantallas normales, uno de 180×180 para el icono táctil de Apple, uno de 192×192 para Android y, si quieres, un SVG escalable para los navegadores modernos.
Cómo usarlo: escribe un emoji o una abreviatura de una o dos letras, o sube un archivo de imagen. Elige el color de fondo (liso, degradado o transparente). La vista previa te enseña cómo queda en varios tamaños. Pulsa Descargar para obtener un ZIP con: favicon.ico (ICO multitamaño), favicon-32x32.png, favicon-16x16.png, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png y un archivo site.webmanifest.
Favicons con emoji: usar un solo emoji como favicon es una tendencia actual; se ve nítido en todos los tamaños, no requiere trabajo de diseño y se reconoce al instante. Por ejemplo: 🛠 para una web de herramientas, 📊 para analítica o 🔒 para un producto de seguridad.
Etiquetas HTML: el generador te da las etiquetas <link> exactas para pegar en tu <head>, cubriendo lo que piden todos los navegadores y plataformas actuales.
Preguntas frecuentes
- Como mínimo: favicon.ico (multitamaño, con 16×16, 32×32 y 48×48), apple-touch-icon.png (180×180 para la pantalla de inicio de iOS) y android-chrome-192x192.png (pantalla de inicio de Android). El generador crea todos esos y además uno de 512×512 para las pantallas de carga de las aplicaciones web progresivas.
- Los navegadores modernos prefieren favicons en SVG (escalables, válidos a cualquier densidad) con PNG como alternativa. Los navegadores antiguos necesitan el .ico. El generador crea los tres formatos, y tu HTML debería referenciarlos todos con las etiquetas <link> adecuadas para máxima compatibilidad.
- Escribe un solo emoji en el campo de texto y elige un color de fondo (o transparente). El generador lo dibuja en todos los tamaños necesarios. Los favicons con emoji se ven estupendos a partir de 32 px, aunque a 16×16 puede costar distinguirlos.
- Sí. El generador te da las etiquetas <link> exactas para pegar en el <head>. Como mínimo necesitas: <link rel='icon' href='/favicon.ico'>, <link rel='apple-touch-icon' href='/apple-touch-icon.png'> y una referencia al manifiesto web.
¿Qué tamaños necesito para un favicon completo?
¿Es mejor usar un archivo ICO o un PNG?
¿Cómo uso un emoji como favicon?
¿Tengo que tocar el HTML al usar los archivos generados?
Scrollshot — Full Page Screenshot & Annotate
Scrolls the page for you, captures it viewport by viewport and stitches the slices into one seamless image — then opens an editor so you can crop, annotate and blur before saving.