Skip to content

Upgrade Favicon#46

Merged
HackingGate merged 13 commits intomainfrom
favicon
Nov 16, 2025
Merged

Upgrade Favicon#46
HackingGate merged 13 commits intomainfrom
favicon

Conversation

@HackingGate
Copy link
Owner

No description provided.

- 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)
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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/#5bbad5 to #0085E8 with 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"

Copy link

Copilot AI Nov 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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"
Suggested change
# Ensure favicon directory exists
mkdir -p "$FAVICON_DIR"

Copilot uses AI. Check for mistakes.
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot
Let it fail if folder not found.


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}'
Copy link

Copilot AI Nov 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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"
Suggested change
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"

Copilot uses AI. Check for mistakes.
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot
Let it fail if not found


# 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"
Copy link

Copilot AI Nov 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[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
fi

Alternatively, use a more compatible command format that works with both versions.

Copilot uses AI. Check for mistakes.
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot Only consider on newer ImageMagick 7+ installations

Comment on lines 13 to 78
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"
Copy link

Copilot AI Nov 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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"

Copilot uses AI. Check for mistakes.
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot Implemented

@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Nov 15, 2025

Deploying tailwind-nextjs-blog with  Cloudflare Pages  Cloudflare Pages

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

View logs

Copy link

Copilot AI commented Nov 16, 2025

@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.

Copy link

Copilot AI commented Nov 16, 2025

@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.

HackingGate and others added 2 commits November 16, 2025 12:58
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>
Copy link

Copilot AI commented Nov 16, 2025

@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.

Copy link

Copilot AI commented Nov 16, 2025

@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.

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment on lines +27 to +39
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
Copy link

Copilot AI Nov 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[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.

Copilot uses AI. Check for mistakes.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…ntermediate SVG files with automatic cleanup
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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",
Copy link

Copilot AI Nov 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The icon path should start with a leading slash ('/') to be an absolute path from the site root. Change to '/static/favicons/favicon.svg'.

Suggested change
"src": "static/favicons/favicon.svg",
"src": "/static/favicons/favicon.svg",

Copilot uses AI. Check for mistakes.
@HackingGate HackingGate merged commit de07d40 into main Nov 16, 2025
8 checks passed
@HackingGate HackingGate deleted the favicon branch November 16, 2025 06:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants