eonist/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..md

      
    Raw
  

              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³
⁶⁷⁸⁹¹⁰¹¹¹²¹³¹⁴¹⁵

⁂

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 ¹⁹²⁰


iOS
System applies rounded corner masking automatically ¹⁹


Windows
No rounded corners applied — icons are displayed as-is ²¹


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²⁴
²⁵²⁶²⁷²⁸²⁹³⁰

⁂
Footnotes


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


## tauri svg icon.md

      
    Raw
  

              tauri svg icon.md
            
          
    __
Platform	Corner Handling
macOS	The system automatically applies rounded corners that match other UI elements ¹⁹²⁰
iOS	System applies rounded corner masking automatically ¹⁹
Windows	No rounded corners applied — icons are displayed as-is ²¹
Linux	Varies by desktop environment; typically no automatic rounding
No results found