•  07-07-2021
  •  | 
  •  

Question

Using converticon.com, I converted my icon png file into an ico file. I placed the following code in my head tags:

<link rel="shortcut icon" href="icons/icon.ico">

I double checked and the file is in the appropriate location. The image has read and write capabilities. I then loaded the page on my browser but I all I get is an empty square box with a dotted border. I'm using XAMPP server. Why isn't the image displaying?

Was it helpful?

Solution

Did you try testing this on multiple browsers? Different browsers handle favicons differently.

Here are some things you could try.

Clear Your Cache

  • Delete all references of your link in your favorites.
  • Clear the file cache in your browser.
  • Shut down all instances of your target browser.
  • Reopen your browser and navigate to your website.

Force Refresh

  • If you are using Mozilla Firefox then you should:
  • Navigate to your website
  • Navigate to the exact location of your fav icon eg. www.site.com/favicon.ico.
  • Right click in browser window and select refresh.

When this is done Firefox is forced to reload the icon instead of the cached version.

Default behaviour of browsers

A second method for specifying a favicon relies on using a predefined URI to identify the image: "/favicon.ico", which is relative to the server root. This method works because some browsers have been programmed to look for favicons using that URI thus I would recommend placing the favicon in the root instead and see if that works. (rename the icon to favicon.ico also).

<link rel="shortcut icon"  href="/favicon.ico" type="image/x-icon"/>

Image Format

At times there is an issue with the format of the favicon. If you are experiencing a problem across all web browser you could convert the favicon to gif or png and see if that solves the problem.

Force browser to update favicon

You can force your browser to update your favicon by passing a URL parameter. Using the ver parameter, you can increment the version number each time you want to force the downloading of new files.

add this to your markup.

<link rel="shortcut icon"  href="/favicon.ico?ver=2.0" type="image/x-icon"/>

OTHER TIPS

In MAMP (assume XAMP is same/similar) you would do the following:

- With MAMP running/open, hit the "Stop" button.
- Then go to: File > Edit Template > Apache httpd.conf
- Comment out lines:
    #Alias /favicon.ico "/Applications/MAMP/bin/favicon.ico"
    #Alias /icons/ "/Applications/MAMP/Library/icons/"
- Place your favicon.ico file in your site's root directory
- Start MAMP

You can probably do all sorts of crazy stuff here. Never worried about favicons during development, personally.

BTW - you don't have to clear your browser's cache, entirely. Just browse to the favicon and refresh it.... localhost:8888/favicon.ico

Just put the favicon at the root of your site, such as "example.com/favicon.ico" (make sure it is named favicon.ico though), and remove the above mentioned link element altogether. Browsers will check this location for a favicon by default if no is present, even IE.

After you do this, be sure to clear your cache when testing.

Try adding type attribute. Example:

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top