Generador de favicon con iniciales y emojis
Crea un favicon sencillo y reconocible sin tener que preparar una imagen. Escribe una o dos iniciales o elige un solo emoji y ajusta la forma y el color de fondo. Con las iniciales también puedes elegir el color de los caracteres y el estilo de letra; los emojis conservan el aspecto nativo del navegador. La vista previa de 512 px se actualiza en tu navegador y la descarga final incluye los iconos pequeños para navegadores, los iconos para móviles y los archivos de configuración necesarios para añadir el diseño a un sitio web. No se sube nada ni se utiliza IA.
Cómo crear un favicon
-
1
Elige el contenido del icono
Escribe una o dos iniciales para crear una marca compacta o utiliza un emoji como diseño.
-
2
Da estilo al diseño
Elige una forma cuadrada, cuadrada con esquinas redondeadas o circular y define el color de fondo. Para las iniciales también puedes cambiar el color de los caracteres y el estilo de letra; los emojis mantienen su aspecto nativo.
-
3
Comprueba la vista previa
Revisa la vista previa de 512 px y comprueba también si el diseño seguirá siendo claro al reducirlo a un icono de 16 px para una pestaña del navegador.
-
4
Descarga e instala
Descarga el paquete de favicon creado localmente, añade los archivos a tu sitio y pega o adapta el fragmento incluido para el `<head>`.
Qué incluye el paquete de favicon
Un mismo diseño de favicon debe funcionar en lugares muy distintos, desde una diminuta pestaña del navegador hasta la pantalla de inicio de un móvil. El generador renderiza el diseño en los tamaños prácticos indicados a continuación y agrupa todos los archivos de forma local.
| Elemento del paquete | Tamaño o contenido | Uso previsto |
|---|---|---|
favicon.ico |
Imágenes de 16, 32 y 48 px | Pestañas, marcadores y programas que todavía solicitan un archivo ICO |
favicon-16x16.png |
16 × 16 px | Favicon pequeño para navegadores |
favicon-32x32.png |
32 × 32 px | Favicon estándar para navegadores |
apple-touch-icon.png |
180 × 180 px | Icono táctil de Apple |
android-chrome-192x192.png |
192 × 192 px | Icono de aplicación web para contextos Android pequeños |
android-chrome-512x512.png |
512 × 512 px | Icono de aplicación web de mayor tamaño |
mstile-150x150.png |
150 × 150 px | Imagen para mosaicos de Microsoft |
site.webmanifest |
Manifiesto JSON | Hace referencia a los iconos de Android en navegadores que utilizan un manifiesto de aplicación web |
browserconfig.xml |
Configuración XML | Hace referencia a la imagen y el color del mosaico de Microsoft |
favicon-head.html |
Fragmento HTML | Referencias listas para copiar a los iconos, el manifiesto y la configuración del navegador |
Crea un favicon que siga funcionando a 16 px
Un favicon no es un cartel en miniatura. Los detalles finos, las palabras largas y las diferencias de color sutiles desaparecen rápidamente al tamaño de una pestaña. Una inicial destacada, una marca corta de dos letras o un emoji sencillo suelen reconocerse mejor que una composición complicada.
- Para las iniciales, utiliza un contraste fuerte entre los caracteres y el fondo.
- Deja espacio alrededor de las letras y los emojis para que las máscaras de cada plataforma no aprieten el diseño.
- Compara las versiones cuadrada, cuadrada con esquinas redondeadas y circular antes de elegir la silueta más clara.
- Revisa los iconos pequeños exportados además de la vista previa de 512 px. Un diseño elegante a tamaño completo puede resultar confuso a 16 px.
- Prueba el favicon instalado en más de un navegador y sobre interfaces claras y oscuras.
Añade los archivos generados a tu sitio
Conserva los nombres generados y coloca los archivos donde el fragmento para el <head> espera encontrarlos, normalmente en la raíz del sitio. Pega el fragmento en el <head> de cada plantilla de página. Si tu framework sirve los recursos estáticos desde otro directorio o una red de distribución de contenidos, actualiza antes de publicar las rutas del fragmento, del manifiesto y de la configuración del navegador.
Los archivos incluidos proporcionan referencias a los iconos, pero por sí solos no convierten un sitio en una aplicación web progresiva instalable. La instalación puede requerir otros campos en el manifiesto, alojamiento seguro y criterios específicos de cada navegador.
Preguntas frecuentes
Sí. Escribe una o dos iniciales y elige la forma, el color de fondo, el color del primer plano y el estilo de letra. El texto breve es intencionado porque conserva mejor la legibilidad en los tamaños pequeños de un favicon.
Sí. El emoji conserva el aspecto nativo del navegador, mientras que la forma y el color de fondo siguen siendo configurables. Revisa la vista previa antes de descargar, ya que el aspecto puede variar entre sistemas y navegadores y los emojis complejos no están disponibles en todos ellos.
Sí. El paquete incluye un archivo favicon.ico con imágenes de 16, 32 y 48 px, además de favicons PNG separados de 16 y 32 px e iconos más grandes para Apple, Android y Microsoft.
El Generador de favicon crea un diseño nuevo a partir de iniciales, texto breve o un emoji. El Conversor de favicon es la herramienta independiente para convertir una imagen PNG, JPEG o WebP existente en archivos de favicon.
No. El texto o emoji, el renderizado de la vista previa y la generación del paquete permanecen en tu navegador. La herramienta no sube el diseño ni consulta ningún sitio web.
No. Aplica las opciones que eliges y no utiliza IA. Tampoco puede determinar si las iniciales, un emoji, los colores o el diseño final entran en conflicto con una marca registrada o con los derechos de otra parte. Comprueba esos derechos antes de utilizar el favicon con fines comerciales.
Los navegadores suelen guardar los favicons en caché. Confirma que los archivos generados y las referencias del <head> estén publicados en las rutas esperadas y después borra la caché del navegador o prueba en una ventana privada. Algunos buscadores y plataformas actualizan los iconos según su propio calendario.
Herramientas relacionadas
Comprimir GIF
Reduce el tamaño de un GIF animado en el navegador: baja dimensiones, conserva menos fotogramas y ajusta la calidad de codificación. Previsualiza el bucle antes de descargar.
WebP a PNG
Convierte imágenes WebP a PNG manteniendo la transparencia y la calidad píxel a píxel para edición, impresión y herramientas de diseño antiguas.
Vectorizador de PNG a SVG
Convierte imágenes raster PNG en rutas SVG desde el navegador. Ideal para logotipos, iconos y arte lineal. Controla el umbral, el número de colores y el suavizado.
Generador de códigos QR
Genera un código QR localmente en el navegador a partir de una URL, texto plano o una carga QR correctamente formateada, y descárgalo como PNG.
Generador de Códigos de Barras
Crea códigos de barras 1D escaneables en Código 128, Código 39, EAN-13, UPC-A, ITF-14 y Codabar. Exporta como PNG, SVG o PDF para impresión.
WebP a JPG
Convierte imágenes WebP a JPG/JPEG directamente en el navegador. Elige la calidad, aplana la transparencia sobre un color de fondo y descarga sin subir archivos.