A favicon (short for 'favourites icon') is the small image that appears in browser tabs, bookmarks, address bars, and search results. Despite its small size, it is an essential branding element.
The favicon is often the first visual branding a visitor sees. In a browser with multiple tabs open, users identify your site by its favicon before they read the title. It builds brand recognition at a glance.
Search results may display favicons next to your listing. Bookmarked pages use favicons as visual identifiers. Without one, browsers show a generic globe icon � a missed branding opportunity that signals an incomplete website.
The traditional favicon is a 16x16 or 32x32 pixel .ico file placed in your website root at /favicon.ico. Modern browsers also support PNG favicons referenced via a link tag in the page head.
For best results, create multiple sizes: 16x16 (browser tab), 32x32 (taskbar), 192x192 (Android / Chrome shortcut), and 180x180 (Apple touch icon). Reference them from your HTML head.
No favicon � The browser requests /favicon.ico by default. If it does not exist, you get a 404 error that wastes a request and shows a generic icon.
Low quality or stretched � A blurry or distorted favicon looks unprofessional. Use a simple, recognisable version of your logo.
Missing Apple touch icon � When users save your site to their iPhone home screen, an Apple touch icon is used. Without one, iOS generates a tiny screenshot of your page, which rarely looks good.
Wrong format � Browsers prefer .ico for the root-level favicon. Using .png alone may not cover all use cases.
Our free audit covers security, SEO, performance, mobile, design, and content.
Get your free audit