Technical Specification: Free Online App Icon Resizer

Overview

A high-performance, browser-native utility for developers and designers to generate comprehensive sets of app icons from a single source image. The app prioritizes speed, privacy, and ease of use, operating entirely client-side.

Core Features

• Drag-and-Drop Uploader: Intuitive file selection area with visual feedback.
• Real-Time Preview: Instant rendering of the source image to verify clarity.
• Platform Presets: Selective toggles for iOS, Android, and PWA icon sets.
• Zip Export: Batch download all generated icons neatly organized in folder structures via JSZip.
• In-Memory Processing: Uses HTML5 Canvas API for high-fidelity resizing without server interaction.

UI/UX Design

• Aesthetic: Modern, clean, vibrant light-mode interface. Use inter font-family with soft drop shadows and rounded corners (border-radius: 12px).
• Color Palette:
  • Background: #f8fafc (Cool Gray 50)
  • Cards: #ffffff
  • Primary: #2563eb (Blue 600)
  • Text: #1e293b (Slate 800)
  • Border/Muted: #e2e8f0 (Slate 200)
• Layout:
  • Header: Simple title and one-sentence explanation.
  • Main Area: Divided into two columns on desktop; single column on mobile. Left: Input/Controls. Right: Preview & Download.
  • Loading States: Smooth progress bars during batch generation.

Technical Implementation Directives

• Architecture: Single HTML file containing <style> and <script> tags.
• Sandbox Compatibility:
  • DO NOT use localStorage, sessionStorage, or Cookies. State must be handled by JS objects.
  • Avoid pop-ups. If success/error messaging is needed, use custom DOM elements (toasts) that fade in/out.
• Performance: Implement requestAnimationFrame for smooth UI updates during image processing.
• External Libraries (CDN only):
  • Tailwind CSS (via CDN) for styling.
  • JSZip (via CDN) for bundling exported icons.
  • Lucide Icons (via CDN) for UI icons.
• Responsiveness: Use CSS Grid and Flexbox to ensure the layout adapts smoothly from mobile devices to desktop browsers.

Interaction Workflow

1. User drags image onto the Drop Zone.
2. App validates file type and dimensions.
3. User checks checkboxes for target platforms (iOS/Android/PWA).
4. User clicks "Generate Icons".
5. The app loops through target resolutions, draws them to a hidden canvas, and adds them to a JSZip object.
6. On completion, the app triggers a browser-native download of the .zip file.