# PWA Apple Icon Converter

Professional PWA icon conversion toolkit for converting apple images to optimized PNG formats for iOS, Android, and web applications.

## 📁 Directory Structure

```
ADP/pwa-icons/
├── src/                    # Conversion scripts
│   ├── convert-apple-icon.js      # Node.js converter (recommended)
│   ├── convert_apple.py           # Python converter
│   └── generate_icons.sh          # Bash script converter
├── public/                 # Generated assets & web app
│   ├── converter.html      # Browser-based converter
│   ├── manifest.json       # Sample PWA manifest
│   └── html-head-snippet.html  # HTML integration code
├── docs/                   # Documentation
│   ├── QUICK_START.md      # Quick reference guide
│   ├── PWA_ICON_GUIDE.md   # Complete documentation
│   └── APPLE_CONVERTER_README.txt
└── package-icon-converter.json    # NPM dependencies
```

## 🚀 Quick Start

### Option 1: Browser-Based (Easiest - No Installation)

```bash
# Open the converter in your browser
open ADP/pwa-icons/public/converter.html

# Drag & drop your apple image
# Click "Generate All Sizes"
# Download all 11 PNG files
```

### Option 2: Node.js (Recommended)

```bash
# Install Sharp
npm install sharp

# Run the converter
node ADP/pwa-icons/src/convert-apple-icon.js apple.jpg ADP/pwa-icons/public/icons

# Creates 11 optimized PNG files
```

### Option 3: Python

```bash
# Install Pillow
pip install Pillow

# Run the converter
python3 ADP/pwa-icons/src/convert_apple.py apple.jpg
```

### Option 4: Bash Script

```bash
# Uses system ImageMagick
bash ADP/pwa-icons/src/generate_icons.sh apple.jpg
```

## 📦 Generated Icon Sizes (11 PNGs)

### PWA Web Standard Sizes
- **512×512** - Splash screens, PWA install prompts
- **384×384** - High-resolution tablets
- **256×256** - Medium density displays
- **192×192** - Android launcher icons, Chrome Web Store

### iOS Home Screen Icons
- **180×180** - iPhone 6+, 7+, 8+, X, 11, 12, 13, 14, 15 Pro Max
- **167×167** - iPad Pro (10.5-inch), iPad Pro (12.9-inch)
- **152×152** - iPad mini, iPad Air, iPad (3rd gen+)
- **120×120** - iPhone 6, 7, 8, SE

### Fallback Sizes
- **96×96** - Android XHDPI
- **64×64** - Chrome Web Store alternative
- **32×32** - Browser favicon

## 🔌 Integration

### Step 1: Copy Generated Icons

```bash
# After converting, copy icons to your project
cp ADP/pwa-icons/public/*.png your-app/public/icons/
```

### Step 2: Add HTML Meta Tags

Copy content from `ADP/pwa-icons/public/html-head-snippet.html` to your `<head>`:

```html
<meta name="theme-color" content="#000000">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">

<link rel="apple-touch-icon" href="/icons/apple-touch-icon-180.png">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon-167.png" sizes="167x167">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon-152.png" sizes="152x152">

<link rel="manifest" href="/manifest.json">

<link rel="icon" type="image/png" href="/icons/apple-192.png">
```

### Step 3: Update manifest.json

```json
{
  "icons": [
    {"src": "/icons/apple-192.png", "sizes": "192x192", "type": "image/png"},
    {"src": "/icons/apple-512.png", "sizes": "512x512", "type": "image/png"}
  ]
}
```

## 📚 Documentation

- **[QUICK_START.md](docs/QUICK_START.md)** - Quick reference guide
- **[PWA_ICON_GUIDE.md](docs/PWA_ICON_GUIDE.md)** - Complete specs & best practices
- **[APPLE_CONVERTER_README.txt](docs/APPLE_CONVERTER_README.txt)** - Setup guide

## ✨ Features

✓ High-quality LANCZOS resampling  
✓ Progressive PNG encoding  
✓ Optimized file sizes  
✓ Maintains aspect ratio (centered crop)  
✓ iOS home screen support  
✓ Android launcher icon support  
✓ PWA manifest templates  
✓ HTML integration snippets  
✓ Multiple conversion methods  
✓ No external dependencies (HTML version)  

## ✅ Testing

### iOS
1. Open Safari on iPhone/iPad
2. Navigate to your website
3. Tap Share button
4. Select "Add to Home Screen"
5. Your icon appears

### Android
1. Open Chrome on Android phone
2. Navigate to your website
3. Tap Menu → "Install app"
4. Your icon appears

### Desktop PWA
1. Open in Chrome/Edge
2. Click install icon (top right)
3. Icon appears in taskbar/desktop

## 🛠 Dependencies

| Method | Dependency | Status |
|--------|-----------|--------|
| Node.js | Sharp | `npm install sharp` |
| Python | Pillow | `pip install Pillow` |
| Bash | ImageMagick | ✅ Installed (v6.9.11) |
| Browser | None | ✅ Works offline |

## 📞 Support

For more information, see:
- [MDN: Web App Manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest)
- [web.dev: PWA Installation](https://web.dev/add-web-app-to-home-screen/)
- [Apple: Web App Configuration](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/)

---

**Generated:** February 9, 2026  
**Location:** `ADP/pwa-icons/`  
**Ready to use! 🚀**
