Favicon Versioning Guide
Master favicon version control: cache busting techniques, Git workflow, deployment automation, change tracking strategies, and rollback procedures.
Why Favicon Versioning Matters
Cache Issues
Browsers cache aggressively
Change Tracking
Track brand evolution
Rollback
Quick revert if needed
Cache Busting Strategies
Force Browser Updates
1. Query String Versioning (Recommended)
<!-- Simple version number -->
<link rel="icon" href="/favicon.ico?v=2.0.1">
<link rel="apple-touch-icon" href="/apple-touch-icon.png?v=2.0.1">
<!-- Timestamp -->
<link rel="icon" href="/favicon.ico?v=1704835200">
<!-- Build number -->
<link rel="icon" href="/favicon.ico?v=build-456">
<!-- Git commit hash -->
<link rel="icon" href="/favicon.ico?v=a1b2c3d">2. File Hash Versioning
<!-- Content hash in filename -->
<link rel="icon" href="/favicon.a1b2c3d4.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.e5f6g7h8.png">
<!-- Version in path -->
<link rel="icon" href="/v2/favicon.ico">
<link rel="apple-touch-icon" href="/v2/apple-touch-icon.png">3. Build-Time Versioning (Webpack Example)
// webpack.config.js
const package = require('./package.json');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html',
templateParameters: {
faviconVersion: package.version
}
})
]
};
// src/index.html
<link rel="icon" href="/favicon.ico?v=<%= faviconVersion %>">4. Environment Variable Approach
// .env
VITE_FAVICON_VERSION=2.0.1
// index.html (Vite)
<link rel="icon" href="/favicon.ico?v=%VITE_FAVICON_VERSION%">
// React component
const faviconVersion = import.meta.env.VITE_FAVICON_VERSION;
<link rel="icon" href={`/favicon.ico?v=${faviconVersion}`} />Git Workflow & Version Control
Source Control Best Practices
.gitignore Configuration
# Keep source favicons in version control
!public/favicon.ico
!public/favicon*.png
!public/apple-touch-icon*.png
!public/android-chrome*.png
!public/site.webmanifest
# Ignore build/optimized versions
dist/favicons/
build/favicons/
.cache/favicons/
# Ignore temporary files
*.tmp
*.bak
.DS_StoreCommit Message Convention
# Feature: New favicon
git commit -m "feat(favicon): update brand colors to new palette"
# Fix: Correct issue
git commit -m "fix(favicon): correct iOS touch icon transparency"
# Optimization
git commit -m "perf(favicon): optimize PNG file sizes (50% reduction)"
# Chore: Maintenance
git commit -m "chore(favicon): regenerate all sizes from new source"Semantic Versioning for Favicons
# MAJOR.MINOR.PATCH
# 1.0.0 - Initial release
# 1.0.1 - Patch: Fix iOS transparency
# 1.1.0 - Minor: Add dark mode variant
# 2.0.0 - Major: Complete brand redesign
# package.json
{
"faviconVersion": "2.1.0"
}Tag Releases
git tag -a favicon-v2.0.0 -m "Major favicon redesign"
git push origin favicon-v2.0.0
# List all favicon tags
git tag -l "favicon-v*"
# Checkout specific version
git checkout favicon-v1.0.0Deployment Automation
CI/CD Integration
GitHub Actions Workflow
name: Deploy Favicons
on:
push:
paths:
- 'public/favicons/**'
- 'src/assets/favicon-source.svg'
branches:
- main
jobs:
deploy-favicons:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Generate version hash
id: version
run: echo "hash=$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT
- name: Upload to S3 with versioning
env:
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
run: |
aws s3 sync public/favicons/ \
s3://my-bucket/favicons/ \
--cache-control "public, max-age=31536000, immutable"
- name: Invalidate CDN cache
run: |
aws cloudfront create-invalidation \
--distribution-id ${{ secrets.CLOUDFRONT_DIST_ID }} \
--paths "/favicons/*"
- name: Update version file
run: |
echo "${{ steps.version.outputs.hash }}" > public/favicon-version.txt
git config user.name "GitHub Actions"
git config user.email "actions@github.com"
git add public/favicon-version.txt
git commit -m "chore: update favicon version to ${{ steps.version.outputs.hash }}"
git pushNetlify Deployment Script
# netlify.toml
[build]
command = "npm run build"
publish = "dist"
[build.environment]
FAVICON_VERSION = "2.0.1"
[[headers]]
for = "/favicon*.png"
[headers.values]
Cache-Control = "public, max-age=31536000, immutable"
[[headers]]
for = "/apple-touch-icon*.png"
[headers.values]
Cache-Control = "public, max-age=31536000, immutable"Automatic Version Bumping
// scripts/bump-favicon-version.js
const fs = require('fs');
const package = require('../package.json');
// Increment patch version
const [major, minor, patch] = package.faviconVersion.split('.');
const newVersion = `${major}.${minor}.${parseInt(patch) + 1}`;
package.faviconVersion = newVersion;
fs.writeFileSync('package.json', JSON.stringify(package, null, 2));
console.log(`Favicon version bumped to ${newVersion}`);Changelog & Documentation
Track Changes Over Time
FAVICON_CHANGELOG.md Example
# Favicon Changelog
## [2.0.0] - 2024-01-15
### Changed
- **BREAKING:** Complete brand redesign
- Updated color palette from blue to purple
- Modernized icon shape (rounded corners)
- All files regenerated from new source
### Added
- Dark mode SVG variant
- Maskable icon for Android
### Technical
- File sizes reduced by 40%
- Improved transparency handling
## [1.1.0] - 2023-12-10
### Added
- Added Windows tile icons
- browserconfig.xml for Windows 8+
### Fixed
- iOS transparency issue on dark backgrounds
## [1.0.0] - 2023-11-01
### Initial Release
- Standard favicon.ico
- Apple touch icons (all sizes)
- Android chrome icons
- Web manifestFavicon Versioning Best Practices
? Best Practices
- Always use cache busting (query strings)
- Keep favicons in version control (Git)
- Use semantic versioning
- Maintain detailed changelog
- Automate deployment with CI/CD
- Tag releases in Git
- Test before deploying to production
- Document rollback procedures
? Common Mistakes
- Not using cache busting at all
- Overwriting files without versioning
- No changelog or documentation
- Missing rollback strategy
- Not testing after deployment
- Ignoring CDN cache invalidation
- Manual deployment processes
- No backup of previous versions
Generate Versioned Favicons
Create professional favicon packages with proper version control
Generate Favicons