Latte
6ed0eee514
Enterprise AI Code Review / ai-review (pull_request) Successful in 19s
Components: - Extract ServiceItem component with hover effects - Extract SupportItem component with hover animations - Extract Card component with scroll animations - Extract Section component for consistent layout Enhancements: - Add Intersection Observer for scroll-triggered animations - Implement hover effects on cards, services, and support items - Add PWA manifest (site.webmanifest) - Create SVG OG image placeholder for social sharing - Add comprehensive favicon meta tags (16x16, 32x32, apple-touch-icon) - Respect prefers-reduced-motion for accessibility Files modified: - src/pages/index.astro - Refactored to use new components - src/layouts/BaseLayout.astro - Enhanced favicon and meta tags Files created: - src/components/Card.astro - src/components/Section.astro - src/components/ServiceItem.astro - src/components/SupportItem.astro - public/og-image.svg - public/site.webmanifest - public/FAVICON_INSTRUCTIONS.md Note: PNG favicon variants still need to be generated (see FAVICON_INSTRUCTIONS.md)
52 lines
1.6 KiB
Markdown
52 lines
1.6 KiB
Markdown
# Favicon Generation Instructions
|
|
|
|
The following favicon files are referenced in the site but need to be generated:
|
|
|
|
- `favicon-16x16.png` - 16x16px PNG favicon
|
|
- `favicon-32x32.png` - 32x32px PNG favicon
|
|
- `apple-touch-icon.png` - 180x180px PNG for Apple devices
|
|
- `og-image.png` - 1200x630px PNG for social media sharing (optional, currently using SVG)
|
|
|
|
## How to Generate
|
|
|
|
### Option 1: Use an Online Tool
|
|
Visit https://realfavicongenerator.net/ and upload your source image (coffee emoji or custom design).
|
|
|
|
### Option 2: Use ImageMagick (if available)
|
|
If you have a source PNG image:
|
|
|
|
```bash
|
|
# 16x16
|
|
convert source.png -resize 16x16 favicon-16x16.png
|
|
|
|
# 32x32
|
|
convert source.png -resize 32x32 favicon-32x32.png
|
|
|
|
# Apple touch icon
|
|
convert source.png -resize 180x180 apple-touch-icon.png
|
|
|
|
# OG image
|
|
convert source.png -resize 1200x630 og-image.png
|
|
```
|
|
|
|
### Option 3: Use the SVG favicon
|
|
The current `favicon.svg` (coffee emoji) works in modern browsers. The PNG variants are fallbacks for older browsers and specific platforms.
|
|
|
|
## Current Status
|
|
|
|
- ✅ `favicon.svg` - Exists (coffee emoji)
|
|
- ❌ `favicon-16x16.png` - Needs to be created
|
|
- ❌ `favicon-32x32.png` - Needs to be created
|
|
- ❌ `apple-touch-icon.png` - Needs to be created
|
|
- ✅ `og-image.svg` - Created (SVG placeholder)
|
|
- ⚠️ `og-image.png` - Optional (browsers support SVG, but PNG is more compatible)
|
|
|
|
## Design Recommendations
|
|
|
|
Use the cozy coffee theme colors:
|
|
- Background: `#1a1410` (dark coffee)
|
|
- Accent: `#e8bf8e` (light coffee/cream)
|
|
- Text: `#f4e9d8` (cream)
|
|
|
|
The favicon should be simple and recognizable at small sizes. The coffee emoji ☕ is perfect!
|