How to Generate Favicons from Images for Every Platform
A favicon (short for "favorite icon") is the small icon that appears in browser tabs, bookmarks, and address bars. But modern websites need more than one icon — different platforms and devices expect different sizes and formats. This guide explains how to generate a complete favicon set from a single source image for every platform.
Why Favicons Matter
- Brand recognition — Users identify your site by the icon in their tab bar
- Professional appearance — A missing favicon looks unfinished
- Bookmark visibility — Icons make bookmarks easy to scan
- Mobile home screen — Android and iOS use favicon-sized icons when users add your site to their home screen
- Social sharing — Some platforms use favicons in link previews
Standard Favicon Sizes
| File Name | Size | Platform | Purpose |
|---|---|---|---|
favicon.ico |
16×16, 32×32 | All browsers | Legacy support, tab icon |
favicon-16x16.png |
16×16 | Desktop browsers | Small tab icon |
favicon-32x32.png |
32×32 | Desktop browsers | Tab icon, taskbar |
apple-touch-icon.png |
180×180 | iOS | Home screen, Safari |
apple-touch-icon-152x152.png |
152×152 | iOS (iPad) | Home screen |
android-chrome-192x192.png |
192×192 | Android Chrome | Home screen, splash |
android-chrome-512x512.png |
512×512 | Android Chrome | Splash screen |
mstile-150x150.png |
150×150 | Windows | Tile icon |
safari-pinned-tab.svg |
SVG | Safari | Pinned tab icon |
favicon.svg |
SVG | Modern browsers | Vector favicon |
Online Favicon Generator
The Favicon Generator tool on Help2Code creates all standard favicon sizes from a single uploaded image — entirely in your browser with no server upload.
Features
- Generates all standard sizes from a single source image
- Downloads individual sizes or all as a ZIP archive
- Includes ready-to-use HTML
<link>tags - Square source images produce the best results
- 100% client-side — your image never leaves your device
How to Use
- Upload a square image (PNG, JPEG, WebP, or SVG)
- Preview all generated sizes
- Click download individual sizes or "Download All as ZIP"
- Copy the provided HTML snippet into your
<head>
HTML Integration
Place these <link> tags in the <head> section of your HTML:
<!-- Primary favicon -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<!-- Apple touch icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android Chrome -->
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">
<!-- Windows tile -->
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-150x150.png">
<!-- Safari pinned tab -->
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#333333">
<!-- Theme color -->
<meta name="theme-color" content="#ffffff">
Best Practices
- Start with a square source — Non-square images will be cropped or distorted
- Use high resolution — At least 512×512 pixels to scale down cleanly
- Keep it simple — Detailed logos don't read well at 16×16 pixels
- Test on all platforms — What looks good on desktop may not work on mobile
- Include a favicon.ico — Some legacy systems still require it
- Set cache headers — Favicons are requested frequently; cache them long-term
Code Examples
Python: Generate Favicon Sizes with Pillow
from PIL import Image
from pathlib import Path
def generate_favicons(source_path: str, output_dir: str):
Path(output_dir).mkdir(exist_ok=True)
sizes = {
'favicon-16x16.png': 16,
'favicon-32x32.png': 32,
'favicon-48x48.png': 48,
'apple-touch-icon.png': 180,
'apple-touch-icon-152x152.png': 152,
'android-chrome-192x192.png': 192,
'android-chrome-512x512.png': 512,
'mstile-150x150.png': 150,
}
with Image.open(source_path) as img:
# Ensure square
size = min(img.size)
img = img.crop((0, 0, size, size))
for filename, target_size in sizes.items():
resized = img.resize((target_size, target_size), Image.LANCZOS)
resized.save(Path(output_dir) / filename)
generate_favicons('logo.png', 'favicons/')
Python: Generate .ico File
from PIL import Image
def generate_ico(source_path: str, output_path: str):
with Image.open(source_path) as img:
size = min(img.size)
img = img.crop((0, 0, size, size))
# .ico files typically contain 16×16 and 32×32
img_16 = img.resize((16, 16), Image.LANCZOS)
img_32 = img.resize((32, 32), Image.LANCZOS)
img_32.save(output_path, format='ICO', sizes=[(16, 16), (32, 32)])
generate_ico('logo.png', 'favicon.ico')
JavaScript (Node.js): Generate Favicons with Sharp
const sharp = require('sharp');
const fs = require('fs');
const path = require('path');
async function generateFavicons(source, outputDir) {
fs.mkdirSync(outputDir, { recursive: true });
const sizes = [
{ name: 'favicon-16x16.png', size: 16 },
{ name: 'favicon-32x32.png', size: 32 },
{ name: 'favicon-48x48.png', size: 48 },
{ name: 'apple-touch-icon.png', size: 180 },
{ name: 'apple-touch-icon-152x152.png', size: 152 },
{ name: 'android-chrome-192x192.png', size: 192 },
{ name: 'android-chrome-512x512.png', size: 512 },
{ name: 'mstile-150x150.png', size: 150 },
];
const metadata = await sharp(source).metadata();
const size = Math.min(metadata.width, metadata.height);
// Crop to square center
const left = Math.round((metadata.width - size) / 2);
const top = Math.round((metadata.height - size) / 2);
for (const { name, size: targetSize } of sizes) {
await sharp(source)
.extract({ left, top, width: size, height: size })
.resize(targetSize, targetSize)
.png()
.toFile(path.join(outputDir, name));
}
}
generateFavicons('logo.png', './favicons');
SVG Favicon
Modern browsers support SVG favicons, which scale perfectly at any size:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect width="100" height="100" rx="20" fill="#2563eb"/>
<text x="50" y="68" text-anchor="middle" font-size="60"
font-family="Arial" fill="white" font-weight="bold">H</text>
</svg>
<!-- In your HTML head -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
PHP: Favicon Generation
function generateFavicons(string $sourcePath, string $outputDir): void {
if (!is_dir($outputDir)) mkdir($outputDir, 0755, true);
$sizes = [
'favicon-16x16.png' => 16,
'favicon-32x32.png' => 32,
'apple-touch-icon.png' => 180,
'android-chrome-192x192.png' => 192,
'android-chrome-512x512.png' => 512,
];
$src = imagecreatefromstring(file_get_contents($sourcePath));
$srcW = imagesx($src);
$srcH = imagesy($src);
$min = min($srcW, $srcH);
// Crop to center square
$square = imagecreatetruecolor($min, $min);
imagecopy($square, $src, 0, 0, (int)(($srcW - $min) / 2), (int)(($srcH - $min) / 2), $min, $min);
foreach ($sizes as $filename => $size) {
$resized = imagecreatetruecolor($size, $size);
imagecopyresampled($resized, $square, 0, 0, 0, 0, $size, $size, $min, $min);
imagepng($resized, "$outputDir/$filename");
imagedestroy($resized);
}
imagedestroy($square);
imagedestroy($src);
}
generateFavicons('logo.png', 'favicons');
Command Line: ImageMagick
# Generate multiple sizes in one command
convert logo.png -resize 16x16 favicon-16x16.png
convert logo.png -resize 32x32 favicon-32x32.png
convert logo.png -resize 180x180 apple-touch-icon.png
convert logo.png -resize 192x192 android-chrome-192x192.png
convert logo.png -resize 512x512 android-chrome-512x512.png
# Generate .ico with multiple sizes
convert logo.png -resize 16x16 -resize 32x32 favicon.ico
Automated Build Script
Add favicon generation to your build process:
{
"scripts": {
"favicons": "node scripts/generate-favicons.js"
}
}
// scripts/generate-favicons.js
const { execSync } = require('child_process');
const sizes = [
'favicon-16x16.png', 'favicon-32x32.png',
'apple-touch-icon.png', 'android-chrome-192x192.png',
'android-chrome-512x512.png'
];
const source = process.argv[2] || 'public/logo.png';
const outputDir = 'public/favicons';
sizes.forEach(file => {
const px = file.match(/(\d+)/)?.[0] || '32';
execSync(`mkdir -p ${outputDir}`);
execSync(`convert ${source} -resize ${px}x${px} ${outputDir}/${file}`);
});
Testing Your Favicons
- Check browser tab — Open your site in Chrome, Firefox, Safari, and Edge
- Bookmark your site — Confirm the icon appears in bookmarks
- Add to iOS home screen — Use Safari's "Add to Home Screen"
- Add to Android home screen — Chrome's "Add to Home Screen"
- Windows taskbar — Pin your site to the taskbar
- Favicon checker tools — Use online validators to verify all sizes are present
Troubleshooting
| Problem | Cause | Fix |
|---|---|---|
| Favicon doesn't appear | Browser caching | Hard refresh (Ctrl+Shift+R) |
| Wrong icon shown | Multiple conflicting favicon declarations | Remove duplicate <link> tags |
| iOS icon is blurry | Source is too small | Use at least 180×180 source |
| .ico looks pixelated | Only 16×16 was included | Include 32×32 in the .ico |
| SVG favicon not loading | Server doesn't serve SVG with correct MIME type | Add image/svg+xml MIME type |
| Android icon has white background | Missing background color | Set theme-color and provide 512×512 PNG |
Conclusion
A complete favicon set ensures your website looks professional across every platform and device. The Favicon Generator tool creates all standard sizes from a single image in your browser with no upload needed. For automated workflows, the code examples above let you integrate favicon generation into your build process for consistent, up-to-date icons on every deployment.
