# Favicon Directory

This directory contains favicon files for the website. A favicon (favorite icon) is a small icon that appears in various places such as:
- Browser tabs
- Bookmarks
- Mobile home screens when saved as a shortcut

## Recommended Favicon Formats

1. **Basic Favicon (required)**
   - `favicon.ico` (16x16, 32x32)
   - Main favicon file that most browsers look for

2. **Modern PNG Icons**
   - `favicon-16x16.png`
   - `favicon-32x32.png`
   - `favicon-96x96.png`
   - Higher quality than ICO format

3. **Apple Touch Icons**
   - `apple-touch-icon.png` (180x180)
   - `apple-touch-icon-precomposed.png`
   - Used when saving to iOS home screens

4. **Android/Chrome Icons**
   - `android-chrome-192x192.png`
   - `android-chrome-512x512.png`
   - Used for Android home screen shortcuts

## Implementation

Add these meta tags to your HTML head section:

```html
<!-- Basic favicon -->
<link rel="icon" type="image/x-icon" href="/src/assets/favicon/favicon.ico">

<!-- PNG icons -->
<link rel="icon" type="image/png" sizes="16x16" href="/src/assets/favicon/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/src/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/src/assets/favicon/favicon-96x96.png">

<!-- Apple Touch Icons -->
<link rel="apple-touch-icon" sizes="180x180" href="/src/assets/favicon/apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" href="/src/assets/favicon/apple-touch-icon-precomposed.png">

<!-- Android/Chrome -->
<link rel="icon" type="image/png" sizes="192x192" href="/src/assets/favicon/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/src/assets/favicon/android-chrome-512x512.png">
```

## Best Practices

1. **File Formats**
   - Use ICO format for the main favicon.ico
   - Use PNG for all other icons
   - Ensure transparent background when appropriate

2. **Sizing**
   - Create icons at exact required dimensions
   - Don't rely on browser scaling
   - Maintain consistent padding around the icon

3. **Design**
   - Keep the design simple and recognizable at small sizes
   - Test icons at actual size
   - Ensure good contrast

4. **Organization**
   - Keep all favicon files in this directory
   - Use clear, consistent naming
   - Update all formats when making changes
