mirror of
https://github.com/thecyberlearn/quantum-website-2026.git
synced 2026-08-18 19:03:18 +00:00
63 lines
1.7 KiB
Markdown
63 lines
1.7 KiB
Markdown
# Favicon Setup Instructions
|
|
|
|
## Current Status ✅
|
|
- ✅ **logo.png** - Main logo (already copied)
|
|
- ✅ **og-image.png** - Social media preview (already copied)
|
|
- ❌ **Favicons** - Need to be generated
|
|
|
|
## Quick Favicon Generation
|
|
|
|
### Option 1: Online Generator (Recommended)
|
|
1. Go to [favicon.io/favicon-converter](https://favicon.io/favicon-converter/)
|
|
2. Upload the `logo.png` file
|
|
3. Download the generated favicon package
|
|
4. Extract and copy these files to this directory:
|
|
- `favicon.ico`
|
|
- `apple-touch-icon.png`
|
|
- `favicon-32x32.png`
|
|
- `favicon-16x16.png`
|
|
|
|
### Option 2: Use Real Favicon Generator
|
|
1. Go to [realfavicongenerator.net](https://realfavicongenerator.net/)
|
|
2. Upload the `logo.png` file
|
|
3. Customize settings if needed
|
|
4. Download and extract files to this directory
|
|
|
|
### Option 3: Simple Favicon (Quick Fix)
|
|
If you want to deploy immediately without custom favicons:
|
|
|
|
1. Find any `.ico` file on your computer
|
|
2. Rename it to `favicon.ico`
|
|
3. Copy it to this directory
|
|
|
|
## Required Files
|
|
|
|
After generation, you should have:
|
|
```
|
|
static-website/img/
|
|
├── logo.png ✅
|
|
├── og-image.png ✅
|
|
├── favicon.ico ⚠️
|
|
├── apple-touch-icon.png ⚠️
|
|
├── favicon-32x32.png ⚠️
|
|
└── favicon-16x16.png ⚠️
|
|
```
|
|
|
|
## Update HTML (if needed)
|
|
|
|
The HTML files are already configured to use these paths:
|
|
- `favicon.ico`
|
|
- `apple-touch-icon.png`
|
|
- `favicon-32x32.png`
|
|
- `favicon-16x16.png`
|
|
|
|
No changes needed in HTML once files are added.
|
|
|
|
## Deploy Without Favicons (Optional)
|
|
|
|
If you want to deploy immediately:
|
|
1. Remove favicon links from HTML `<head>` sections
|
|
2. Deploy the site
|
|
3. Add favicons later and redeploy
|
|
|
|
The site will work perfectly without favicons (just won't show custom icons in browser tabs). |