Favicon Documentation

Everything you need to know about creating and using favicons for your website.

What is a Favicon?

A favicon (short for "favorite icon") is a small icon associated with a website or web page. Browsers display favicons in various places, including:

Browser tabs
Bookmarks/favorites list
Browser history
Mobile home screen when saved as a shortcut

favicon.ico

Your Website - Browser Tab

Recommended Favicon Sizes

Modern websites typically need multiple favicon sizes to support different devices and contexts. Here are the recommended sizes:

16×16

Browser tabs

32×32

Shortcut icons

48×48

Windows site icons

64×64

Windows site icons

128×128

Chrome Web Store

256×256

High-DPI displays

FaviX generates a single .ico file that contains all the sizes you select, making it easy to support all browsers and devices with a single file.

How to Add a Favicon to Your Website

Once you've generated your favicon.ico file with FaviX, you need to add it to your website. Here's how:

1. Place the favicon.ico file in your website's root directory

Upload the favicon.ico file to your web server, typically in the root directory of your website.

2. Add the HTML code to your website

Add the following code to the <head> section of your HTML:

<link rel="icon" href="/favicon.ico" sizes="any">

3. Additional meta tags for modern browsers (optional)

For more comprehensive support, you can also add these additional tags:

<!-- Basic favicon -->
<link rel="icon" href="/favicon.ico" sizes="any">

<!-- Apple Touch Icon (for iOS devices) -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- For 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">

<!-- Web App Manifest (for PWAs) -->
<link rel="manifest" href="/site.webmanifest">

For most websites, the basic favicon.ico file is sufficient. The additional tags are recommended for progressive web apps and sites that need to support specific devices.

Favicon Best Practices

Keep your design simple and recognizable at small sizes
Ensure good contrast so your icon is visible on different backgrounds
Test your favicon on both light and dark browser themes
Include at least the 16×16 and 32×32 sizes for basic browser support
Use transparent backgrounds when appropriate
Regularly update your favicon when you rebrand your website

Technical Details

ICO File Format

The ICO file format is a container format that can store multiple images at different resolutions. This makes it perfect for favicons, as browsers can choose the most appropriate size for the context.

ICO File Structure:

Header (6 bytes)
Directory entries (16 bytes each)
Image data (PNG or BMP format)