In firefox the home page has a grid of tiles for website links.
These tiles have icons but they are not the site favicons.
Eg. for
https://www.bbc.co.uk/sport/football/scores-fixtures
Firefox got this ;
But
https://www.google.com/s2/favicons?domain=www.bbc.co.uk/sport/football/scores-fixtures gets this ;
Anyone know how/where Firefox gets the icon ?
I suppose firefox gets it from the HTML's metadata. Taking a look at the source code, it contains entries like these:
<meta property="og:image" content="https://m.files.bbci.co.uk/modules/bbc-morph-sport-page/3.3.2/images/bbc-sport-logo.png"/>
which links to this image:
https://m.files.bbci.co.uk/modules/bbc-morph-sport-page/3.3.2/images/bbc-sport-logo.png
The og:image name comes from the Open Graph protocol.
I'm building a series of web pages. Some have images on them. I need to update the images and view the result. BUT in the moment Chrome takes the images from some kind of cache or other mechanism. I did a test and created some html with the image. Here's the original image:
<p class="Regular"><img class="img-responsive" max-width="40%" height="auto"
src="/jpg/image30.jpg" ><br/><br/>
That image is old. I uploaded (via WinSCP) a new image30.jpg, but the old one continues to display. I went to what I think the Chrome cache in
C:\Users\username\AppData\Local\Google\Chrome\User Data\Default\Cache
And deleted all files except for data_1, _2, etc.
I went into Chrome's settings and deleted browsing data.
If I change the image name in the Html to some other name, even one which doesn't exist, an image does display, usually an older one.
This also happens with Firefox and Opera.
You can press CTRL + F5 to reload the page without cache. Under google chrome develop tool, we have an option to disable the cache:
Few days ago, I've changed the favicon of my website: it works well when I open the website:
My website is also in my bookmarks, but it shows the old favicon:
I already had a look here, but answers did not solved my problem.
The solution is probably very simple, but I have not found anything so far.
Thanks!
There is a solution that works on every browser:
go to www.yourwebsiteurl.com/favicon.ico (works for localhost as well)
force refresh (Ctrl+F5 for most browsers, or manually)
restart the browser
In Firefox 56 on Windows I was able to refresh just a specific bookmark favicon as follows:
Install sqlite-tools from https://www.sqlite.org/download.html
Quit Firefox (close all open Firefox windows).
At the command line, change into your profile directory. Mine was at %AppData%\Mozilla\Firefox\Profiles\<profilename>.default.
Open the favicon.sqlite database using sqlite3:
sqlite3 favicons.sqlite
Find the favicon(s) you want to remove:
select * from moz_icons where icon_url like '%search_term_goes_here%';
Delete them:
delete from moz_icons where icon_url like '%search_term_goes_here%';
Exit.
.exit
Start Firefox and visit the relevant pages. The favicon will be refreshed when you do this.
It's a bit hacky, but try changing the bookmark properties from http to https or vice versa, then clicking the bookmark. If you changed from http to https, just leave it after that. If you changed from https to http, change it back.
Windows
Go to C:\Users\ *your profile* \AppData\Roaming\Mozilla\Firefox\Profiles\ *random name*.default-*random #*
Delete file: favicons.sqlite
All bookmark favicons will be set to default and will refresh when your revisit the sites.
Tested on version 66.0.1 (64-bit) & 72.0.2 (64-bit)
I had the same issue and in my case, it worked by adding a slash after the url so the browser loads the page from ground up again.
https://www.example.com//
After clicking on the bookmark, the icon was updated immediately.
The solution is from here (See method 2)
MAC OS
The favicon.ico format is pretty archaic now. Any solution to hack/trash/refesh a .ico file is rather pointless when the file may be a PNG. The head element of a page should tell you e.g. for a Drupal page <link rel="icon" href="/sites/default/files/YOUR-ICON.png" type="image/png" />
These Bookmark/History image files are so stubbornly cached, that on MacOS the best solution for me (because I'm comfortable with refreshing ALL icons again over time) is to quit Firefox, then trash the favicons.sqlite file found at
~USERHOMEFOLDER/Library/Application Support/Firefox/Profiles/XXXXXXXX.default/favicons.sqlite
The file will be regenerated when you reopen FF. Tabula rasa.
Press Ctrl + F5. This forces a page refresh while clearing the cache. Also, try deleting the bookmark and recreate it. The image is probably cached in different places for the bookmark and the tab. If that doesn't work, try the favicon addon here I also found this code for refreshing it. Paste it into your dev console:
var fS = Components.classes["#mozilla.org/browser/favicon-service;1"]
.getService(Components.interfaces.nsIFaviconService);
fS.expireAllFavicons();
The Html
<link rel=stylesheet href=../static/css/foundation-icons/foundation-icons.css>
<a class="button radius search-header"><i class="fi-magnifying-glass"></i> Search</a>
I have navigated to foundation-icons.css after hitting Ctrl+U within Firefox so I am definitely linking to the file correctly.
I have copied the foundation-icons folder exactly and not removed anything. It looks like this:
./static/css/foundation-icons/
- foundation-icons.css
- foundation-icons.eot
- foundation-icons.svg
- foundation-icons.ttf
- foundation-icons.woff
- svgs/*
- preview.html
Edit: I have changed the title and added the Firefox tag because everything seems to be working fine in Chromium. I am a little stumped because that means it's a Firefox issue and probably not possible for me to fix.
The preview.html file that comes with foundation-icons works correctly in my Firefox as well.
If you're using the SCSS files, you should point the $fi-path variable to the correct location of your foundation-icon-fonts folder.
For me I had to add the following before importing foundation-icon-fonts:
$fi-path: 'foundation-icon-fonts';
First correct this:
<link rel="stylesheet" href="../static/css/foundation-icons/foundation-icons.css">
In examples of Foundation, Firefox use .woff files. Check if you have access to them.
It's a relative path. Are you sure 'static' folder is reachable with your browser ?
Whilst debugging a website I found this tag below the body of the page I was debugging:
<link rel="stylesheet" type="text/css" href="data:text/css,">
and I thought that some crazy Javascript-Error was adding this to my site. But I could not find anything like that in all of the project's source-code.
After checking back with Firefox I noticed, that only Chrome displays this tag in the Elements-, Resources- and Network-View. It is not visible in the "View Source" of Chrome though.
What is this about?
I experienced the same strange css link, and found that it is due to the AdBlockPlus (ADB) extension for Chrome that I have enabled. When I disable that extension, the link no longer occurs.