The site uses a favicon stored in the root, but the https admin section is using the old favicon and I'm not sure where it's coming from.
Does anyone know of a way to find favicon site resources, i.e. where they're coming from? The unsecured pages all use the same head CSS with references to the same favicon, but the admin references no favicon, so I'm baffled as to why it's using the old one on those pages.
On your site using the selector document.querySelector("[rel='shortcut icon']") gets the element:
<link rel="shortcut icon" href="http://www.inside-guides.co.uk/favicon1.ico" type="image/x-icon">
You can reveal the element in the html panel with most javascript consoles if you want to see where its being declared in your html. In your case its declared:
If there is no favicon.ico in the root of the site, then view the source of the site and look for <link rel="shortcut icon"/>. It should have a href attribute. This would tell you the file location.
Most browsers will look for a favicon at /favicon.ico if they don't see a tag.
Source: https://stackoverflow.com/a/21359390/13683677
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.
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.
See the small logo/icon in the tab when you open any website in any browser?:
How can I put such logo/icon on my wordpress blog?
This is called a favicon. You link to it in the head section of your HTML.
You can read more about it here: http://www.w3.org/2005/10/howto-favicon
And view a list of Wordpress plugins that do the work for you here: http://wordpress.org/extend/plugins/tags/favicon
Two ways,
the first is use this plugin
http://wordpress.org/extend/plugins/shockingly-simple-favicon/
Or, if you really want to learn how it works. Open your theme folder (normally under wp-content -> themes -> your theme name) and then normally in the header.php file there is everythign that happens in the head of your pages.
Any where in the <head></head> place the following code...
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
Where /favicon, is the link to your favicon.ico.
To easily make a favicon, use the following link.
http://www.favicon.co.uk/
Hope this helps you learn how to do it and what the actual plugin does for you :)
Use plungin: http://wordpress.org/extend/plugins/shockingly-simple-favicon/
You just need to put the image into a file named favicon.ico in your website's root directory (like www.stackoverflow.com/favicon.ico). Browsers request this file when a user visits your site and will show it in the tab or bookmarks. You can find more info on wikipedia or even use http://www.favicon.cc/ to help you design the icon.
There are two ways.
In your template header.php file, you have to add the favicon code: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
or, you just put the favicon.ico into your www root. Apache has a configuration setting which will load this as default.
I am using the following:
<link rel="shortcut icon" href="/images/favicon.ico" />
It is a true 'ico'. When I visit http://mydomain.com, the icon loads. But when I visit the 'www' subdomain: www.mydomain.com...it won't load. Any ideas what is going on?
I found that I had to clear my Firefox cache [CTRL]+[SHIFT]+[DEL], and then restart Firefox before I could see the favicon, which I put in the root of the web server and called favicon.ico.
Note that in recent versions of Firefox the favicon is only displayed on the tab icon and bookmark, not in the address bar icon.
It's part of a bigger firefox bug. If I am in mysite.com and say link rel="shortcut icon" href="/myicon.ico" it works. But this is the only way it works. If am in mysite.com and say link rel="shortcut icon" href="myicon.ico" or any other relative link, it fails. HOWEVER, if I am in www.mysite.com and use relative links, they work fine. Further, if I am in mysite.com and say link rel="shortcut icon" href="http://www.mysite.com/mypath/myicon.ico" it works. Firefox has forgotten how to deal with websites where www.mysite.com IS mysite.com. It used to work, and it doesn't anymore. You can also see that if you flip between www.mysite.com and mysite.com links will change from "visited" to "unvisited" style. FF is broken on this one, and has been for a couple of versions now, though once it worked.
This sounds like a configuration issue on your end which we can't solve without more information. Have you tried using an absolute URL instead of a relative one?
Example:
<link rel="shortcut icon" href="http://mydomain.com/images/favicon.ico" />
This is a result of how Firefox currently handles the caching of the favicon file. To solve you have a few options:
Add GET parameters
You can add an arbitrary GET parameter and value to the end of your favicon URI
(Tip: This trick can be used for any other css/js files when you want to make sure the user's browser is not serving a locally cached version.)
<link rel="shortcut icon" href="/images/favicon.ico?updated=20150818" />
Rename the file
Rename your favicon file and reference the renamed file in your href attribute.
<link rel="shortcut icon" href="/images/favicon_version_2.ico" />
Hard Refresh
A hard refresh may work on some browsers if you are only concerned with updating your local machines favicon. Usually Ctrl+Shift+R or Ctrl+F5 for Windows/*NIX and Command+R or Command+Shift+R on Mac will do the trick.
Explanation: The end result is you need to force the browser to pull a fresh copy of the file instead of using a locally cached file. Adding a ?somevariable=uniquevalue to the end of the file URI tricks your browser into thinking it's dealing with a new file, and new files by nature can't already be cached. The same effect is created when you rename a file.
Extra nerdy technical notes: Using a timestamp, or unique file version number for the GET parameter value is best because it will encourage variable uniqueness. It's possible if the user has already loaded that URI with the exact same GET parameter and value (?updated=20150818 in my example), the browser will not pull a fresh copy, because it may understand it's still dealing with the same file.
The option to cache files based on the GET parameters in a URI is browser specific as the rules are somewhat left up to the browser vendor's to discern between how they handle that particular caching instance (see RFC at http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html#sec13.9). So, just keep in mind it's possible in some browsers if you are using a date as a value, you may want to include the time as well if you are changing your file multiple times throughout the day.
For security reasons favicons are not used in the address bar anymore starting with firefox 15, but are still used in tabs and bookmarks etc
See http://www.ghacks.net/2012/04/25/mozilla-to-remove-favicons-from-firefox-url-bar/
you can try to put the icon to the root.
For me putting two link refs in the header worked.
FF did not display the icon until the second line was added
<!-- browser icon -->
<link type="image/x-icon" href="/favicon.ico" rel="shortcut icon" >
<link type="image/x-icon" href="/favicon.png" rel="shortcut icon" >
Removing or leaving in the first / made no difference to how FF handled the icon.
The console reported
[Exception... "Favicon at "https://<myhost>/favicon.ico" failed to load:
Forbidden." nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame ::
resource:///modules/FaviconLoader.jsm :: onStopRequest :: line 227" data: no]
But it loaded the .png file anyway, without complaining in the browser window.
Perhaps the first slash in href="/images/favicon.ico" is causing a problem?
Have you tried
<link rel="shortcut icon" href="images/favicon.ico" />
?
What is the directory structure for www subdomain? Can you access other image files using the absolute path?
Fireworks often picks up the favicon.ico file automatically without any code, so long as it is the same folder as the document. Try moving your file up a level to avoid referencing issues.
This problem is annoying...
I usually just add a 16x16 PNG favicon to solve this.
Firefox's way to deal with favicons seems a bit odd and that workaround is, to me, the simplest.
Hope this helps.
Firefox looks for "favicon.png" rather than "favicon.ico" in root folder of your website. I recommend including both for compatibility with more browsers.
The protocol relative URL could be a good option (archived, you never know).
It is about network-path reference (explanation there), try:
<link rel="shortcut icon" href="//images/favicon.ico" />
for firefox you have to use a special tag:
<link rel="image/x-icon" type="image/png" href="/favicon/favicon-196x196.png" />
Now when you drag it to bookmark bar the icon shows.