Currently my website favicon only works in Firefox. It does not show in Chrome, IE or Edge. In chrome it only shows a globe.
My site is http://www.photogrfr.com
Here is my code that I setup:
<link rel="shortcut icon" href="{{ 'favicon-144x144.png' | asset_url }}">
What is weird is that it's working on all browsers just fine on a new page that I recently built found here: https://www.photogrfr.com/pages/learn-more
But not on any other pages on my domain.
I have tried clearing cache in the Chrome settings, using a pc/browser that I have never used before.
I have also tried using a 16x16 PNG and ICO file.
Nothing seems to be working. The code in the learn-more page that I built is the same in my Shopify theme.liquid as well.
Any help is greatly appreciated.
I got it solved by adding the code to the top of the section. Even though it was between the tags, for some reason putting it as the first line fixed it.
Related
Hi guys I have a problem with some sites from my university and at my localhost. We started with web developement and learned html and css. The thing is I found a very weird CSS Tag in my Head with very weird and scammy looking refs. I looked at some of the links and maybe it sounds weird but some links are P*rn sites or some tracker sites as it seems from the names. I only have this problem on the sites my Uni gives me where my tasks are and at my localhost when I work with Spring and Intellij on my own Website. I am a little scared tbh. I run the Opera GX browser. I tried Firefox to check if the style tag was there aswell but there wasnt. The tag starts like this : : "some weird root: tags and hrefs" Anyone has a clue whats going on?
I also checked at my laptop since it runs opera GX aswell and the weird style tag is there aswell. I didnt find any help when I checked in google for a solution.
Sometimes your browser extension forcefully append html/css tag in your browsing site. So try to remove unwanted extension/add-ons from your browser.
Or clean unistall your browser and install a fresh one.
If you saw anything similar to this:
<link rel="stylesheet" type="text/css" href="mystyle.css">
This is a cascade style sheet file pertaining to your site and can be loaded directly from a website
If you saw anything similar to this:
<style>
h1 {
color: orange;
}
All coding in this section is styling directly embedded into your website via your html file.
I am trying to put some font awesome icons on my site. But google chrome doesn't show icons of fontawesome.com
I have tested with other browsers, it works fine.
I have imported the link of fontawsome CDN in the head tag.
I have also put the tag of icons to show.
There's no adblocker and any extension that blocks icons.
I have tested with chromium browser, same problem with that browser.
I haven't used any extension for chromium.
Note: I am on the latest version of the Chrome browser and also imported the latest version of fontawesome.com
Chrome: Version 74.0.3729.169 (Official Build) (64-bit)
Font. version: 5.8.2
P.S.: It's working fine on another laptop of my friend, but not working in my mine. Please figure out the problem.
link
Here's the link of jsfiddle for code:
<!-- Font awesome 4 -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<!-- The code for icon -->
<div class="icon-container">
<i class="icon far fa-gem"></i>
</div>
Please check the screenshots:
I'm using the same version of Chrome and that fiddle displays as expected (far-gem is shown). So I don't think it is a FA-issue or a Chrome-issue. Possibly some addins are causing trouble.
I had the same issue with icons not appearing on Google chrome on my mobile phone but worked fine on my laptop.
I solved the problem by clearing my browser cache. Have you tried this?
I don't know why my browser cache prevented icons from loading or if that could also be a problem for any of my site's visitors - if anyone can explain this, or has a way to ensure this issue doesn't affect my site's visitors, that would be really helpful.
I have the problem that my .svg favicon won't load anymore in any browser (IE, Edge, Chrome).
Cache is already cleared, also restarted Browser and tried Incognito-mode.
It's still reachable: favicon
Link to website
Code in head-Tag:
<link rel="icon" type="image/svg+xml" href="favicon_v1.svg" sizes="any"/>
Some hours ago I tested it on an other pc with chrome (same version) and edge and it worked there. I changed some things in the code but not the favicon-code.
Does anyone has an idea what the problem could be?
As you can see here, SVG favicons aren't anywhere near to being production-ready, why would you expect it to work in the first place?
You saying "doesn't work anymore" would suppose that you tested it with Firefox or Safari earlier, as those seem to be the only ones who kind-of support it.
So on google chrome and its only on google chrome I can't seem to get my favicon for a specific page to work
I have a default favicon in the root directory call favicon.ico but I have another one called Lokor_favicon.ico the code im using for the specific page is as follows
<link rel="shortcut icon" href="/Lokor_favicon.ico?v=2" type="image/x-icon">
<link rel="icon" href="/Lokor_favicon.ico?v=2" type="image/x-icon">
on fire fox it can load the two different favicons based off what page I am on but on chrome it simply refuses to follow the code and goes with the default favicon anyways
any thoughts?
Chrome isn't trying to be difficult, there's just no defined way to handle multiple favicons, and each browser implements their own approach. The wikipedia article explains this:
http://en.wikipedia.org/wiki/Favicon#How_to_use
Here's the pertinent info:
If links for both PNG and ICO favicons are present, PNG-favicon-compatible browsers select which format and size to use as follows. Firefox and Safari will use the favicon that comes last. Chrome for Mac will use whichever favicon is ICO formatted, otherwise the 32×32 favicon. Chrome for Windows will use the favicon that comes first if it is 16×16, otherwise the ICO. If none of the aforementioned options are available, both Chromes will use whichever favicon comes first, exactly the opposite of Firefox and Safari. Indeed, Chrome for Mac will ignore the 16×16 favicon and use the 32×32 version if only to scale it back down to 16×16 on non-retina devices. Opera will choose from any of the available icons completely at random.
It's best to only offer one favicon. If you have a larger PNG version that you specify in your meta tags, then skip using the favicon.ico file altogether. All browsers will support that.
If you feel you need multiple icons for different parts of your site, then you're trying to use them in a way they were never intended, and you'll have mixed results. If you remove the favicon.ico file altogether, and instead let each page specify its own icon, then people will end up seeing the icon for the first page they visit. So if they get to your "about us" page from Google, they're going to see whatever icon the "about us" page specifies, for the duration of their visit and as long as their browser stores it in cache.
I have a website. It uses 2 Google webfonts for its headings and body text. These work fine on Chrome/IE/Safari (including mobile) but when I view the site on my office computer running IE9 on Win7 the Google fonts do not load and fall back to a sans-serif.
Here is what I see:
IE9:
Chrome:
I cannot figure out why IE fails to load the font as I am aware that Google font's are compatible with IE7+. I figure it might be a security setting but can't get to the bottom of it. Any ideas.
I don't know if this is the issue, but try changing your request to only one link tag:
<link href='http://fonts.googleapis.com/css?family=Oswald|Lato' rel='stylesheet' type='text/css'>
Perhaps loading two fonts in two different requests causes issues.
On my IE9 it looked the same as in Chrome. Press F12 and make sure you are using proper Browser and Document Mode.