A favicon is the small icon that appears in browser tabs, bookmarks, and history entries next to your website’s name. Despite being tiny, it plays an outsized role in branding and usability — it is how users visually identify your site among dozens of open tabs. Here is everything you need to create and implement a proper favicon.
What Sizes Do You Need?
Favicons are displayed at different sizes depending on the context. The essential sizes to cover are:
- 16 × 16 px — browser tab icon (the most common display size)
- 32 × 32 px — browser tab on high-DPI screens, taskbar shortcuts
- 48 × 48 px — Windows site shortcuts
- 180 × 180 px — Apple Touch icon for iOS home screen bookmarks
- 192 × 192 px — Android Chrome home screen icon
- 512 × 512 px — PWA splash screen icon
The traditional .ico format can bundle multiple sizes into a single file, which is why it remains the standard for the classic favicon.ico in your site root. Modern approaches also include PNG and SVG favicons for sharper rendering.
Favicon Formats Explained
ICO (the classic)
The ICO format has been around since the early days of the web. Its key advantage is that a single .ico file can contain multiple sizes (16px, 32px, 48px) bundled together. Browsers automatically pick the size they need. Place a favicon.ico file in your site’s root directory and most browsers will find it automatically, even without an HTML link tag.
PNG (the modern standard)
PNG favicons are simpler to create and support full alpha transparency. All modern browsers support PNG favicons via the <link> tag. The downside is that each size requires a separate file. For most sites, providing a 32×32 PNG covers the majority of use cases.
SVG (the future-proof choice)
SVG favicons are vector-based, meaning they scale perfectly to any size without pixelation. A single SVG file replaces all the different raster sizes. Browser support for SVG favicons is excellent in 2026 — Chrome, Firefox, Edge, and Safari all support them. SVG is the ideal choice for logos and geometric designs that can be represented as vectors.
How to Add Favicons to Your HTML
The recommended approach in 2026 is to provide an SVG favicon as the primary, with an ICO fallback and an Apple Touch Icon:
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- ICO fallback (legacy browsers) -->
<link rel="icon" href="/favicon.ico" sizes="48x48">
<!-- Apple Touch Icon (iOS home screen) -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
This three-line setup covers virtually every browser and device. Browsers that understand SVG will use the vector icon; older browsers fall back to ICO; and iOS uses the Apple Touch Icon for home screen bookmarks.
Design Tips for Effective Favicons
- Keep it simple. At 16 pixels wide, fine details disappear. Use bold shapes, a single letter, or a simplified version of your logo.
- Use high contrast. The favicon must be legible against both light and dark browser themes. Test on both backgrounds.
- Avoid text (mostly). A single letter or two-letter abbreviation can work, but full words are unreadable at favicon scale.
- Use your brand color. Color is often the fastest way users identify your tab. Make it distinctive.
- Test at actual size. Design at 512px for precision, but always preview at 16px and 32px to make sure it reads clearly when tiny.
Step-by-Step: Creating Your Favicon
- Start with your logo or brand mark. If your logo is complex, simplify it to its most recognizable element — often just the icon or the first letter.
- Create a square version. Favicons are always square. Crop or adapt your design to fit a 1:1 ratio with some padding around the edges.
- Export at high resolution. Save your design as a PNG at 512 × 512 px. This gives you a clean source file to scale down from.
- Generate the ICO file. Use QuickImg’s Image to ICO converter to create a multi-size ICO file from your PNG. It automatically generates 16, 32, 48, and 256px versions bundled into one file.
- Create the Apple Touch Icon. Resize your source image to 180 × 180 px and save as PNG. This is used when someone adds your site to their iOS home screen.
- Add the HTML tags to your page’s
<head>section using the code snippet above.
Testing Your Favicon
After implementing your favicon, test it in multiple browsers (Chrome, Firefox, Safari, Edge) and on both desktop and mobile. Check that it appears correctly in the browser tab, in your bookmarks bar, and when shared as a link on social media. If you are building a PWA, also verify the icon in your manifest.json displays correctly on Android and iOS home screens.
QuickImg’s favicon tools run entirely in your browser. There is no upload, no account needed, and no watermarks. You can generate ICO files and resize images to any dimension instantly and for free.