Configurar Logo

Sube y configura el logo de tu empresa para las facturas.

Pasos para subir logo

1. Navega a Configuración > Facturación > Apariencia.
2. En la sección de logo:
   • Clic en “Subir Logo” o arrastra archivo.
   • Selecciona imagen (PNG, JPG, SVG).
   • Espera confirmación de carga.

Formatos soportados

Formato	Recomendado	Tamaño máximo
PNG	✅ Sí	2 MB
JPG	✅ Sí	2 MB
SVG	⚠️ Limitado	500 KB

Dimensiones recomendadas:

Ancho: 200-800px
Alto: 100-300px
Relación de aspecto: 2:1 o 3:1
Fondo: Transparente (PNG)

Ajustar posición y tamaño

Posición:

Opción	Cuándo usar
Izquierda	Diseño estándar europeo
Centro	Diseño minimalista
Derecha	Diseño americano

Tamaño:

Tamaño	Píxeles	Uso
Pequeño	50px	Logos con mucho detalle
Mediano	70px	Recomendado
Grande	90px	Logos simples o iconos
Extra Grande	110px	Logos muy simples

Como sé que lo hice bien

• El logo aparece en la previsualización.
• Toast de confirmación: “Logo actualizado”.
• Las nuevas facturas muestran el logo.

Errores comunes

Mensaje	Causa	Solución
”Archivo muy grande”	Imagen > 2MB	Comprime la imagen
”Formato no soportado”	Archivo no válido	Usa PNG o JPG
Logo pixelado	Resolución muy baja	Sube imagen de mayor calidad (min 200px ancho)
Logo cortado	Tamaño incorrecto	Ajusta con selector de tamaño

Buenas prácticas

Optimización de imágenes:

✅ Recomendado:
  - PNG con fondo transparente
  - Resolución 2x para pantallas Retina
  - Optimizado con TinyPNG o similar
  - Máximo 500KB

❌ Evitar:
  - JPG con fondo blanco (no transparente)
  - Imágenes sin optimizar
  - SVG muy complejos (rendimiento)

Eliminación de logo:

Si necesitas quitar el logo:

1. Clic en el botón X sobre la imagen del logo.
2. Confirma la eliminación.
3. Las facturas se generarán sin logo.

Detalles técnicos — Logo

Detalles técnicos

Storage: supabase.storage.buckets.logos

Tabla afectada:

SELECT logo_url
FROM businesses
WHERE id = '<business_id>';

Hook: useResolvedCompanyLogoUrl

export function useResolvedCompanyLogoUrl(logoUrl: string | null) {
  const [resolvedUrl, setResolvedUrl] = useState<string | null>(null);

  useEffect(() => {
    if (!logoUrl) {
      setResolvedUrl(null);
      return;
    }

    // Si es URL de Supabase Storage
    if (logoUrl.startsWith('logos/')) {
      const { data } = supabase.storage
        .from('logos')
        .getPublicUrl(logoUrl);

      setResolvedUrl(data.publicUrl);
    } else {
      setResolvedUrl(logoUrl);
    }
  }, [logoUrl]);

  return { resolvedUrl, isLoading };
}

Componente: InvoiceTemplatesSettings.tsx

const handleLogoChange = async (logoUrl: string) => {
  const { error } = await supabase
    .from('businesses')
    .update({ logo_url: logoUrl })
    .eq('id', currentBusinessId);

  if (error) throw error;

  toast({
    title: "Logo actualizado",
    description: "El logo se ha guardado correctamente",
  });
};

Política de Storage:

-- Política para bucket 'logos'
CREATE POLICY "usuarios_pueden_subir_logos"
  ON storage.objects
  FOR INSERT
  TO authenticated
  WITH CHECK (bucket_id = 'logos');

CREATE POLICY "logos_publicos_lectura"
  ON storage.objects
  FOR SELECT
  TO public
  USING (bucket_id = 'logos');

Tamaños definidos:

const LOGO_SIZE_VALUES: Record<string, number> = {
  small: 50,    // 50px de alto
  medium: 70,   // 70px de alto (por defecto)
  large: 90,    // 90px de alto
  xlarge: 110   // 110px de alto
};