Seleccioná una imagen
Subí un logo, símbolo o imagen cuadrada en formato JPG, PNG o WebP.
Generación local y privada
Generador de favicon
Subí una imagen y generá un paquete completo con favicon.ico, iconos PNG, Apple Touch Icon, iconos Android, site.webmanifest y código de instalación.
La imagen y todos los archivos se procesan directamente en tu navegador. El logo no se envía a los servidores de SG Hub.
★
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 puede aparecer en las pestañas del navegador, favoritos, accesos directos y algunos resultados de búsqueda. Su visualización final depende del navegador, del buscador y de que el sitio haya sido rastreado correctamente.
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.
Consultar la Política de Privacidad →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.
Preguntas frecuentes
Preguntas sobre el generador de favicon
Conocé qué archivos se generan, cómo instalarlos y cómo se procesan las imágenes dentro del navegador.
¿Cómo crear un favicon desde una imagen?
Seleccioná una imagen JPG, PNG o WebP, ajustá el fondo y el encuadre y descargá el paquete generado en formato ZIP.
¿Qué archivos genera la herramienta?
Genera favicon.ico, favicons de 16 y 32 píxeles, Apple Touch Icon, iconos Android, site.webmanifest, browserconfig.xml, código HTML de ejemplo y un archivo README.
¿Qué tamaño debe tener la imagen original?
Se recomienda utilizar una imagen cuadrada de al menos 512 × 512 píxeles para conservar una buena calidad en todos los tamaños generados.
¿Puedo usar una imagen con fondo transparente?
Sí. La transparencia se conserva en los archivos PNG y en el favicon.ico cuando seleccionás la opción de fondo transparente.
¿Qué formatos de imagen admite?
La herramienta admite archivos JPG, PNG y WebP de hasta 20 MB.
¿Qué es favicon.ico?
Es un archivo contenedor de iconos utilizado por navegadores y configuraciones tradicionales de sitios web. El archivo generado incluye versiones de 16 × 16 y 32 × 32 píxeles.
¿Qué es Apple Touch Icon?
Es el icono que utilizan los dispositivos Apple cuando un sitio se guarda como acceso directo en la pantalla de inicio.
¿Qué es site.webmanifest?
Es un archivo que describe el nombre, nombre corto, colores e iconos de una aplicación web instalable o de un acceso directo.
¿Dónde debo colocar los archivos?
Generalmente deben colocarse en la carpeta pública o raíz del sitio. El paquete incluye un archivo con etiquetas HTML de ejemplo para agregarlas dentro del elemento head.
¿Por qué no se actualiza mi favicon?
Los navegadores y buscadores suelen guardar los favicons en caché. Puede ser necesario limpiar la caché, abrir una ventana privada o esperar a que el sitio vuelva a ser rastreado.
¿La imagen se sube a un servidor?
No. La imagen y todos los archivos generados se procesan localmente dentro del navegador y no se envían a SG Hub.
¿La herramienta es gratuita?
Sí. Podés generar y descargar gratuitamente el paquete completo de favicon.
Herramientas relacionadas