3

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?

thank_you
  • 11,001
  • 19
  • 101
  • 185
  • Can you share a screenshot of your folder structure and the code also? – Ahsan Khurshid Oct 22 '12 at 06:48
  • Sorry for the no reply. I found out that the browser was not reading the format, though it was in an ico format. I'll have to try a new icon to see if it works. – thank_you Oct 24 '12 at 07:59

4 Answers4

5

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"/>
Joel Dean
  • 2,444
  • 5
  • 32
  • 50
  • I've loaded the page onto Pagoda Box and the icon still does not work in either Chrome or Firefox. I'll check the rest of your notes though and if you're right I'll give you credit. – thank_you Oct 17 '12 at 02:01
  • The image format was wrong. Found out by going to the direct URL of the ico. Your answer was the most detailed AND had the correct answer. Hence you receive credit. – thank_you Oct 24 '12 at 08:01
4

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

Dawson
  • 7,567
  • 1
  • 26
  • 25
  • 1
    On OSX You have to edit the config manually - /Applications/MAMP/conf/apache/httpd.conf – MarcF Jul 07 '14 at 12:38
  • It's not OSX, it's MAMP vs MAMP Pro. My answer is specific to MAMP Pro, tho the httpd.conf needs an edit either way. You get there via the app or the file system – Dawson Jul 07 '14 at 17:31
1

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.

Joe Cochran
  • 76
  • 6
0

Try adding type attribute. Example:

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
Jon
  • 976
  • 8
  • 23