Conversation
- Added script to generate all favicon sizes from SVG source with proper color handling - Updated apple-touch-icon sizes (180x180 primary, added 152x152 for iPad) - Changed msapplication-TileColor from black to brand blue (#0085E8)
There was a problem hiding this comment.
Pull Request Overview
This PR upgrades the favicon system by introducing a comprehensive set of favicon files for various platforms and devices, along with a shell script to automate favicon generation from an SVG source.
Key Changes:
- Added automated favicon generation script using ImageMagick to create multiple PNG sizes from SVG
- Updated web manifest with additional icon sizes (192x192, 512x512) and SVG variants including maskable icon support
- Refreshed favicon color scheme from
#0C6BFF/#5bbad5to#0085E8with dark mode support using#60A5FA
Reviewed Changes
Copilot reviewed 3 out of 17 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| scripts/generate-favicons.sh | New script to generate PNG and ICO favicons from SVG source using ImageMagick |
| public/static/favicons/site.webmanifest | Updated with new icon sizes, SVG variants, and revised theme colors |
| public/static/favicons/safari-pinned-tab.svg | Refactored with CSS media queries for light/dark mode color adaptation |
| public/static/favicons/favicon.svg | New SVG favicon with adaptive colors for light/dark modes |
| public/static/favicons/icon-maskable.svg | New maskable icon for PWA support with proper safe area background |
| public/static/favicons/*.png | Generated PNG files in various sizes for different platforms (16x16 to 1024x1024) |
| public/static/favicons/favicon.ico | Multi-resolution ICO file combining 16x16, 32x32, and 48x48 sizes |
| app/layout.tsx | Added SVG favicon link and updated apple-touch-icon sizes and theme colors |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| # Paths | ||
| SOURCE_SVG="favicon-source.svg" | ||
| FAVICON_DIR="public/static/favicons" | ||
|
|
There was a problem hiding this comment.
The script creates a favicon directory path but doesn't ensure the directory exists before attempting to write files to it. If the public/static/favicons directory doesn't exist, all the magick commands will fail.
Add a directory creation step before generating the favicons:
mkdir -p "$FAVICON_DIR"| # Ensure favicon directory exists | |
| mkdir -p "$FAVICON_DIR" |
scripts/generate-favicons.sh
Outdated
|
|
||
| echo -e "\n${BLUE}✨ All favicons generated successfully!${NC}" | ||
| echo -e "\nGenerated files:" | ||
| ls -lh "$FAVICON_DIR"/*.png "$FAVICON_DIR"/*.ico | awk '{printf " %s (%s)\n", $9, $5}' |
There was a problem hiding this comment.
The ls command at line 74 will fail if no PNG or ICO files exist in the directory (e.g., if the generation fails partway through). This would cause the script to exit due to set -e on line 5, even though the script is trying to report on what was generated.
Consider using a glob pattern that won't fail on no matches, or adding error handling:
shopt -s nullglob
ls -lh "$FAVICON_DIR"/*.png "$FAVICON_DIR"/*.ico 2>/dev/null | awk '{printf " %s (%s)\n", $9, $5}' || echo " No files found"| ls -lh "$FAVICON_DIR"/*.png "$FAVICON_DIR"/*.ico | awk '{printf " %s (%s)\n", $9, $5}' | |
| shopt -s nullglob | |
| ls -lh "$FAVICON_DIR"/*.png "$FAVICON_DIR"/*.ico 2>/dev/null | awk '{printf " %s (%s)\n", $9, $5}' || echo " No files found" |
scripts/generate-favicons.sh
Outdated
|
|
||
| # Generate PNG favicons with exact sizes for crisp rendering | ||
| echo -e "${GREEN}✓${NC} Generating favicon-16x16.png" | ||
| magick -background none -size 16x16 "$SOURCE_SVG" PNG32:"$FAVICON_DIR/favicon-16x16.png" |
There was a problem hiding this comment.
[nitpick] The magick command syntax may not work correctly on all systems. On some installations, the command is convert instead of magick, and on newer ImageMagick 7+ installations, the syntax should be magick convert or just magick.
Consider adding a check for ImageMagick availability and version at the beginning of the script:
# Check for ImageMagick
if ! command -v magick &> /dev/null && ! command -v convert &> /dev/null; then
echo -e "${RED}Error: ImageMagick is not installed${NC}"
echo "Please install ImageMagick to use this script"
exit 1
fiAlternatively, use a more compatible command format that works with both versions.
There was a problem hiding this comment.
@copilot Only consider on newer ImageMagick 7+ installations
scripts/generate-favicons.sh
Outdated
| SOURCE_SVG="favicon-source.svg" | ||
| FAVICON_DIR="public/static/favicons" | ||
|
|
||
| echo -e "${BLUE}🎨 Generating favicons from ${SOURCE_SVG}...${NC}\n" | ||
|
|
||
| # Create source SVG with explicit colors for ImageMagick | ||
| # (ImageMagick can't process CSS media queries, so we need explicit fill colors) | ||
| echo -e "${GREEN}✓${NC} Creating ${SOURCE_SVG} from favicon.svg" | ||
| cat > "$SOURCE_SVG" << 'EOF' | ||
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"> | ||
| <rect x="2" y="2" width="4" height="28" fill="#0085E8"/> | ||
| <rect x="10" y="2" width="4" height="28" fill="#0085E8"/> | ||
| <rect x="18" y="2" width="4" height="28" fill="#0085E8"/> | ||
| <rect x="6" y="14" width="4" height="4" fill="#0085E8"/> | ||
| <rect x="24" y="14" width="6" height="4" fill="#0085E8"/> | ||
| <rect x="26" y="18" width="4" height="12" fill="#0085E8"/> | ||
| <rect x="26" y="2" width="4" height="8" fill="#0085E8"/> | ||
| <rect x="22" y="2" width="4" height="4" fill="#0085E8"/> | ||
| <rect x="22" y="26" width="4" height="4" fill="#0085E8"/> | ||
| </svg> | ||
| EOF | ||
|
|
||
| # Generate PNG favicons with exact sizes for crisp rendering | ||
| echo -e "${GREEN}✓${NC} Generating favicon-16x16.png" | ||
| magick -background none -size 16x16 "$SOURCE_SVG" PNG32:"$FAVICON_DIR/favicon-16x16.png" | ||
|
|
||
| echo -e "${GREEN}✓${NC} Generating favicon-32x32.png" | ||
| magick -background none -size 32x32 "$SOURCE_SVG" PNG32:"$FAVICON_DIR/favicon-32x32.png" | ||
|
|
||
| echo -e "${GREEN}✓${NC} Generating favicon-48x48.png" | ||
| magick -background none -size 48x48 "$SOURCE_SVG" PNG32:"$FAVICON_DIR/favicon-48x48.png" | ||
|
|
||
| echo -e "${GREEN}✓${NC} Generating android-chrome-96x96.png" | ||
| magick -background none -size 96x96 "$SOURCE_SVG" PNG32:"$FAVICON_DIR/android-chrome-96x96.png" | ||
|
|
||
| echo -e "${GREEN}✓${NC} Generating apple-touch-icon.png (180x180)" | ||
| magick -background none -size 180x180 "$SOURCE_SVG" PNG32:"$FAVICON_DIR/apple-touch-icon.png" | ||
|
|
||
| echo -e "${GREEN}✓${NC} Generating android-chrome-192x192.png" | ||
| magick -background none -size 192x192 "$SOURCE_SVG" PNG32:"$FAVICON_DIR/android-chrome-192x192.png" | ||
|
|
||
| echo -e "${GREEN}✓${NC} Generating android-chrome-512x512.png" | ||
| magick -background none -size 512x512 "$SOURCE_SVG" PNG32:"$FAVICON_DIR/android-chrome-512x512.png" | ||
|
|
||
| echo -e "${GREEN}✓${NC} Generating apple-touch-icon-152x152.png (iPad)" | ||
| magick -background none -size 152x152 "$SOURCE_SVG" PNG32:"$FAVICON_DIR/apple-touch-icon-152x152.png" | ||
|
|
||
| echo -e "${GREEN}✓${NC} Generating mstile-150x150.png" | ||
| magick -background none -size 150x150 "$SOURCE_SVG" PNG32:"$FAVICON_DIR/mstile-150x150.png" | ||
|
|
||
| echo -e "${GREEN}✓${NC} Generating icon-1024.png (future-proof)" | ||
| magick -background none -size 1024x1024 "$SOURCE_SVG" PNG32:"$FAVICON_DIR/icon-1024.png" | ||
|
|
||
| echo -e "${GREEN}✓${NC} Generating favicon.ico (multi-size)" | ||
| magick "$FAVICON_DIR/favicon-16x16.png" \ | ||
| "$FAVICON_DIR/favicon-32x32.png" \ | ||
| "$FAVICON_DIR/favicon-48x48.png" \ | ||
| "$FAVICON_DIR/favicon.ico" | ||
|
|
||
| echo -e "\n${BLUE}✨ All favicons generated successfully!${NC}" | ||
| echo -e "\nGenerated files:" | ||
| ls -lh "$FAVICON_DIR"/*.png "$FAVICON_DIR"/*.ico | awk '{printf " %s (%s)\n", $9, $5}' | ||
|
|
||
| # Cleanup temporary source file | ||
| echo -e "\n${GREEN}✓${NC} Cleaning up ${SOURCE_SVG}" | ||
| rm -f "$SOURCE_SVG" |
There was a problem hiding this comment.
The script creates a temporary favicon-source.svg file in the current directory (where the script is run from), but the cleanup at line 78 only removes it from that location. If the script is run from different directories, this could leave temporary files in various locations or fail to find the source file.
Consider using absolute paths or ensuring the script is always run from the project root:
# At the beginning, after set -e
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
PROJECT_ROOT="$(dirname "$SCRIPT_DIR")"
cd "$PROJECT_ROOT"
# Then use relative paths from project root
SOURCE_SVG="favicon-source.svg"
FAVICON_DIR="public/static/favicons"
Deploying tailwind-nextjs-blog with
|
| Latest commit: |
891485c
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://ef0e3f20.tailwind-nextjs-blog.pages.dev |
| Branch Preview URL: | https://favicon.tailwind-nextjs-blog.pages.dev |
|
@HackingGate I've opened a new pull request, #47, to work on those changes. Once the pull request is ready, I'll request review from you. |
|
@HackingGate I've opened a new pull request, #48, to work on those changes. Once the pull request is ready, I'll request review from you. |
Use any as per For vector formats like SVG, you can use any to indicate scalability. https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest/Reference/icons#sizes Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
|
@HackingGate I've opened a new pull request, #49, to work on those changes. Once the pull request is ready, I'll request review from you. |
|
@HackingGate I've opened a new pull request, #50, to work on those changes. Once the pull request is ready, I'll request review from you. |
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…ing at common sizes
… cleaner scaling to 1024x1024
…th updated avatar padding (10% in 1000x1000)
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 7 out of 23 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| cat > "$SOURCE_SVG" << 'EOF' | ||
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> | ||
| <rect x="1" y="1" width="2" height="14" fill="#0085E8"/> | ||
| <rect x="5" y="1" width="2" height="14" fill="#0085E8"/> | ||
| <rect x="9" y="1" width="2" height="14" fill="#0085E8"/> | ||
| <rect x="3" y="7" width="2" height="2" fill="#0085E8"/> | ||
| <rect x="12" y="7" width="3" height="2" fill="#0085E8"/> | ||
| <rect x="13" y="9" width="2" height="6" fill="#0085E8"/> | ||
| <rect x="13" y="1" width="2" height="4" fill="#0085E8"/> | ||
| <rect x="11" y="1" width="2" height="2" fill="#0085E8"/> | ||
| <rect x="11" y="13" width="2" height="2" fill="#0085E8"/> | ||
| </svg> | ||
| EOF |
There was a problem hiding this comment.
[nitpick] The script creates temporary files (favicon-source.svg and avatar-source.svg) in the project root directory. Consider creating these in a temporary directory (e.g., using mktemp) to avoid cluttering the project root and potential conflicts with other processes.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…ntermediate SVG files with automatic cleanup
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 7 out of 23 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| "purpose": "maskable" | ||
| }, | ||
| { | ||
| "src": "static/favicons/favicon.svg", |
There was a problem hiding this comment.
The icon path should start with a leading slash ('/') to be an absolute path from the site root. Change to '/static/favicons/favicon.svg'.
| "src": "static/favicons/favicon.svg", | |
| "src": "/static/favicons/favicon.svg", |
No description provided.