App Icon Formatter

A web application to format a source image into all required app icon sizes for various platforms (iOS, Android, macOS, watchOS). This project is inspired by the functionality of appicon.co.

Live Demo: https://xcodebn.github.io/app-icon-generator/

Features

• Upload Source Image: Drag and drop or browse to upload your master app icon (recommended: 1024x1024px PNG).
• Platform Selection: Choose which platforms you need icons for (iPhone, iPad, App Store, macOS, watchOS, Android).
• Automatic Resizing: Formats the uploaded image into all standard icon sizes for the selected platforms.
• Contents.json Generation: Automatically creates the Contents.json file for Apple platform icon sets (.appiconset).
• Download All: Package all formatted icons and Contents.json into a single ZIP file, organized by platform and asset catalogs.
• Light/Dark Mode: Theme toggle for user preference.
• Responsive Design: Works across different screen sizes.

How to Run Locally

1. Clone the repository (or download the files):

   git clone https://github.com/xcodebn/app-icon-generator.git
   cd app-icon-generator

2. Open index.html in your browser: Simply open the index.html file in a modern web browser. No build step is required for local development as it uses ES modules and CDNs for dependencies.

Technologies Used

• React 19 (via esm.sh CDN)
• TypeScript
• Tailwind CSS (via CDN)
• JSZip (via CDN for client-side zipping)
• HTML5, CSS3

Attribution

• This project was created by xcodebn.
• Inspired by the excellent service appicon.co. This project is for educational and portfolio purposes and is not affiliated with appicon.co.

GitHub Pages Deployment

This project is set up for automated deployment to GitHub Pages using GitHub Actions.

1. Push to main: Ensure all your latest changes, including the .github/workflows/deploy-gh-pages.yml file, are pushed to the main branch of your GitHub repository (assuming your repository is named app-icon-generator).

2. Configure Repository Settings:

   • Go to your GitHub repository's Settings tab.
   • In the left sidebar, navigate to Pages.
   • Under "Build and deployment", for the Source, select GitHub Actions.

3. Deployment:

   • The GitHub Actions workflow (defined in .github/workflows/deploy-gh-pages.yml) will automatically run.
   • Once the workflow completes successfully, your site will be deployed.
   • The site should become available at https://<your-username>.github.io/app-icon-generator/. (Replace <your-username> with your GitHub username, which should be xcodebn).

   If you've just configured GitHub Pages to use GitHub Actions, the first deployment might be triggered by the next push to main, or you can manually trigger the "Deploy static content to Pages" workflow from the "Actions" tab of your repository.