Generador de favicons
Cree favicons a partir de texto, emojis o imágenes para su sitio web
Diseño del favicon
Elegir un emoji
0% es cuadrado; 100% usa el trazado original completamente redondeado.
Archivo de imagen de hasta 10 MiB. El procesador original estira la imagen hasta formar un cuadrado.
Vista previa y archivos
Esta es una ilustración. La representación de los emojis puede variar según el navegador y el sistema.
Vista previa en tiempo real actualizada. Genere los archivos cuando su diseño esté listo.
Archivos PNG generados
El diseño ha cambiado. Estos archivos aún contienen el último diseño generado; vuelva a generarlos para actualizarlos.
Archivos PNG: 16, 32, 48, 64, 128 y 256 px. El ICO contiene el PNG generado de 32 px.
Añadir a su sitio
- Suba los archivos descargados y use las etiquetas copiadas en el head de su página.
- Las rutas predeterminadas de las etiquetas hacen referencia a la raíz de su sitio; ajústelas si coloca los archivos en otro lugar.
- La descarga ICO contiene una imagen PNG, en lugar de todos los tamaños generados.
- Los iconos Apple touch y los iconos del manifiesto de aplicaciones web son recursos separados; esta herramienta no genera esos archivos.
- No se garantiza que un favicon aparezca en los resultados de búsqueda.
- La herramienta lee su archivo en el navegador sin subirlo. Conserve un original intacto.
Acerca de la herramienta Generador de favicons
Nuestro generador de favicons en línea gratuito le permite crear favicons profesionales a partir de texto, letras, emojis o imágenes subidas, directamente en su navegador. Los favicons son los pequeños iconos que aparecen en las pestañas del navegador, los marcadores y los resultados de búsqueda, y desempeñan un papel clave en el reconocimiento de marca y en la experiencia de usuario. Con esta herramienta puede diseñar y descargar favicons en varios tamaños sin programas de diseño ni conocimientos técnicos.
El generador admite tres modos de creación: el modo Texto/Letra, para crear favicons a partir de uno o dos caracteres con control total de la fuente, el color y el estilo; el modo Emoji, para generar rápidamente favicons a partir de cualquier emoji con fondos y tamaños ajustables; y el modo Subir imagen, para crear archivos de favicon cuadrados a partir de imágenes que el navegador pueda decodificar. La herramienta procesa el archivo seleccionado de forma local, sin subirlo; esto no garantiza que todos los demás scripts ni solicitudes de la página sean privados.
La herramienta genera seis tamaños cuadrados en PNG: 16, 32, 48, 64, 128 y 256 px. Puede descargar los archivos individuales, un ICO de 32 px basado en una sola imagen PNG y las etiquetas HTML link correspondientes. Estos recursos no cubren todos los requisitos de iconos de cada plataforma.
Características principales
- Tres modos de creación: texto/letra, emoji y subir imagen
- Color del texto, color de fondo, familia tipográfica y grosor de fuente personalizables
- Radio de borde ajustable, de cuadrado a círculo
- Compatibilidad con fondo transparente en los modos de texto y emoji
- Cuadrícula de selección rápida con 32 emojis de uso frecuente
- Genera seis tamaños de favicon estándar: 16x16, 32x32, 48x48, 64x64, 128x128 y 256x256
- Vista previa en directo con actualizaciones en tiempo real al ajustar la configuración
- Maqueta de pestaña de navegador que muestra cómo se verá su favicon
- Descarga de cada tamaño por separado como archivo PNG
- Descarga de un contenedor favicon.ico con un PNG de 32 px generado; la compatibilidad depende del cliente
- Copia de las etiquetas HTML link al portapapeles para integrarlas fácilmente en su sitio web
- Todo el procesamiento se realiza en el navegador, sin subir nada a ningún servidor
Cómo usar el generador de favicons
- Elija un modo: seleccione Texto/Letra para crear un favicon a partir de caracteres, Emoji para usar un emoji o Subir imagen para convertir una imagen existente.
- Personalice su diseño: en el modo Texto, introduzca 1 o 2 caracteres y ajuste el tamaño de fuente, los colores, el radio de borde, la familia tipográfica y el grosor. En el modo Emoji, seleccione o escriba un emoji y configure el fondo y el tamaño. En el modo Subir imagen, seleccione un archivo de imagen de su dispositivo.
- Previsualice en tiempo real: observe cómo se actualiza al instante la vista previa de 256x256 al cambiar la configuración. Revise la maqueta de pestaña del navegador para ver cómo quedará su favicon en una pestaña real.
- Genere los favicons: haga clic en el botón “Generar favicons” para crear los seis tamaños estándar a partir de su diseño.
- Descargue sus favicons: descargue los archivos PNG de cada tamaño, obtenga un archivo favicon.ico o copie las etiquetas HTML link para la sección head de su sitio web.
- Añádalos a su sitio web: coloque los archivos descargados en el directorio raíz de su sitio y pegue las etiquetas HTML link en el head de su documento HTML.
Casos de uso
- Lanzamiento de un sitio web nuevo: cree rápidamente un favicon profesional para un sitio web o una aplicación web nuevos sin necesidad de un diseñador gráfico.
- Marca personal: genere un favicon con una letra, usando sus iniciales, para un blog personal, un portafolio o un sitio web profesional.
- MVP de startups: cree un favicon provisional pero pulido durante las primeras etapas de desarrollo, cuando aún no existe una identidad de marca completa.
- Proyectos paralelos y experimentos: dé personalidad a proyectos de pasatiempo, participaciones en hackatones o sitios experimentales con favicons personalizados de emoji o texto.
- Pruebas de desarrollo web: genere favicons provisionales para entornos de desarrollo, servidores de pruebas o prototipos de clientes.
- Gestión de varios sitios: cree favicons distintos para diferentes sitios, subdominios o aplicaciones web y así distinguir varias pestañas abiertas.
- Documentación y tutoriales: genere recursos de favicon para sitios de demostración, ejemplos de código y materiales educativos.
- Desarrollo de extensiones de navegador: cree recursos de iconos para extensiones de navegador que necesitan iconos pequeños y reconocibles en varios tamaños.
Preguntas frecuentes
¿Qué es un favicon?
Un favicon (abreviatura de “favorites icon”, icono de favoritos) es un pequeño icono asociado a un sitio web. Aparece en las pestañas del navegador, las listas de marcadores, el historial del navegador y los resultados de los buscadores. Los favicons ayudan a los usuarios a identificar y localizar rápidamente su sitio web entre varias pestañas y marcadores abiertos.
¿Qué tamaños debo usar para mi favicon?
Esta herramienta ofrece archivos PNG de 16, 32, 48, 64, 128 y 256 px y un ICO de 32 px. Elija los tamaños que exija el cliente de destino; Google Search recomienda actualmente iconos cuadrados de más de 48 px, y su inclusión no está garantizada.
¿Cuál es la diferencia entre los formatos PNG e ICO?
PNG es un formato de imagen de mapa de bits; ICO es un contenedor de iconos. Esta herramienta exporta seis archivos PNG e incrusta el PNG de 32 px generado dentro de una única entrada ICO. Revise los requisitos del cliente de destino; ningún formato garantiza compatibilidad universal.
¿Puedo crear un favicon transparente?
Sí, tanto en el modo Texto/Letra como en el modo Emoji puede activar la opción de fondo transparente. Esto crea un favicon con fondo transparente, útil para favicons que deben integrarse con el color de fondo de la pestaña del navegador.
¿Mi imagen subida se envía a un servidor?
Esta herramienta procesa la imagen seleccionada en el navegador, sin subirla. Los archivos están limitados a 10 MiB y los formatos dependen de la decodificación del navegador. Esta declaración no cubre el almacenamiento, el rastreo ni las solicitudes que hagan otros scripts del sitio.
¿Cómo añado el favicon a mi sitio web?
Coloque los archivos de favicon descargados en el directorio raíz de su sitio web (o en un subdirectorio de su elección) y, a continuación, añada las etiquetas HTML link a la sección head de su HTML. Puede copiar las etiquetas link listas para usar desde esta herramienta. Por ejemplo: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
Consejos y buenas prácticas
- Manténgalo simple: los favicons se muestran en tamaños muy pequeños. Use formas simples y marcadas y colores de alto contraste que sigan siendo reconocibles a 16x16 píxeles.
- Use 1 o 2 caracteres como máximo: en los favicons de texto, un solo carácter funciona mejor. Dos caracteres pueden funcionar, pero pueden ser menos legibles en tamaños pequeños.
- Elija colores que contrasten: asegúrese de que el texto o el emoji destaque con claridad sobre el fondo. Un contraste alto garantiza la visibilidad en las pestañas del navegador.
- Pruebe en tamaños pequeños: revise siempre cómo se ve su favicon a 16x16 y 32x32 antes de darlo por terminado. Lo que se ve muy bien a 256x256 puede no ser legible en tamaños menores.
- Piense en el modo oscuro: muchos usuarios navegan con temas oscuros. Un favicon con fondo transparente y contenido oscuro puede volverse invisible. Considere añadir un fondo de color o usar contenido de colores claros.
- Use el radio de borde: las esquinas redondeadas (20-30%) dan a los favicons un aspecto moderno y pulido. El círculo completo (100%) funciona bien con letras sueltas o emojis.
- Incluya varios tamaños: proporcione recursos adecuados para los clientes de destino. Esta herramienta genera los seis tamaños PNG indicados y un ICO; los iconos Apple touch y del manifiesto de aplicación web requieren recursos aparte, y no se garantiza una cobertura completa de dispositivos.