A favicon is the small icon that represents your website in places like the browser tab, the bookmarks bar and the history list. It is usually a simplified version of your logo, shrunk down to a square just a handful of pixels wide. Small as it is, it is one of the first brand cues a visitor sees.
Think of it as the badge on a car bonnet. From across the street you cannot read the model name, but you recognise the emblem instantly. A favicon does the same job among twenty open tabs: it lets someone find your website at a glance without reading every title. It sits right beside the page address in the browser window, so it is on screen the entire time someone is on your site.
Because it is rendered so small, detail is the enemy. A clean shape, a single strong colour and good contrast survive the shrink, while a full logo with fine lines and text turns to mush. The classic mistake is reusing a wide horizontal logo, which gets squashed into an unreadable smudge at 16x16. A square mark, a single letter, or a stripped-back symbol almost always works better.
Modern sites supply several files rather than one. A small ICO or PNG for the tab, a 180x180 apple-touch-icon for an iPhone home screen, and a 512x512 for Android and progressive web apps. Browsers pick the right size for each spot, so the icon stays sharp on a Retina laptop and a phone alike. Get this wrong and people see a blank page sheet on a saved bookmark.
At TopDevs we set up the full set of favicon sizes for every build, so a client’s brand stays crisp and recognisable wherever the browser shows it.
