Website favicon files to prepare before launching a new domain
0
0
Checking Your Favicon File Format and Size First
Before a new domain goes live, the favicon file needs to be in a format browsers can read reliably. The most common and widely supported format is ICO, though PNG files also work on modern browsers. A 32×32 pixel size covers most use cases, while a 16×16 version helps older browsers render the icon correctly. Preparing only one file makes a 32×32 PNG a safe starting point, but including both sizes in an ICO file avoids display gaps on older systems.
Check the file extension and pixel dimensions before uploading. An incorrectly named file or a size above 48×48 pixels may cause the browser to ignore the favicon entirely. A blurry or missing icon after launch points to the file format or size as the first place to look. Saving the file as favicon.ico in the root directory gives the widest compatibility without extra code.
Placing the Favicon File in the Correct Directory
The simplest and most reliable placement is the root directory of your domain, for example example.com/favicon.ico . Most browsers check this location automatically when they load the site, so no extra HTML tag is needed. Placing the file in a subfolder requires a <link> tag in the <head> section of every page, which increases maintenance work and the chance of missing a page.
After uploading the file, open an incognito window and visit your domain. Type /favicon.ico at the end of the URL to confirm the file loads directly. A 404 error or a blank page indicates the file is either missing or in the wrong folder. Correcting the file location before launch prevents visitors from seeing the default browser icon instead of your brand icon.
Comparing Favicon Display Across Browsers and Devices
Different browsers and devices handle favicon files in slightly different ways. ICO files work on all desktop browsers, while PNG files may fail on older versions of Internet Explorer or Safari. Testing on at least two different browsers and one mobile device catches format issues before real visitors see a missing icon.
A favicon that appears correctly on one browser but not another usually points to the file format as the cause. A missing icon on mobile Safari often requires a separate 180×180 PNG apple-touch-icon file for the bookmark icon.
| Browser or Device | What to Check | Next Action |
|---|---|---|
| Desktop Chrome or Edge | Tab icon next to the page title | Clear browser cache and reload the page |
| Mobile Safari (iPhone) | Bookmark icon when adding to home screen | Add a 180×180 PNG apple-touch-icon file |
| Desktop Firefox | Address bar icon and tab icon | Confirm the file is ICO or 32×32 PNG |
Verifying the Favicon After Domain Propagation
DNS changes for a new domain can take several hours to propagate. During that time, a favicon file uploaded to the root directory may not load for all visitors. Wait until the domain resolves consistently before testing the favicon across multiple devices. Testing too early may cause a temporary DNS cache to show the default icon even though the file is correct. After propagation is complete, use a favicon checker tool or simply open the site in a private browsing session on a different network. A still-missing icon means checking that the file is named exactly favicon.ico with no extra characters or uppercase letters.
Some servers are case-sensitive, so Favicon.ico or favicon.Ico may fail. Correcting the filename and clearing the server cache usually solves the issue.
