My favicon isn't working properly. It is located in the root of my project. Do I need the absolute path to my icon?
e.g.: "C:/Users/Damian/www/favicon.ico" Or should I type instead:
<LINK REL="SHORTCUT ICON" HREF="favicon.ico" >
Is that enough? I have cleared my browser's cookies.
If your favicon is in the same directory as the page:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
Otherwise use this
<link rel="icon" href="your_url/favicon.ico" type="image/x-icon" />
Relative paths are fine, as long as the path is relative to the document you are serving.
Have a look at the below link- it may help.
http://www.w3.org/2005/10/howto-favicon
What browser are you using? Keep in mind that it is up to the browser to display the icon, and different browsers may have different ways of how the expect the icon to be shown in the HTML. If you are sure your HTML is correct, it may pay to try a different browser.
The favicon needs only the relative path. It is working fine, but it is a matter of browser's cache. Try to clear your history and cache then try again. Or if you use localhost to access your website, try to use 127.0.0.1
Related
New to web dev. I have a favicon that works locally but doesn't want to behave on server. The following is my favicon tag in the head tag:
<link rel="icon" type="image/png" href="../favicon/microphone-icon-192783/microphone-icon-16-192783.ico"/>
Am I missing something for the server?
Old question but for anyone who experienced the same issue as me..
Spent about an hour trying to figure out why i was experiencing the same problem. Clearing history, updating code didnt work.
Restarted chrome browser and worked straight away ahah
Just upload the favicon to your root directory and give it the name "favicon.ico". By putting it in your root directory, you'll have a default favicon for all the pages in your domain.
Depending on the browser you use, you can add the following two lines into the head section of your pages.
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
Make an PNG file and set it as the favicon in an index.html page so the cache is overwritten:
<html><head><link rel='icon' type='image/png' href='favicon.png' /></head></html>
It works.
Try uploading the icon somewhere on the web, and link it to that image url. I remember having issues with accessing a background-image on local machine, but if I was trying to link it from the web, I had no problems. I think this should do the trick. Didn't use it though.
You could try removing the ../ like this.
<link rel="icon" type="image/png" href="favicon/microphone-icon-192783/microphone-icon-16-192783.ico"/>
but could we have the file path according to the server root if this doesnt soleve it? its easier to find a solution that way :)
You could try <link href="/favicon.ico" rel="shortcut icon">, where '/' stands for absolute root path... (root direcory)
Make sure the folder having the icon image on the server has the permissions set to 0755.
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
If this still won't update the favicon on the webpage, RESTART THE BROWSER
This question already has answers here:
HTML Favicon.ico won't show on Google Chrome
(17 answers)
Closed 8 years ago.
I have a favicon icon which isn't showing up in Chrome (I'm not sure about other browsers as I only use Chrome) but the strange thing is if I type the path to the icon in the URL bar it shows up!
Why doesn't the icon appear?
Cache
Clear your cache. http://support.google.com/chrome/bin/answer.py?hl=en&answer=95582 And test another browser.
Some where able to get an updated favicon by adding an URL parameter: ?v=1 after the link href which changes the resource link and therefore loads the favicon without cache (thanks #Stanislav).
<link rel="icon" type="image/x-icon" href="favicon.ico?v=2" />
Favicon Usage
How did you import the favicon? How you should add it.
Normal favicon:
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
PNG/GIF favicon:
<link rel="icon" type="image/gif" href="favicon.gif" />
<link rel="icon" type="image/png" href="favicon.png" />
in the <head> Tag.
Chrome local problem
Another thing could be the problem that chrome can't display favicons, if it's local (not uploaded to a webserver). Only if the file/icon would be in the downloads directory chrome is allowed to load this data - more information about this can be found here: local (file://) website favicon works in Firefox, not in Chrome or Safari- why?
Renaming
Try to rename it from favicon.{whatever} to {yourfaviconname}.{whatever} but I would suggest you to still have the normal favicon. This has solved my issue on IE.
Base64 approach
Found another solution for this which works great! I simply added my favicon as Base64 Encoded Image directly inside the tag like this:
<link href="data:image/x-icon;base64,AAABAAIAEBAAAAEAIABoBAAAJgAAACAgAAABACAAqBAAAI4EAAAoAAAAEAAAACAAAAABACAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AIaDgv+Gg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv////8A////AP///wD///8A////AP///wCGg4L/////AP///wD///8A////AP///wD///8A////AP///wCGg4L/////AP///wD///8A////AP///wD///8AhoOC/////wCGg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv////8AhoOC/////wD///8A////AP///wD///8A////AIaDgv////8A////AP///wD///8A////AP///wD///8A////AIaDgv////8A////AP///wD///8A////AP///wCGg4L/////AHCMqP9wjKj/cIyo/3CMqP9wjKj/cIyo/////wCGg4L/////AP///wD///8A////AP///wD///8AhoOC/////wBTlsIAU5bCAFOWwgBTlsIAU5bCM1OWwnP///8AhoOC/////wD///8A////AP///wD///8A////AP///wD///8AU5bCBlOWwndTlsLHU5bC+FOWwv1TlsLR////AP///wD///8A////AP///wD///8A////AP///wD///8A////AFOWwvtTlsLuU5bCu1OWwlc2k9cANpPXqjaT19H///8A////AP///wD///8A////AP///wD///8A////AP///wBTlsIGNpPXADaT1wA2k9dINpPX8TaT1+40ktpDH4r2tB+K9hL///8A////AP///wD///8A////AP///wD///8A////ADaT1wY2k9e7NpPX/TaT16AfivYGH4r23R+K9u4tg/WQLoL1mP///wD///8A////AP///wD///8A////AP///wA2k9fuNpPX5zaT1zMfivYGH4r23R+K9uwjiPYXLoL1+S6C9W7///8A////AP///wD///8A////AP///wD///8ANpPXLjaT1wAfivYGH4r22x+K9usfivYSLoL1oC6C9esugvUA////AP///wD///8A////AP///wD///8A////AP///wD///8AH4r2zx+K9usfivYSLoL1DC6C9fwugvVXLoL1AP///wD///8A////AP///wD///8A////AP///wD///8A////AB+K9kgfivYMH4r2AC6C9bEugvXhLoL1AC6C9QD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAugvXyLoL1SC6C9QAugvUA////AP//AADgBwAA7/cAAOgXAADv9wAA6BcAAO+XAAD4HwAA+E8AAPsDAAD8AQAA/AEAAP0DAAD/AwAA/ycAAP/nAAAoAAAAIAAAAEAAAAABACAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/////wD///8AhISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP8AAAAA////AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/////AP///wCEhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/wAAAAD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP/4+vsA4ujuAOLo7gDi6O4A4ujuAN3k6wDZ4OgA2eDoANng6ADZ4OgA2eDoANng6ADW3uYAJS84APj6+wCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/9Xd5QBwjKgAcIyoRnCMqGRwjKhxcIyogHCMqI9wjKidcIyoq3CMqLlwjKjHcIyo1HCMqLhogpwA/f7+AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/xtHcAHCMqABwjKjAcIyo/3CMqP9wjKj/cIyo/3CMqP9wjKj/cIyo/3CMqP9wjKj/cIyo4EdZawD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP+2xNMAcIyoAHCMqJhwjKjPcIyowHCMqLFwjKijcoymlXSMpIh0jKR6co2mbG+OqGFqj61zXZO4AeXv9gCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/6i5ygDF0dwAIiozACQyPQAoP1AALlBmADhlggBblLkGVJbBPFOWwnxTlsK5U5bC9FOWwv9TlsIp3erzAISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAALztHAAAAAAAuU2sAU5bCClOWwkNTlsKAU5bCwFOWwvhTlsL/U5bC/1OWwv9TlsL/U5bC/ViVvVcXOFAAAAAAAAAAAAD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAALDhEALVFoAFOWwjpTlsL6U5bC/1OWwv9TlsL/U5bC/1OWwvxTlsLIV5W+i2CRs0xHi71TKYzUnyuM0gIJHi4AAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAACtNZABTlsIAU5bCD1OWwv1TlsL6U5bCxFOWwoRVlsBHZJKwDCNObAA8icJAKYzUwimM1P8pjNT/KYzUWCaCxgALLUsAAAAAAAAAAAD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAApS2EAU5bCAFOWwgBTlsIAU5bCNVOWwgg+cJEAIT1QABU/XQA1isg4KYzUuymM1P8pjNT/KYzU/ymM1LAti9E0JYvmDhdouAAAAAAAAAAAAP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AFyk1AE+PuQBTlsIAU5bCAER7nwAmRVoADBojABRFaQAwi80xKYzUsymM1P8pjNT/KYzU/ymM1LgsjNE2MovXFB+K9MUfivbBH4r2BgcdNAARQH8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAQIDABIgKgAPGiIABRMcABdQeQAti9AqKYzUrCmM1P8pjNT/KYzU/ymM1MAqjNM9HmqmACWK7SIfivbZH4r2/x+K9vsuiudAFE2YACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAABhQfABtejgAoitEAKYzUACmM1JQpjNT/KYzU/ymM1MgpjNREH2mgABlosQAfivY0H4r26R+K9v8fivbyKIrtR0CB1SggevTQIHr0Nv///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAACBwsAJX2+ACmM1AApjNQAKYzUGSmM1MYpjNRMInWxABNHdQAcfuEAH4r2Sx+K9vUfivb/H4r25iGK9DE2gt4EIHr0yyB69P8gevTQ////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAOMUsAKYzUACmM1AApjNQAJX6/ABE7WgAUWJwAH4r2AB+K9mYfivb9H4r2/x+K9tYfivYfG27RACB69HsgevT/IHr0+yB69DL///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAAfaJ4AJ4XKABVGagAKKkoAG3raAB+K9gEfivaEH4r2/x+K9v8fivbCH4r2EB133wAgevQsIHr0+SB69P8gevSAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAAAAAAAAAAAAAUSGwAFERwAElCOAB+J9QAfivYAH4r2lx+K9v8fivb/H4r2qR+K9gYefuoAIHr0BSB69M4gevT/IHr00CB69AUgevQA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAkqSgAfivYAH4r2AB+K9gAfivZLH4r2/R+K9osfivYBH4PwACB69AAgevSAIHr0/yB69PkgevQwIHr0ACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAAAAAAAEEiAAB+K9gAfivYAH4r2AB+K9gAfivYsH4r2AB+G8wAge/QAIHr0MCB69PsgevT/IHr0eyB69AAgevQAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAXZrYAH4r2AB+K9gAfivYAH4r2AB+K9gAfifUAIHz0ACB69AcgevTQIHr0/yB69MwgevQEIHr0ACB69AAgevQA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAAAAAAAAIDAB6E6gAfivYAH4r2AB+K9gAfivYAH4r2ACB+9QAgevQAIHr0fCB69P8gevT5IHr0LCB69AAgevQAIHr0ACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAABBAcAEUqDAB6E6wAfivYAH4r2AB+K9gAggPUAIHr0ACB69AAgevQTIHr0qCB69HYgevQAIHr0ACB69AAgevQAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP////////////////wAAH/8AAB//P/+f/z//n/8wAZ//MAGf/z//n/8wAZ//MAGf/zAAn/8/gJ//+AD///AAf//wEH//+cA///8AH//8BB///BgH//xwB///4If//4EP//+CD///hh///9w////4P///+H////j////////////" rel="icon" type="image/x-icon" />
Used this page here for this: http://www.motobit.com/util/base64-decoder-encoder.asp
Generate favicons
I can really suggest you this page: http://www.favicon-generator.org/ to create all types of favicons you need.
I read a bunch of different entries till I finally found a solution that worked for my scenario (ASP.NET MVC4 project).
Instead of using the filename favicon.ico for my icon, I renamed it to something else, ie myIcon.ico. Then I just used exactly what Domi posted:
<link rel="shortcut icon" href="myIcon.ico" type="image/x-icon" />
And this worked!
It's not a caching issue because I tested this with Fiddler - a request for favicon never occurred, even if I cleared my cache "From the beginning of time". I believe it's just some odd bug with chrome?
Upload your favicon.ico to the root directory of your website and that should work with Chrome. Some browsers disregard the meta tag and just use /favicon.ico
Go figure?.....
I also experienced the same thing. I found out that my favicon.ico had not been processed as a legitimate shortcut icon. I understand that favicons must be scaled to 16x16 and follow the Microsoft Icon format.
I'm creating an HTML web page.
I'm nowhere near finish and therefore should not focus too much on the following matter at the moment.
But I'm confused about why my code for the Shortcut icon is not working.
I'm testing everything by placing all files in the same folder (offline, no servers or anything similar)
The code is
<link rel="SHORTCUT ICON" type="image/x-icon" href="favicon.ico">
I tried with different ico files and it will only work with an ico uploaded to a website.
For example the following code will work.
<link rel="SHORTCUT ICON" type="image/x-icon" href="\WEBSITEFOLDER\favicon.ico">
Try:
<link rel="SHORTCUT ICON" type="image/x-icon" href="~/favicon.ico">
or:
<link rel="Shortcut Icon" type="image/ico" href="favicon.ico">
I ran into this similar problem, and it turned out that the size of the actual file was what caused the issue. According to sources it has to be either 16x16 or 32x32. I would use an icon generator like: x-iconeditor.com.
If you want a favicon on local file, you will have to use Data URI
See this answer : local (file://) website favicon works in Firefox, not in Chrome or Safari- why?
set favicon icon size 16x16 it will work in chrome...
I HAD the same problem. The site I "borrowed" from used a folder called "icons" for the location of the .ico file so I followed that exactly. The service my girlfriend used was Web.com. For whatever reason with Web.com if a shortcut icon in located anywhere other than the root directory, it will not show up in Internet Explorer. I simply moved the favicon file into the same place index.html was and changed that one line of code in the index to reflect that.
Solved (in my case anyway)! Good luck!
<link rel="icon" href="relative_PATH/favicon.ico">
Try to put the all relative path to the icons file
It doesn't work, absolutely because the link target is not correct.
If you put the icon in the same folder of your web page, then correct the link to the following:
<link rel="SHORTCUT ICON" type="image/x-icon" href="./favicon.ico">
which means favicon.ico is in the current folder.
However you can use the debugger i.e. chrome debugger and navigate to
the source code of your web page, i.e. right click on the link of your icon ->
open in new tab, and see how it works
Try to add the absolute route for the image icon and Use 48x48 px image size.
That worked for me
<link rel="shortcut icon" type="image/png" href="http://yoursite.com/Content/Images/favicon.png" />
I would like to know if it is necessary for me to specify it like this:
<link rel="icon" href="[URL]" type="image/x-icon" />
<link rel="shortcut icon" href="[URL]" type="image/x-icon" />
or can I just include it in the root and the browser will look for it?
Also what's the difference between rel="icon" and rel="shortcut" ?
All of the major five browsers look in the site's root for a file named exactly favicon.ico, regardless of type, automatically.
You can override this with a link element with rel="icon", or rel="shortcut icon". The latter is supported by every browser, while the former is more correct, but not recognised by Internet Explorer.
Most browsers these days will look for a favicon.ico file on the root of the site.
I have copied my favicon.ico file to my Apache document root. I had to add an Apache Rewrite exception for it and now it is accessible from www.example.com/favicon.ico. But when I hit my main URL it does not show up.
I thought all you had to do was copy the file with the correct permissions into the doc root? Do I need to make php changes? Thanks!
Try throwing this tag in the head of your document:
<link href="/favicon.ico" type="image/x-icon" rel="icon" />
IE and Firefox can behave differently (not sure which one you are using). Try to add the page as a bookmark, then click the bookmark (to load the page). After you do that exit your browser and see if the if shows up then.
If that does not work try to clear your browser cache and repeat the above steps that should fix it. I have seen your problem before!
the favicon.ico reference must be an absolute URL, not relative.
Using this:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
My status was
favicon.ico () shows up in:
IE 9.0.8
Safari 5.1.7
Fails in:
FF 28.0
Google Chrome 34.0
changing to absolute values
<link rel="icon" href="http://127.0.0.1/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://127.0.0.1/favicon.ico" type="image/x-icon">
causes all browsers to locate and display the favicon.ico
Could it be that you uploaded the favicon after your browser has remembered that your domain doesn't have one and therefore doesn't issue a new request?
favicon icon behaves differently for different browswrs & sometimes if it works in FF & does not work in IE.
Try after Clearing the cache of the browser and standard code for favicon ico is,
Just put below tag in your index file OR whichever common file for your project.
<link rel="FaviconIcon" href="favicon.ico" type="image/x-icon">
Although new browsers support GIF and PNG images , but , I would suggest always saving the image as favicon.ico.
Try placing the ico file in an images folder in your root. That's where many browsers look for favicon. And that's something to keep in mind. Favicon is a very loose standard, if you can even call it that, which is supported by browsers, not by the server. The browsers themselves actually fetch favicons in separate calls to display on their favorites bars, or tabs... The favicon file just has to be placed somewhere that the browsers can find it.
Some browsers will pick up the icon if its in the root directory without adding anything to the page, however IE and FF don't. Add this code to the head section of your page
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
It seems like in Chrome that you cannot use a link (ex. https://) rather must you have the favicon.ico in the same folder as the index.html. For any other file, it seems to work with a link.