tauri svg icon

I have a tauri app. how do I make an icon for it..md

I have a tauri app. how do I make an icon for it. I have an svg

Tauri has a built-in CLI command that can generate all required icons from your SVG file. Here's how to do it:

Using the tauri icon Command

Run the following command from your project directory, pointing to your SVG file:¹²

npm run tauri icon ./path/to/your-icon.svg

Or with other package managers:

yarn tauri icon ./your-icon.svg
pnpm tauri icon ./your-icon.svg
cargo tauri icon ./your-icon.svg

What It Generates

The command automatically creates all icons needed for different platforms and places them in src-tauri/icons/ by default:³¹

• Windows: icon.ico
• macOS: icon.icns
• Linux/General: Multiple PNG sizes (32x32.png, 128x128.png, 128x128@2x.png, icon.png)
• Mobile: Icons placed directly into Xcode and Android Studio projects¹

Configuration

The generated icons are automatically referenced in your tauri.conf.json under the bundle section:⁴

"bundle": {
  "icon": [
    "icons/32x32.png",
    "icons/128x128.png",
    "icons/128x128@2x.png",
    "icons/icon.icns",
    "icons/icon.ico"
  ]
}

Tips

• For best results, ensure your SVG has equal width and height (square aspect ratio)⁵
• If you want icons output to a different directory, use the -o flag: tauri icon ./icon.svg -o ./custom-folder^{3 6789101112131415}

⁂

---

Recommended SVG Size

Use a 1024×1024 pixel square SVG as your source file. The tauri icon command will automatically scale it down to generate all the required sizes (32, 128, 256, 512 pixels, etc.).¹⁶¹⁷

Key Requirements

• Square aspect ratio — width must equal height¹⁸¹⁶
• RGBA format — include transparency (alpha channel)¹⁸
• 32-bit color — 8 bits per channel¹⁶

Rounded Corners

Do NOT add rounded corners to your source icon. Here's the platform-specific guidance:

Platform	Corner Handling
macOS	The system automatically applies rounded corners that match other UI elements 1920
iOS	System applies rounded corner masking automatically 19
Windows	No rounded corners applied — icons are displayed as-is 21
Linux	Varies by desktop environment; typically no automatic rounding

Provide a full-bleed square image and let each OS handle masking. If you bake in rounded corners, they may look wrong when the OS applies its own rounding on top, or appear inconsistent on Windows/Linux.¹⁹

Design Tips

• Keep important content away from the edges (use roughly 80% of the canvas for the main graphic) to account for macOS/iOS corner clipping²²
• Ensure good contrast on both light and dark backgrounds²²
• Avoid small text or fine details — icons are often displayed at 32px or smaller²³
• Apple provides official icon templates at Apple Design Resources if you want to preview how your icon will look with system masking^{24 252627282930}

⁂

Footnotes

1. https://v2.tauri.app/develop/icons/ ↩ ↩² ↩³

2. https://v2.tauri.app/distribute/microsoft-store/ ↩

3. https://tauri.app/v1/guides/features/icons/ ↩ ↩²

4. https://favicon.im/blog/favicon-electron-tauri-desktop-app-branding ↩

5. https://tauri.app/v1/guides/features/icons ↩

6. https://stackoverflow.com/questions/72476337/how-to-create-icons-with-tauricon ↩

7. https://www.youtube.com/watch?v=szibOq-XMKk ↩

8. https://stackoverflow.com/questions/78324346/is-there-a-correct-way-to-set-the-icons-for-my-tauri-application ↩

9. https://techicons.dev/icons/tauri ↩

10. https://v2.tauri.app/start/project-structure/ ↩

11. https://hexmos.com/freedevtools/svg_icons/tauri/tauri-original/ ↩

12. https://github.com/tauri-apps/tauri/issues/6389 ↩

13. https://www.streamlinehq.com/icons/download/tauri--31088 ↩

14. https://iconbuddy.com/material-icon-theme/folder-src-tauri-open ↩

15. https://dev.to/rain9/tauri5-tray-icon-implementation-and-event-handling-5d1e ↩

16. https://v2.tauri.app/develop/icons/ ↩ ↩² ↩³

17. https://github.com/tauri-apps/tauri/issues/7886 ↩

18. https://tauri.app/v1/guides/features/icons/ ↩ ↩²

19. https://developer.apple.com/design/human-interface-guidelines/app-icons ↩ ↩² ↩³

20. https://pxlnv.com/blog/roundrect-dictator/ ↩

21. https://learn.microsoft.com/en-us/windows/apps/design/style/iconography/app-icon-construction ↩

