The default favicon.ico that gets included in a WebMatrix product is added in _SiteLayout.cshtml like so:
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
That icon does not fit my app, so I converted a jpg I created at http://www.coolutils.com/Online/Image-Converter/.
I renamed favicon.ico to YourMotherWearsCombatBoots.ico and renamed the image I had converted to favicon.ico (after adding it to my project).
I thought that my new .ico file would get used in the browser's tab for the page/site. But, alas, no! The old .ico file is making like the Raven of Poe's poem - it simply will nevermore go away. What's up with that?
Note: If trying this out using firefox or IE as the browser doesn't work (currently testing with Chrome), I am going to bountify this question for 50 points ASAP. If I get an answer prior to that, I will award the bounty post-answer.
Clear the cache :)
As long as the path to the file (including the filename) is correct, and it is a .ico file, it should render.
That having been said, try not using ~
maybe, since it is only an html tag and it uses /
to find the root of the site.
I've done this many many times, and never had any issue with any ico in any browser.
Honestly the cache is the only thing I can think of.
----------------------------------UPDATE----------------------------------
I'm expanding my answer to show an example. This is a scenario I have just recently set up and it worked perfect first time (as it does for me every time).
The HTML:
<link href="/Images/Site_Icon/Scribe.ico" rel="shortcut icon" type="image/x-icon" />
The Directory Structure:
The Result:
Since I've been using icons for my sites, I have not noticed that there need be anything else. As far as I know this is all that should be involved with getting this to work as expected.
If this still does not help, do the following:
(Ctrl+Shift+Del)
clear the cache (especially for Chrome) and try again (if you're gonna debug in Chrome, you might as well get used to doing this regularly [okay, actually it doesn't matter what browser you use, you'll always have to do this when something doesn't render the way you expect, so that you'll know it's not a caching issue]).Other than that, I can't think of anything else it could be.