A browser icon, commonly called a favicon, is the small square image that appears in your browser tab, address bar, bookmark list, and history to visually identify a website. It’s a tiny but functional branding marker that helps users instantly recognize your site among many open tabs, without reading text.
Why your site needs a browser icon
When a user has a dozen tabs open, the favicon is the fastest visual cue to locate your page. A clear, recognizable icon builds trust, reinforces your brand at a glance, and makes navigation feel more professional, especially for returning visitors who rely on that small graphic to jump back to your content.
Favicon file formats and modern sizes
Browsers support several image formats for favicons, but not all are equal. The table below shows which formats work where, and the exact pixel sizes you should prepare for different contexts.
| Format | Common use | Required sizes (px) |
|---|---|---|
| ICO | Legacy browser tabs (Chrome, Edge, Firefox) | 16x16, 32x32, 48x48 (all inside one .ico file) |
| PNG | Modern tabs, Google Search results | 32x32 (minimum), 48x48+ recommended for search |
| SVG | Scalable vector icon for modern browsers | Any (use 32x32 viewBox) |
| GIF / JPEG / BMP | Fallback for older browsers | 16x16 or 32x32 |
| PNG (Android) | Chrome home screen shortcuts | 192x192 |
| Apple Touch Icon | iOS home screen bookmarks | 180x180 (also 152x152 for iPad, 120x120 for older iPhones) |
How to create and design a favicon
Design your icon in any graphic editor (Photoshop, GIMP, or online tools like Favicon.io or Canva). Start with a 64x64 or 128x128 canvas so you can scale down cleanly. Keep the design extremely simple: a single logo mark, a bold letter, or a minimal symbol that remains legible at 16 pixels. Use high contrast between the foreground and background, avoid thin lines and gradients that blur at small sizes. After designing, export a square PNG with a transparent background, then generate the .ico file (which can contain multiple sizes) using a favicon generator. Test your icon on both light and dark browser themes to ensure it stays visible.
How to add a favicon to your website
Upload your favicon file (either .ico or .png) to your website's root directory, for example, public_html/favicon.ico. Then, in the <head> section of your HTML, add the following line to reference it:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
For PNG favicons, use:
<link rel="icon" type="image/png" href="/favicon.png">
To support Apple devices, add a separate touch icon link:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Place these tags before any other <link> tags in the head. If you’re using a CMS like WordPress, you can install a favicon plugin or edit your theme’s header.php directly.
How to update or change an existing favicon
To change your favicon, create a new icon file (following the design guidelines above) and replace the old file in your root directory. Then, update the <link rel="icon"> tag in your HTML if the filename or path changed. Browsers aggressively cache favicons, so simply replacing the file won’t show the update immediately. After uploading the new icon, clear your browser’s cached images and files, in Chrome or Edge, go to Settings > Privacy and security > Clear browsing data, check “Cached images and files,” and click “Clear now.” Then reload your site. Expect propagation delays of a few hours to a few days, as some browsers and CDNs cache the old icon longer. To speed things up, you can also append a version query string to the link tag (e.g., href="/favicon.ico?v=2") to force browsers to fetch the new file.
Troubleshooting: when your new favicon won't show up
If your favicon still doesn’t appear after clearing your cache, follow these steps. In Chrome or Edge, open edge://settings/privacy (or chrome://settings/privacy), choose “Clear browsing data,” select “Cached images and files,” and click “Clear now.” If you’re testing on a live server, ensure the file is actually accessible at the URL you referenced, try opening yoursite.com/favicon.ico directly in a browser. For users who want to customize a site’s icon locally (not on their own website), note that modern browsers don’t have a built-in feature to change individual favicons. Instead, you’ll need a third-party browser extension, for example, a bookmark favicon changer, to override the icon on your own device. If you’re specifically trying to change Safari favorites icons, you’ll need to use a dedicated Safari extension, as the browser doesn’t expose that setting natively.
