different-ai/openwork · warning · Error

Use a square image for the app icon.

Error message

Use a square image for the app icon.

What it means

For kind === "icon", the image must be perfectly square (width === height). Non-square icons are rejected because the icon is displayed in square containers and non-square art would be distorted or cropped unpredictably.

Source

Thrown at ee/apps/den-web/app/(den)/dashboard/_components/brand-appearance-screen.tsx:47

};

async function createBrandAssetDraft(file: File, kind: BrandAssetKind): Promise<BrandAssetDraft> {
  if (file.type !== "image/png" && file.type !== "image/jpeg") throw new Error("Use a PNG or JPEG image.");
  if (file.size > BRAND_ASSET_MAX_BYTES) throw new Error("Use an image under 2 MB.");

  let image: ImageBitmap;
  try {
    image = await createImageBitmap(file);
  } catch {
    throw new Error("OpenWork could not decode that image.");
  }

  const { width, height } = image;
  image.close();
  if (width > 4096 || height > 4096) throw new Error("Use an image no larger than 4096×4096 pixels.");
  if (kind === "icon") {
    if (width < 64 || height < 64) throw new Error("Use a square icon at least 64×64 pixels.");
    if (width !== height) throw new Error("Use a square image for the app icon.");
  } else {
    const aspectRatio = width / height;
    if (width < 128 || height < 32) throw new Error("Use a wordmark at least 128×32 pixels.");
    if (aspectRatio < 1.5 || aspectRatio > 8) throw new Error("Use a horizontal wordmark between 1.5:1 and 8:1.");
  }

  return { file, previewUrl: URL.createObjectURL(file), width, height };
}

function BrandAssetUploadField({
  kind,
  title,
  description,
  currentUrl,
  managedAsset,
  draft,
  clearPending,
  disabled,

View on GitHub (pinned to 2b7df46e8a)

Solutions

1. Export the square icon mark (e.g. 512×512) rather than the full horizontal logo.
2. In the design tool, set the frame to equal width/height and center the artwork with padding.
3. Crop the image to a square (center crop) before upload.
4. Note the 64×64 minimum still applies — use e.g. 512×512 to satisfy both checks.

Example fix

// before
await draft(logoLockup /* 800x300 */, "icon");
// after
const square = centerCropToSquare(logoLockup); // 300x300 or scaled 512x512
await draft(square, "icon");

async function isSquareIcon(file: File): Promise<boolean> {
  const bmp = await createImageBitmap(file);
  const ok = bmp.width === bmp.height && bmp.width >= 64;
  bmp.close();
  return ok;
}

try {
  const asset = await createBrandAssetDraft(file, "icon");
} catch (error) {
  showToast(error instanceof Error ? error.message : "Could not use that image.");
}

When it happens

Trigger: Uploading a rectangular image as an app icon — e.g. a 400×300 logo lockup, a 1920×1080 banner, or a 512×480 icon export with rounding differences.

Common situations: Using a company logo (usually horizontal) as the icon instead of a dedicated square mark; exporting a non-square frame from Figma; canvas exports with odd padding.

Related errors

• Use a square icon at least 64×64 pixels.
• Use an image no larger than 4096×4096 pixels.
• Use a wordmark at least 128×32 pixels.
• Use a horizontal wordmark between 1.5:1 and 8:1.

AI-assisted analysis of different-ai/openwork@2b7df46e8a (2026-09-01). Data as JSON: /api/errors/e05a8c271a771fb1. Report an issue: GitHub.