138 lines
3.7 KiB
Markdown
138 lines
3.7 KiB
Markdown
# App Icon Creation Guide
|
|
|
|
Your icon system is now configured! You need to create **two icon images** and place them in this directory.
|
|
|
|
## Required Files
|
|
|
|
1. **app_icon.png** (1024x1024px) - Main icon for iOS
|
|
2. **app_icon_foreground.png** (1024x1024px) - Foreground for Android adaptive icon
|
|
|
|
## Design Recommendations
|
|
|
|
**Theme Colors:**
|
|
- Primary Cyan: `#0891B2` (already set as adaptive background)
|
|
- Success Green: `#22C55E`
|
|
- White: `#FFFFFF`
|
|
|
|
**Style:** Clean, minimalistic, book-themed
|
|
|
|
---
|
|
|
|
## Option 1: Free Online Icon Makers (Easiest)
|
|
|
|
### A) Canva (Recommended)
|
|
1. Go to [canva.com](https://www.canva.com)
|
|
2. Create custom size: 1024x1024px
|
|
3. Use their free templates or design from scratch:
|
|
- Search "book icon" or "library icon"
|
|
- Change background color to `#0891B2`
|
|
- Add white book symbol/icon
|
|
4. Download as PNG (both with and without background)
|
|
|
|
### B) Figma (More Control)
|
|
1. Go to [figma.com](https://www.figma.com) (free account)
|
|
2. Create 1024x1024 frame
|
|
3. Design suggestions:
|
|
- **Simple:** Rectangle with rounded corners (#0891B2) + white book emoji 📚
|
|
- **Modern:** Gradient (cyan to teal) + minimalist book outline
|
|
- **Detailed:** Stack of 3 books with slight perspective
|
|
|
|
### C) App Icon Generators
|
|
- [appicon.co](https://appicon.co) - Upload an image, generates all sizes
|
|
- [makeappicon.com](https://makeappicon.com) - Similar service
|
|
- [iconkitchen.com](https://icon.kitchen) - Android Studio's web tool
|
|
|
|
---
|
|
|
|
## Option 2: Quick Placeholder (For Testing)
|
|
|
|
Create a simple solid color icon with text:
|
|
|
|
1. Use any image editor (even Preview on Mac)
|
|
2. Create 1024x1024px canvas
|
|
3. Fill with `#0891B2`
|
|
4. Add white text: "📚" or "BL" (Book Library)
|
|
5. Save as `app_icon.png` and `app_icon_foreground.png`
|
|
|
|
---
|
|
|
|
## Option 3: AI-Generated Icon
|
|
|
|
Use AI tools to generate:
|
|
- **ChatGPT/DALL-E**: "Create a minimalistic app icon for a book library app, cyan background (#0891B2), white book symbol, 1024x1024"
|
|
- **Midjourney**: "minimalist book library app icon, cyan gradient, white geometric book, flat design, 1024x1024"
|
|
|
|
---
|
|
|
|
## What Each File Does
|
|
|
|
### app_icon.png
|
|
- Used for iOS (all sizes)
|
|
- Used as fallback for older Android devices
|
|
- Should be a **complete icon** (background + foreground)
|
|
|
|
### app_icon_foreground.png
|
|
- Android's adaptive icon foreground layer
|
|
- Should be **transparent background** with just the icon symbol
|
|
- Android will apply the cyan background automatically
|
|
- Keep important elements in the "safe zone" (center ~66% of canvas)
|
|
|
|
---
|
|
|
|
## Once You Have Your Icons
|
|
|
|
1. Save both PNG files in this directory:
|
|
- `assets/icon/app_icon.png`
|
|
- `assets/icon/app_icon_foreground.png`
|
|
|
|
2. Run these commands:
|
|
```bash
|
|
flutter pub get
|
|
dart run flutter_launcher_icons
|
|
```
|
|
|
|
3. Verify the icons were generated:
|
|
```bash
|
|
# Check Android icons
|
|
ls android/app/src/main/res/mipmap-*/
|
|
|
|
# Check iOS icons
|
|
ls ios/Runner/Assets.xcassets/AppIcon.appiconset/
|
|
```
|
|
|
|
4. Build and test:
|
|
```bash
|
|
flutter run --profile
|
|
```
|
|
|
|
---
|
|
|
|
## Design Tips
|
|
|
|
✅ **DO:**
|
|
- Use simple, recognizable shapes
|
|
- Ensure good contrast (white on cyan works great)
|
|
- Test at small sizes (looks good as 40x40?)
|
|
- Keep foreground centered for adaptive icons
|
|
- Use vector shapes when possible
|
|
|
|
❌ **DON'T:**
|
|
- Use gradients that look muddy when small
|
|
- Add tiny text (won't be readable)
|
|
- Use too many colors (stick to 2-3)
|
|
- Put important details near edges (Android will crop)
|
|
|
|
---
|
|
|
|
## Quick Start Suggestion
|
|
|
|
**Easiest path:**
|
|
1. Open Canva → Custom 1024x1024
|
|
2. Add cyan (#0891B2) background
|
|
3. Add white book icon from their library
|
|
4. Export as PNG → save as `app_icon.png`
|
|
5. Remove background → export → save as `app_icon_foreground.png`
|
|
6. Run `dart run flutter_launcher_icons`
|
|
|
|
**Total time: ~5 minutes**
|