Written by David Kim — Frontend Developer & WordPress consultant. Built GenFavicon after too many sketchy generator sites. More about me →
A client once asked me why their website looked "unprofessional." I checked their SEO, their copy, their design — everything was fine. Then I looked at the browser tab. The default globe icon. No favicon. That tiny 16×16 pixel image was the reason their site felt incomplete. Here's everything you need to know.
A favicon (short for "favorite icon") is the small icon that appears in your browser tab, bookmarks bar, and search history next to a website's name. It's typically 16×16 or 32×32 pixels. Despite its tiny size, it's one of the most visible branding elements on your site — every open tab shows it.
The term comes from Internet Explorer 5 (1999), which let users save "favorites" — and each favorite had an icon. Hence: favorite + icon = favicon. The name stuck even though nobody says "favorites" anymore.
In 2026, the MDN documentation recommends PNG for favicons. The old .ico format still works everywhere but is technically unnecessary — every modern browser supports PNG favicons. Apple devices use a separate apple-touch-icon (180×180 PNG) for home screen bookmarks.
I use PNG for everything. One less format to think about, and the file size difference is negligible at these dimensions.
After generating your favicon with GenFavicon, upload the files to your site root and add this to your <head>:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Written by David Kim — Frontend Developer & WordPress consultant. Built GenFavicon after too many sketchy generator sites. More about me →