Seleccioná una imagen
Subí un logo, símbolo o imagen cuadrada en formato JPG, PNG o WebP.
Herramienta gratis
Generador de favicon
Subí una imagen y generá un paquete completo con favicon.ico, iconos PNG, Apple Touch Icon, Android Chrome y site.webmanifest.
★
Subí una imagen
Elegí una imagen cuadrada o un logo en JPG, PNG o WebP.
Formatos permitidos: JPG, PNG y WebP.
Tamaño máximo: 20 MB.
Recomendado: imagen cuadrada de al menos 512 × 512 px.
Cómo usar la herramienta
Cómo crear un favicon desde una imagen
El generador de favicon de SG Hub crea un paquete completo de iconos para sitios web a partir de una imagen JPG, PNG o WebP. Todo se procesa directamente en el navegador.
Ajustá el encuadre
Elegí si querés mostrar la imagen completa o cubrir todo el icono.
Configurá fondo y espacio
Usá transparencia o un color personalizado y ajustá el espacio interior.
Completá los datos
Ingresá el nombre del sitio, nombre corto y color del tema para el manifest.
Generá el paquete
Descargá un ZIP con favicon.ico, iconos PNG, manifest, HTML de ejemplo y archivos auxiliares.
Qué es un favicon
Un favicon es el pequeño icono que aparece en las pestañas del navegador, favoritos, accesos directos y algunos resultados de búsqueda.
Aunque suele verse en tamaños muy pequeños, ayuda a reconocer rápidamente una marca o sitio web.
Un paquete completo de favicon incluye varios tamaños para distintos navegadores, sistemas operativos y dispositivos.
Archivos que genera la herramienta
Archivo compatible con navegadores y configuraciones tradicionales.
Icono pequeño utilizado principalmente en pestañas y favoritos.
Versión de mayor resolución para navegadores y pantallas modernas.
Icono de 180 × 180 píxeles para accesos directos en dispositivos Apple.
Icono utilizado por navegadores y dispositivos Android.
Versión de alta resolución para instalaciones y aplicaciones web.
Archivo con nombre, colores e iconos utilizados por aplicaciones web instalables.
Configuración adicional para mosaicos y navegadores de Microsoft.
Qué imagen conviene utilizar
Para obtener un buen resultado, utilizá una imagen cuadrada de al menos 512 × 512 píxeles.
Los logos simples, con formas claras y pocos detalles, suelen verse mejor en tamaños pequeños.
Evitá textos largos o elementos demasiado finos, porque pueden perder legibilidad en iconos de 16 × 16 píxeles.
Una imagen PNG con transparencia es ideal cuando querés conservar el fondo transparente.
Privacidad
Generación privada en el navegador
La imagen y los archivos se procesan localmente. SG Hub no recibe ni almacena el logo seleccionado.
Mostrar completa o cubrir todo el icono
La opción de mostrar completa conserva todo el contenido de la imagen y puede dejar espacio alrededor. La opción cubrir llena todo el cuadrado y puede recortar partes de los bordes.
Para qué sirve el espacio interior
El espacio interior separa el logo de los bordes del icono. Es útil cuando el diseño necesita aire o cuando querés evitar que los elementos queden demasiado pegados al límite.
Fondo transparente o personalizado
Podés conservar la transparencia original o aplicar un color de fondo. La transparencia se mantiene en los archivos PNG y dentro del favicon.ico generado.
Qué es site.webmanifest
El archivo site.webmanifest contiene información sobre el nombre del sitio, nombre corto, colores e iconos. Los navegadores pueden utilizarlo al instalar una aplicación web o crear un acceso directo.
Cómo instalar el favicon en tu sitio
- 1Copiá los archivos descargados dentro de la carpeta pública o raíz de tu sitio.
- 2Abrí el archivo favicon-html.txt incluido en el ZIP.
- 3Copiá las etiquetas dentro del elemento <head> de tu página.
- 4Verificá que las rutas coincidan con la ubicación real de los archivos.
- 5Limpiá la caché del navegador si el favicon anterior sigue apareciendo.
Ejemplo para Next.js
En un proyecto Next.js podés colocar los iconos y el manifest dentro de la carpeta public. También podés usar la API de metadata de Next.js para definir iconos y manifest.
export const metadata = {
icons: {
icon: [
{ url: "/favicon.ico" },
{
url: "/favicon-32x32.png",
sizes: "32x32",
type: "image/png",
},
{
url: "/favicon-16x16.png",
sizes: "16x16",
type: "image/png",
},
],
apple: "/apple-touch-icon.png",
},
manifest: "/site.webmanifest",
};Usos frecuentes
- Crear el favicon de una página web.
- Actualizar la identidad visual de un sitio.
- Preparar iconos para una aplicación web progresiva.
- Generar Apple Touch Icon.
- Crear iconos para accesos directos móviles.
- Preparar recursos para proyectos Next.js.
- Crear un paquete para WordPress.
- Generar iconos para sitios institucionales o tiendas online.
Limitaciones y recomendaciones
Las imágenes con muchos detalles pueden perder claridad en tamaños pequeños.
Un favicon no reemplaza un logo completo, sino que utiliza una versión simplificada.
Los navegadores pueden tardar en mostrar cambios debido a la caché.
La visualización final puede variar ligeramente según el navegador y el dispositivo.
Otras herramientas para preparar tu imagen
Antes de generar el favicon, podés recortar, redimensionar, comprimir o convertir tu logo.
Herramientas relacionadas