Nuevas páginas web
Crea una letra sencilla o un icono emoji en un minuto, mientras se sigue diseñando el logotipo definitivo.
Generador de favicones: crea un archivo «favicon.ico» e iconos PNG a partir de texto, un emoji o una imagen.
Escribe una o dos letras o un emoji, o sube tu logotipo, y obtén un conjunto listo para usar de archivos de favicon: favicon.ico, 16×16, 32×32, 48×48, el icono táctil de Apple de 180×180 y los iconos de aplicación de 192×192 y 512×512. Copia el fragmento de código HTML y ya está. Las imágenes se procesan en tu navegador.
Crear mi favicon
La imagen se queda en tu navegador
Diseña tu icono
Vista previa y descarga
La guía
Guía para crear favicons: tamaños, archivos y el código HTML que necesitas
Qué archivos de favicon necesita una página web y cómo añadirlos.
¿Qué es el generador de favicons?
Un favicon es el pequeño icono que aparece en las pestañas del navegador, en los marcadores y en los resultados de búsqueda, junto al nombre de tu sitio web. Un buen favicon hace que tu pestaña sea fácil de encontrar entre tantas otras.
Este generador dibuja tu icono en un lienzo en todos los tamaños que necesites y te permite descargar cada archivo, incluido un archivo «favicon.ico» con varios tamaños, junto con las etiquetas de enlace para añadir a tu página.
Por qué la gente utiliza un generador de favicons
Logotipos existentes
Recorta un logotipo en forma de cuadrado y exporta todos los tamaños que requieren los navegadores y los teléfonos móviles.
Aplicaciones web y PWA
Descarga los iconos PNG de 192 y 512 píxeles que requiere el manifiesto de una aplicación web, además del icono táctil de Apple.
Explicación de los tamaños de los favicons
favicon.ico es el archivo clásico que se encuentra en el directorio raíz de tu sitio web. Esta herramienta agrupa versiones de 16, 32 y 48 píxeles en un único archivo ICO. Los archivos PNG de 16×16 y 32×32 son compatibles con los navegadores modernos, y el de 32×32 se ve más nítido en pantallas de alta densidad. El archivo «apple-touch-icon.png» de 180×180 se utiliza cuando alguien añade tu sitio web a la pantalla de inicio de un iPhone o un iPad.
Los archivos PNG de 192×192 y 512×512 son los tamaños que utilizan Android y las aplicaciones web instalables; inclúyelos en el manifiesto de tu aplicación web. Los motores de búsqueda también pueden mostrar un favicon en los resultados, y Google solicita un icono cuadrado cuyo tamaño sea un múltiplo de 48 píxeles, lo que cubren los archivos de 48 y 192.
Cómo utilizar el generador de favicons
- Elige «Texto» o «Imagen». Si eliges «Texto», escribe uno o dos caracteres o un emoji y selecciona los colores. Si eliges «Imagen», selecciona un archivo.
- Elige una forma: cuadrada, redondeada o circular.
- Echa un vistazo a las vistas previas de cada tamaño. Los tamaños pequeños se muestran con su tamaño real en píxeles.
- Descarga los archivos que necesites o utiliza la opción «Descargar todo» y, a continuación, copia el fragmento de código HTML en la sección <head> de tu página.
Consejos sencillos
- Uno o dos caracteres se leen mejor a 16 píxeles. Las palabras largas se ven borrosas.
- Utiliza un fuerte contraste entre el icono y su fondo para que se vea bien tanto en pestañas claras como oscuras.
- En el caso de logotipos con muchos detalles, utiliza una versión simplificada o solo la inicial.
- Coloca los archivos en la raíz de tu sitio web para que funcionen los enlaces del fragmento de código, o modifica las rutas para que coincidan con tus carpetas.
Limitaciones y privacidad
Privacidad
La imagen se dibuja y se redimensiona en tu navegador. No se sube nada, y los archivos se crean en tu dispositivo cuando los descargas.
Limitaciones
El archivo ICO solo contiene imágenes de 16, 32 y 48 píxeles. Las imágenes se recortan en forma de cuadrado centrado, así que recorta primero tu logotipo si necesitas otra parte. Los navegadores a veces almacenan en caché los favicons antiguos durante mucho tiempo, por lo que es posible que el nuevo icono tarde un rato en aparecer.
Preguntas frecuentes
Preguntas frecuentes sobre el generador de favicons
¿Qué es un favicon?
Un favicon es el pequeño icono que aparece en las pestañas del navegador, en los marcadores y, a veces, en los resultados de búsqueda, junto al nombre de tu sitio web.
¿Qué tamaños de favicon necesito?
Un archivo favicon.ico (16, 32 y 48 píxeles), un PNG de 32×32, un icono táctil de Apple de 180×180 y archivos PNG de 192×192 y 512×512 si tu sitio web se puede instalar como aplicación. Esta herramienta los crea todos.
¿Cómo puedo añadir el favicon a mi página web?
Sube los archivos a tu sitio web, normalmente a la carpeta raíz, y pega las etiquetas de enlace generadas en la sección «head» de tu código HTML. Modifica las rutas si tus archivos se encuentran en otra ubicación.
¿Puedo crear un favicon a partir de un emoji?
Sí. Selecciona «Texto» y escribe un emoji, o uno o dos caracteres cualquiera. Elige un color de fondo y una forma, y el icono se generará automáticamente.
¿Qué imagen debo subir?
Lo ideal es una imagen cuadrada de al menos 512×512 píxeles, en formato PNG, JPG o WebP. Las imágenes con otras formas se recortarán para obtener un cuadrado centrado.
¿Admite fondos transparentes?
Sí. Si desmarcas la opción «Rellenar fondo», un archivo PNG con transparencia conservará dicha transparencia. En el caso del texto, las letras se dibujan sobre un icono transparente.
¿Por qué no se ve mi nuevo favicon?
Los navegadores almacenan los favicons en la caché de forma muy intensa. Prueba a actualizar la página por completo, a borrar la caché o a abrir la página en una ventana privada para ver el nuevo icono.
¿Se sube mi imagen a un servidor?
No. El icono se crea en tu navegador y los archivos se generan en tu dispositivo.
De las personas que utilizan esta herramienta
Opiniones
Cargando opiniones…
Sigue adelante
Más herramientas en la caja
La página de inicio incluye docenas de herramientas gratuitas más que no requieren una clave API.
Generador de UUID
Generar UUID de los formatos v4, v7 y v5 de forma masiva.
Abrir herramientaConvertidor de CSV a JSON
Convertir datos CSV en JSON limpio.
Abrir herramientaCalculadora de descuentos
Calcula los precios de oferta y los descuentos porcentuales.
Abrir herramientaPrueba de velocidad de mecanografía
Mide tus palabras por minuto y tu precisión.
Abrir herramienta