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
Related
For some reason, the favicon just isn't showing. The website is gracedli.com.
You can see the favicon at gracedli.com/favicon.ico and my code to add it is (currently only on index.html):
<link rel="icon" href="favicon.ico" />
I've cleared the cache and used multiple different browsers, and for the life of me, I can't figure it out. Would love some help on it (everything's written in pure HTML/CSS so you can take a peek at the full code at the link). Thank you so much!
You have put the contents of <head> in <header> instead. Move them into , and that would possibly solve your problem.
Common reasons your Favicon is not showing
Check file path : You need to ensure that your favicon’s file path is correct.
The link of favicon is not at the right location : It is important to place the link to add your favicon in the head section of your webpage.
Syntax errors : A minor syntax error in the link of favicons could result in your favicon not showing.
When favicon file in the root directory, but not linked : Always put the favicon in the root directory, and name it favicon.ico. Almost all modern browsers look up /favicon.ico by default but make sure that you have these links in your head section:
link rel="SHORTCUT ICON" href="favicon.ico" type="image/x-icon" />
link rel=" bookmark" href="favicon.ico" type="image/x-icon" />
Because in many cases Just because the favicon file is in your root directory, it does not mean that it will automatically recognize.
Your browser has cached your site as one without a favicon : May be your browser has ‘saved’ your site as one without a favicon. You need to clear the cache in your browser or use a different browser.
May it helped to solve the issue…
Huge shout out to Timmy Chan (in the comments of the question) for noticing this, but I put my tags in <header> instead of <head>. Once I moved them, it worked!
I had inserted the tag:
<link rel="shortcut icon" href="Survey2016/favicon.ico"/>
This shows the icon in the Firefox browser, but it is not showing the in Chrome.
This is my tag:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
Best practice is to just store the favicon in the root directory – or at least make it accessible there (through a URL rewrite f.e.).
You already did that, so you could remove the tag altogether. This is why you'd do that, you save a line of HTML.
With favorite icons, caching is a big problem. Sometimes opening the favicon directly (by typing /favicon.ico in the address bar) and then hard reloading (Shift+F5 or Shift+Click Reload) helps.
You might be having an old version of chrome which do not support favicon hosted on you local computer. Please host that image to an internet server and use it from that hosting website, that might help you.
OK I am trying to get my favicon working on my site: Hidden for privacy
For some reason it isn't showing. I am using haml and have this in my header...
= favicon_link_tag "favicon.ico"
It is also producing the html...
<link href="/assets/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
I do have a favicon.ico in my assets and I am not seeing any issues in my console. Also when I check the source and click the link for the file, it does find it. I have checked every tutorial possible and it doesn't work. I have also tried Safari, Chrome, and Internet Explorer. Thanks for any help.
The icon file needs to be under public/assets and clear the browser cache if it still not showing up.
For more details: Adding Icon to rails website?
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">
Update
I have just tried "Pinning" my site to the Taskbar again (after removing it) but when I clicked and held down the mouse button on the 16x16px icon inside the address bar (see pic below), you can see my favicon being dragged around with the mouse - so internet explorer has found and got the icon - it's just not displaying it in all the right places! Also updated code below:
As the title suggests, I can't get my favicon to display; in any version of any browser. There is 1 exception, though - which isn't good enough:
IE 9 and IE 10 -
As you can probably see in the screenshot above, the only time I get to see my favicon is after I've added it to my Favorites folder and opened the Favorites Bar. The favicon does not display in the Tab (next to the page title), it does not display in the Taskbar area, and it does not display up the top-left of the browser window if I have "Pinned" my site to the Taskbar.
In every other browser, it simply does not display at all.
I have tried every possible "solution" that I could find online.
Here's the code I have:
<link rel="icon" type="image/x-icon" href="http://www.mysite.com/favicon.ico"><!-- Major Browsers -->
<!--[if IE]><link rel="shortcut icon" href="http://www.mysite.com/favicon.ico"/><![endif]--><!-- Internet Explorer-->
I have also tried all common sizes for the favicon; 16x16, 32x32, 64x64, 128x128 and 256x256 - and I've even tried saving all sizes within the same *.ico file.
I have tried deleting the cache file for *.ico files.
Nothing has worked. The exact same code has previously worked on other sites that I've made. I don't get it. What gives?
I've edited this answer, leaving only solution to problem presented in question.
Use: <link rel="shortcut icon" href="{ICONURL}"/>
Instead of: <link rel="icon" href="{ICONURL}"/>
I had the same problem with my site just now. Drove myself crazy trying to get an favicon.ico file to work. What finally got it working correctly for me in IE 11 (on Windows 7), was to dump the favicon.ico file completely and go with a PNG instead:
<link rel="shortcut icon" href="/favicon-32x32.png" type="image/png"/>
I used a PNG file with a transparency layer. Once I did this and uploaded my page, IE began displaying the icon correctly in the Tabs (and the shortcuts/bookmarks) on the very next page refresh. I double checked and it looks like Chrome and Firefox are cool with this as well.
I use
<link rel="icon"
type="image/ico"
href="Link Goes Here">
If putting the favicon in a folder:
<link rel="icon"
type="image/ico"
herf="Folder/Subfolder"
Make sure the code is in the head tag.
Make sure the image is in the .ico format; It won't work otherwise.