What Is Favicon?
A favicon (short for 'favourite icon') is the small icon associated with a website, displayed in browser tabs, bookmark lists, browser history, and search results. Originally a simple 16×16px ICO file, modern favicons require multiple sizes and formats to display correctly across all devices, browsers, and contexts — from 16px browser tabs to 180px iOS home screen icons.
Modern favicon requirements
The minimal modern favicon setup: `favicon.ico` (16×16 and 32×32, for legacy browsers), `favicon.svg` (vector, scales to any size — Chrome 80+, Firefox 83+), `apple-touch-icon.png` (180×180px for iOS home screen), `android-chrome-192x192.png` and `android-chrome-512x512.png` (for Android), and a `site.webmanifest` file referencing the Android icons. Reference them in `<head>`: `<link rel='icon' href='/favicon.svg' type='image/svg+xml'>`.
Favicon design principles
Favicons appear at 16×16px in browser tabs — this is tiny. Design must be recognisable at small size: use a monogram (first letter of brand), simple icon, or simplified logo mark. Avoid complex illustrations that become unreadable at 16px. Use your brand colour as the background if using a letter/icon. Test your favicon at actual 16px size before finalising.
Favicons and PWA
Progressive Web Apps (PWAs) require icons in multiple sizes defined in the web app manifest (site.webmanifest). The manifest references icon files and their sizes — when a user installs the PWA to their home screen, the appropriate icon size is used. Favicon generators (realfavicongenerator.net) automate the creation of all required icon sizes from a single source image.
Favicon & Canvas Builder
canvasbuilder.co uses the Next.js App Router favicon system with SVG, ICO, and Apple Touch Icon variants — serving the correct format automatically to each browser and device.
Try Canvas Builder →