Favicon Generator
Upload one image, get a complete favicon package — all sizes, apple-touch-icon, and HTML snippet
Drag & drop your image here
or
PNG · SVG · JPG · WebP · Square image recommended · Min 512×512 for best quality
Favicon Package Contents
What Is a Favicon?
A favicon (short for "favorites icon") is the small image that appears in browser tabs, bookmarks, history lists, and address bars to identify your website. Originally a 16×16 pixel ICO file introduced by Internet Explorer 5 in 1999, favicons have evolved into a family of icons supporting dozens of contexts — from iPhone home screens to Android splash screens to Windows taskbar pins. Modern best practice is to serve multiple PNG files at different sizes and let the browser or operating system pick the most appropriate one.
Why You Need Multiple Favicon Sizes
Different devices and contexts demand different favicon dimensions:
- 16×16 and 32×32: The classic browser tab and bookmark favicon, rendered at high resolution on modern displays.
- 48×48 and 64×64: Used by Windows when a user pins your site to the taskbar or Start menu as a web shortcut.
- 180×180 (apple-touch-icon): Displayed on the iPhone and iPad home screen when a user adds your site with "Add to Home Screen."
- 192×192 and 512×512: Required by Android Chrome and Progressive Web App (PWA) manifests. The 512px version is used as the splash screen icon.
How to Add Favicons to Your Website
Place all downloaded favicon files in your website's root directory (or a /favicons/ subfolder), then add the HTML snippet generated above to the <head> of every page. The rel="icon" tags tell modern browsers which PNG to use; the apple-touch-icon tag handles iOS specifically. For maximum compatibility, also rename one copy of your 32×32 PNG to favicon.ico — older browsers fall back to looking for this file automatically.
Favicon Design Best Practices
- Start with at least 512×512: Downscaling from a large source image produces much sharper results than upscaling a small one. Our generator always downscales from your source.
- Use a square image: Favicons are always displayed in square containers. Non-square images are center-cropped, which may cut off important parts of your logo.
- Keep it simple: At 16×16 pixels, intricate details disappear. A simplified version of your logo — an initial, a symbol, or a bold shape — works far better than a scaled-down full wordmark.
- Transparent background: PNG supports transparency, which makes your icon look native on any browser theme (light or dark). Avoid white backgrounds that look harsh in dark mode.
- Test in browser tab: After uploading your favicon, shrink your browser window and see how the icon looks at real tab size. What looks good at 512px can look muddy at 16px.