Centrigon Favicon Studio
Generate production-ready icons with precise control over every pixel
Understanding the favicon
A favicon serves as your site's visual identity across browser tabs, bookmarks, and mobile home screens. Beyond aesthetics, it affects perceived credibility and helps users identify your site among dozens of open tabs. Modern browsers expect multiple sizes: 16×16 for favicon.ico, 32×32 for high-DPI displays, and 180×180 for iOS home screens. The .ico format remains the standard because it packages multiple resolutions into a single file, though many sites now rely on PNG variants for broader compatibility. The maskable area (shown as dashed circle) ensures your icon looks great on all platforms including Android and iOS.
Deployment instructions
After downloading your favicon pack, place the files in your website's root directory. The browser will automatically request /favicon.ico when a page loads. For PNG variants, reference them explicitly in your HTML <head> section using the code below. Test your implementation by hard-refreshing (Ctrl+F5) to bypass cache.
<link rel="icon" type="image/x-icon" href="/favicon.ico"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <meta name="theme-color" content="#000000">
# Standard deployment structure
/var/www/your-site.com/public/
├── favicon.ico # Primary icon (multi-size)
├── favicon-16x16.png # Explicit small size
├── favicon-32x32.png # Explicit medium size
└── apple-touch-icon.png # iOS home screen icon
# Nginx configuration (add to server block)
location = /favicon.ico {
expires 1y;
add_header Cache-Control "public, immutable";
}
Related tools
Before creating your favicon, you may need to prepare your source image. These complementary tools help optimize your workflow: