What is a Favicon?
A favicon is the small icon displayed in a browser tab next to the page title. Learn what favicons are, what formats they use, and how to create one for your website.
A favicon (short for 'favorite icon') is the small image displayed in your browser tab, bookmark bar, and browser history next to the page title. It helps users quickly identify and navigate between open tabs.
Where Favicons Appear
A favicon shows up in several places: • Browser tab — next to the page title • Bookmark bar — when you save a page • Browser history — in the URL list • Home screen shortcut — when saving a website to mobile • Search engine results — some engines show favicons next to results
Favicon Sizes & Formats
The original favicon was 16×16 pixels in .ico format. Modern websites need multiple sizes: • 16×16 — browser tab • 32×32 — Windows taskbar, shortcuts • 48×48 — Windows desktop • 180×180 — Apple touch icon (iPhone home screen) • 192×192, 512×512 — Android home screen (PWA) PNG format is now widely supported and preferred over the older .ico format.
How to Add a Favicon to Your Website
1. Create a square image (at least 512×512 recommended) 2. Generate the required sizes 3. Add the favicon files to your website's root directory 4. Link them in your HTML <head>: <link rel="icon" href="/favicon.ico"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
Try it yourself
Generate Favicon FilesAbout Favicons
The favicon was introduced by Internet Explorer 5 in 1999. Originally it was always a 16×16 .ico file named favicon.ico. With the rise of mobile devices and high-DPI displays, websites now need many sizes. Modern build tools and frameworks automate favicon generation.
FAQ
- What size should a favicon be?
- Start with a 512×512 PNG image, then generate smaller sizes from it: 16×16, 32×32, 48×48 for browser tabs, and 180×180 for Apple devices.
- What format should a favicon be?
- PNG is the modern standard. The classic .ico format is still supported for backward compatibility. SVG favicons are also gaining support in modern browsers.
- Why is my favicon not showing up?
- Common causes: browser caching (try a hard refresh with Ctrl+Shift+R), wrong file path, missing <link> tag in HTML, or the image is not square.