Building a desktop app with Tauri — 3 hours of despair
Why is the icon so big? Why won't the window move? The most frustrating 3 hours of building a desktop app with Tauri.
Building a desktop app with Tauri — 3 hours of despair
I decided to wrap the Fecit web app with Tauri v2 to make a desktop app. The web app was already running, so wrapping it with Tauri should be quick.
It wasn’t quick.
Two problems ate exactly 3 hours. Not writing code — just repeating “why isn’t this working?” for 3 hours straight. It was the most frustrating moment working with Claude Code. Neither of us had the answer.
Why is the icon so big
macOS app icons have a spec. I figured I’d prepare a 1024×1024 image and be done.
Made the image. Added it. Built the app. Icon appears in the Dock.
But it’s bigger than every other app. Noticeably bigger.
“Wrong size?” It’s 1024×1024. Correct. “Different resolution?” No. The image meets the spec.
The problem was padding.
macOS app icons don’t fill the entire canvas. They have rounded corners and margins on all sides. Look at any Apple app icon — the artwork sits slightly smaller inside the canvas. I filled the entire canvas, so the icon looked bloated next to everything else.
Added padding, matched the rounded corners to the macOS style. Finally it looked natural alongside other apps.
Finding this took forever. Search “macOS icon size” and you get 1024×1024. The padding rules are buried deep in Apple’s Human Interface Guidelines.
Why won’t the window move
After the icon, the titlebar.
Tauri’s default titlebar looks out of place. To make it feel like a native macOS app, you set the titlebar to transparent and keep only the traffic light buttons (red/yellow/green). Set titleBarStyle to Transparent.
Titlebar disappears. Looks great.
But you can’t drag the window to move it.
The default titlebar has built-in drag support. Make it transparent and that functionality disappears too. You need to explicitly define a draggable region.
I didn’t know this and spent a long time confused. “I made the titlebar transparent, why can’t I drag?” Is it CSS? Tauri config? Permissions? Changing things one by one, watching nothing work.
The fix was two things:
- Add
startDraggingpermission to Tauri config - Add
data-tauri-drag-regionattribute to the sidebar header
Two lines of code. Finding those two lines took over an hour.
What 3 hours taught me
Looking back, both problems share the same pattern.
“When you don’t know the cause, you don’t know what to search for.”
If you don’t know the icon looks big because of missing padding, you can’t search “macOS icon padding.” You search “macOS icon size” and keep getting 1024×1024.
If you don’t know dragging broke because of permissions and drag regions, you search “Tauri window drag not working” and get irrelevant answers.
Working with AI didn’t change this. If you don’t know the root cause, AI doesn’t know either. You fumble together and discover together.
3 hours felt like a waste, but the result is a desktop app that looks like a native macOS app. The icon is the right size, the window moves freely. The cost-to-outcome ratio wasn’t terrible.
But if you’re going through the same thing — macOS icons need padding, and Tauri transparent titlebars need explicit drag regions. These two sentences could save you 3 hours.