So I've never heard about this issue before or come across it so I don't know why its happening, I have a normal favicon link that works on localhost, but does not work on an actual server and it doesn't even get the image in the network tab.
Left tab is the localhost, right tab is the actual server on a domain.
Both sites have the exact same code and file structure, but as you can see the actual website doesn't even recognize that the file needs to be fetched. Any ideas why?
I don't think it will provide any extra value but here is the favicon link tag
<link rel="icon" type="image/x-icon" href="favicon.ico">
Related
enter image description here
enter image description here
I'm working on a local server and trying to add a simple favicon. I have already searched high and low on these forums, and tried everything. I'm not sure what is going wrong.
This is the code I have inserted into the head of my code:
<link href="http://www.canwise.com/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
my favicon image is in the same folder as my html file for this page. I haven't even put it in an images folder.
First of all, please read the typical w3sfoundation example:
W3-Schools - HTML Favicon
Please note, that in this example the path starts with /
The / means, that the icon is relative to the root directory of the webpage. So if you are opening for example:
/subpages/guestbook.php
and your favicon is located at:
/favicon.ico
you also need to write it that way. Otherwise it will try to open:
/subpages/favicon.ico
Please also define the type:
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
You also need to keep in mind, that localhost often works different from an online webpage. Please open the browser developer tools using and look at networking. Clear all and reload the page. You should se an entry, that tries to load the favicon. If it cannot be loaded, you will find the reason there. If it works, you will see a 200 GET (HTTP SUCCESS). If not, the error code will help you find the source of favicon not loading properly.
If you find no entry for the favicon at all, please run your HTML/PHP through one or more linting tools. Sometimes a slight syntax error will result in very specific HTML features breaking. From the picture, your HTML looks good so far.
I am writing a simple webpage located at the root directory of the server with a shortcut icon located at "/favicon.ico", but my browser never requests this favicon.ico. I have included the following in the html:
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
When I open up the network tab of the developer tools, I see the request for 192.168.0.1 (the webpage itself), but no subsequent request for the icon. Clearing the cache and enabling "disable cache" does nothing to change the behavior.
There are no errors appearing in the developer console and everything else seems to be working fine.
Edit:
I updated the link to the following as per the post by Jean-Francois and was still having the same issue:
<link href="favicon.ico" rel="icon" type="image/x-icon"/>
Turns out the issue I had dealt with the caching of the icon as well as the way that I was detecting if the browser was actually requesting the icon.
I was just looking at the network log on chrome to determine if there was a request going out for favicon.ico and Favicon request not showing in network tab of developer toolbars shows that there is an issue with this.
And just doing hard refreshes (by forcing the browser to not use the cache) did not seem to fix the issue either, and the only way that I was able to get all three browsers to make the request was to add a query parameter to the end of the link. The final link tag was:
<link href="favicon.ico?v=1.0" rel="icon" type="image/x-icon"/>
In my index.php file I have:
<link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" />
And in assets/images I have the two files ("favicon-16x16.png" and "favicon-32x32.png"). What am I doing wrong?
Also, when I go to specific pages on my websites and refresh I see the favicon. But it doesn't show on the root page and it only only show on some other pages if I refresh.
Another thing I noticed is that this problem didn't happen when my index.php file was called index.html. However I have to name the file index.php because I'm hosting through Heroku.
The favicon rel should be defined as rel="shortcut icon"like this:
And also make sure the path file is correct for every page. If your root file is in the same directory i.e. inside your assets folder, then the above updated code should work but if your index is outside your assets folder, then you need to change your favicon path file to something like href="assets/images/favicon-32x32.png"
Not sure of what is causing this issue, but here is a checklist:
Use absolute paths, eg. /images/favicon-32x32.png, instead of relative paths, eg. images/favicon-32x32.png. Else you might have issues due to pages in different directories.
Makes sure your links are valid. For example, if your HTML code contains <link rel="icon" type="image/png" href="/images/favicon-16x16.png" sizes="16x16"> and your web site is http://example.com, then type http://example.com/images/favicon-16x16.png in the address bar of your browser: does it displays the icon?
Browsers are very tough regarding favicon caching. If the favicon is not configured correctly, you browser might display it anyway because it cached it during a (successful) previous attempt. Even if the favicon is configured correctly, your browser might not display it, at least immediately, because of failed previous attempts. As a workaround, you can add a kind of version to your URL. For example, <link rel="icon" type="image/png" href="/images/favicon-16x16.png?v=2" sizes="16x16"> and change it whenever you try something else. That will force your browser to consider the picture no matter what it encountered previously.
Because of this same caching issue, you might want to try with another browser, just to make sure your cache is not messing up.
While debugging your favicon, display either your browser's network logs (Firebug with Firefox, Dev tools with Chrome...) and/or your server's logs (eg. access.log with Apache) to understand what's going on. Again, this might reveal the dreadful caching issue: you try many things but your browser won't reload anything.
Browsers can have different behavior in local environments regarding favicon. Are you accessing your files directly, ie. from the file system? If so I suggest you to switch to a web server environment.
I've been banging my head against the wall for hours now trying to get this favicon to work. My site is hosted on Bluehost and I uploaded a favicon.ico file to the public_html folder. It always just shows the default Bluehost logo in both Safari and Chrome. I included the following in the header after all the meta tags:
<link rel="icon" href="favicon.ico" />
<link rel="shortcut icon" href="favicon.ico" />
Have tried icon sizes 16x16 and 32x32, always named favicon.ico, and also tried putting href="http://www.mydomainname.com/favicon.ico" in the tag. I am always clearing the cache before trying to load the site.
If I inspect the page source in Chrome, I see the link for the favicon, and the page source page in Chrome shows the favicon correctly. When I click on the favicon link then try to load the site, the favicon I want flashes briefly before going back to the default Bluehost one.
In case it matters, I just migrated the site from Wordpress and deleted all the "wp" files, but maybe something is left that's screwing it up. Anyone have any other ideas?
I'm not sure if that gets cleared from the cache when you clear the browser cache but what you can try is adding a cache-buster to the path. ex: favicon.ico?ver=20130212
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?
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"/>
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">