A comprehensive web application for reviewing and previewing logos in various contexts and sizes.

• Drag & Drop: Simply drag your logo file onto the upload area
• Click to Upload: Click the upload button to browse and select files
• File Validation: Supports PNG, JPG, JPEG, SVG, and ICO files
• Size Limit: Maximum file size of 10MB

Preview your logo in different sizes to ensure it looks good at any scale:

• Large (200px): Perfect for headers and main branding
• Medium (100px): Great for sidebars and secondary placements
• Small (50px): Ideal for navigation bars and compact layouts
• Tiny (24px): Perfect for icons and minimal spaces

See how your logo looks on apparel:

• White T-Shirt:
  • Center placement (large size)
  • Left chest icon placement
• Black T-Shirt:
  • Center placement (large size)
  • Left chest icon placement

Preview your logo in grayscale to ensure it works without color:

• All four size variations (Large, Medium, Small, Tiny)
• Automatic grayscale filter applied
• Helps ensure logo readability in monochrome contexts

See how your logo appears as a website favicon:

• Realistic browser mockup
• Shows logo in the address bar at 16px size
• Helps evaluate logo clarity at very small sizes

├── server.ts          # HTTP server (Hono-based)
├── index.html         # Main application interface
├── script.js          # Client-side JavaScript logic
└── README.md          # This documentation

• Frontend: HTML5, CSS3, JavaScript (ES6+)
• Styling: TailwindCSS via CDN
• Backend: Hono framework on Val Town
• File Handling: FileReader API for client-side processing

• Modern browsers with FileReader API support
• Drag and drop functionality
• CSS Grid and Flexbox support

1. Access the Tool: Navigate to the application URL
2. Upload Logo: Either drag and drop your logo file or click to browse
3. Review Previews: Scroll through the different preview sections
4. Evaluate: Check how your logo performs across all contexts

• Supported Formats: PNG, JPG, JPEG, SVG, ICO
• Maximum Size: 10MB
• Recommended: High-resolution files for best preview quality

1. Size Variations: Four different sizes with clear labeling
2. T-Shirt Mockups: Realistic apparel previews on white and black shirts
3. Black & White: Grayscale versions to test monochrome compatibility
4. Favicon: Browser mockup showing how the logo appears as a website icon

This tool helps designers, marketers, and business owners evaluate their logos across multiple use cases before finalizing their brand identity.