22. https://learn.microsoft.com/en-us/windows/apps/design/style/iconography/app-icon-design ↩ ↩²

23. https://blog.icons8.com/articles/choosing-the-right-size-and-format-for-icons/ ↩

24. https://stackoverflow.com/questions/67466848/following-apples-app-icon-guidelines-wont-give-corner-radius-to-macos-app-icon ↩

25. https://favicon.im/blog/favicon-electron-tauri-desktop-app-branding ↩

26. https://v2.tauri.app/concept/size/ ↩

27. https://github.com/tauri-apps/tauri/discussions/10999 ↩

28. https://tauri.app/v1/guides/building/app-size/ ↩

29. https://www.youtube.com/watch?v=szibOq-XMKk ↩

30. https://www.reddit.com/r/iOSProgramming/comments/1ajqk3i/whats_the_apple_proprietary_corner_radiusratio/ ↩

tauri svg icon.md

__

The error you're encountering is related to app icon creation during the Tauri bundling process. The build fails with:

Failed to create app icon: `The image format could not be determined`

Root Cause

Tauri cannot determine the format of your app icon file, which typically means the icon file is either missing, corrupted, or in an unsupported format.

Solutions

Check Your Icon Configuration

1. Verify icon file exists and is valid

   • Open src-tauri/tauri.conf.json (or tauri.conf.json)
   • Look for the bundle.icon section
   • Ensure the specified icon path points to a valid image file

2. Use the correct icon format

   • For macOS, Tauri needs a PNG file (typically 1024x1024px or 512x512px)
   • The path is usually something like: "icon": ["icons/icon.png"]

3. Regenerate your icons

   # Install tauri-cli if needed
   cargo install tauri-cli
   
   # Generate icons from a source PNG (1024x1024 recommended)
   cargo tauri icon path/to/your-icon.png

4. Manual icon setup

   • Place a valid PNG icon at src-tauri/icons/icon.png
   • Ensure it's at least 512x512px
   • Update your tauri.conf.json:

   "bundle": {
     "icon": [
       "icons/32x32.png",
       "icons/128x128.png",
       "icons/128x128@2x.png",
       "icons/icon.icns",
       "icons/icon.png"
     ]
   }

5. Quick fix: If you just need to test the build, create a simple temporary icon:

   • Create any valid PNG file (minimum 512x512px)
   • Save it at the path specified in your tauri.conf.json

The build should succeed once Tauri can locate and properly read your icon file.

Create iconset directory

mkdir icon.iconset

Copy/resize your PNG to required sizes

sips -z 16 16 icon_1024.png --out icon.iconset/icon_16x16.png
sips -z 32 32 icon_1024.png --out icon.iconset/icon_16x16@2x.png
sips -z 32 32 icon_1024.png --out icon.iconset/icon_32x32.png
sips -z 64 64 icon_1024.png --out icon.iconset/icon_32x32@2x.png
sips -z 128 128 icon_1024.png --out icon.iconset/icon_128x128.png
sips -z 256 256 icon_1024.png --out icon.iconset/icon_128x128@2x.png
sips -z 256 256 icon_1024.png --out icon.iconset/icon_256x256.png
sips -z 512 512 icon_1024.png --out icon.iconset/icon_256x256@2x.png
sips -z 512 512 icon_1024.png --out icon.iconset/icon_512x512.png
cp icon_1024.png icon.iconset/icon_512x512@2x.png

Generate .icns

iconutil -c icns icon.iconset -o src-tauri/icons/icon.icns

Cleanup

rm -rf icon.iconset

Create iconset directory

mkdir icon.iconset

Copy/resize your PNG to required sizes

sips -z 16 16 icon_1024.png --out icon.iconset/icon_16x16.png
sips -z 32 32 icon_1024.png --out icon.iconset/icon_16x16@2x.png
sips -z 32 32 icon_1024.png --out icon.iconset/icon_32x32.png
sips -z 64 64 icon_1024.png --out icon.iconset/icon_32x32@2x.png
sips -z 128 128 icon_1024.png --out icon.iconset/icon_128x128.png
sips -z 256 256 icon_1024.png --out icon.iconset/icon_128x128@2x.png
sips -z 256 256 icon_1024.png --out icon.iconset/icon_256x256.png
sips -z 512 512 icon_1024.png --out icon.iconset/icon_256x256@2x.png
sips -z 512 512 icon_1024.png --out icon.iconset/icon_512x512.png
cp icon_1024.png icon.iconset/icon_512x512@2x.png

Generate .icns

iconutil -c icns icon.iconset -o src-tauri/icons/icon.icns

Cleanup

rm -rf icon.iconset