# PWA Icon Generation

## Overview

This script generates PWA icons from the LogShip brand mark at multiple sizes required for Progressive Web Apps.

## Files

- `icon.png` - Source image, 512x512 (located in `/public`; the blue LogShip pixel-"L" mark, from `reference/images/favicon_io/android-chrome-512x512.png`)
- `generate-icons.js` - Script to generate the PNG icon set from the source

## Generated Icons

The script generates the following icon sizes:
- 72x72px
- 96x96px
- 128x128px
- 144x144px
- 152x152px
- 192x192px
- 384x384px
- 512x512px

Plus **maskable** variants (mark at ~66% scale on a white square, so Android's
circular/squircle icon mask never clips the artwork; referenced with
`purpose: 'maskable'` in `server/routes/manifest.json.get.ts`):
- icon-maskable-192x192.png
- icon-maskable-512x512.png

## Usage

### Automatic (during build)

Icons are automatically generated during the build process:

```bash
npm run build
```

### Manual Generation

To regenerate icons manually:

```bash
npm run generate:icons
```

Or directly:

```bash
node scripts/generate-icons.js
```

## Customizing the Icon

To customize the app icon:

1. Replace `/public/icon.png` (512x512 PNG)
2. Run `npm run generate:icons`
3. All PNG icons will be regenerated

## Requirements

- Node.js 18+
- `sharp` package (installed as devDependency)

## Icon Design Tips

The current icon is the LogShip brand mark:
- Blue (#1E5BFF) pixel-grid "L" on transparent background
- Full favicon set (favicon.ico, favicon-16x16/32x32, apple-touch-icon) lives in
  `/public` directly, sourced from `reference/images/favicon_io/`

For best results:
- Use simple, bold designs
- Ensure good contrast
- Test at small sizes (72x72)
- Avoid fine details that don't scale well