I've been using this for a long time, working in Chrome, but my customer is using this Internet Edge Explorer and I tried with Firefox and they don't show anything in the console and no css loading in the network tab. No extensions installed to the browsers.
<link rel="preload" as="style" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-
bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha256-aAr2Zpq8MZ+YA/D6JtRD3xtrwpEz2IqOS+pWD/7XKIw=" crossorigin="anonymous"
onload="this.onload=null;this.rel='stylesheet'">
<noscript>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha256-aAr2Zpq8MZ+YA/D6JtRD3xtrwpEz2IqOS+pWD/7XKIw=" crossorigin="anonymous">
</noscript>
Why does this only work in Chrome?
Related
So i'm using the Roboto font using this
and obviously font-family: Roboto in my css.
The problem is that only chrome displays the Roboto font. What should I do?
here's my website so you can see: click
I try it On Firefox 56 and the font in loaded
try to load font before another css file may be the problem solved
Like This
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="css/css.css" rel="stylesheet" />
<link href="css/sshow.css" rel="stylesheet" />
I want to put a icon on title bar in the browser, but what i should use in below options both are working fine but i want know the difference between these types and is it nessesary to mention icon in both rel ( shortcut icon & icon ) .
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
and
<link rel="shortcut icon" type="image/png" href="img/micrologo.png">
<link rel="icon" type="image/png" href="img/micrologo.png">
Quoted from the mozilla developer pages you should only use the rel="icon".
The shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore.
https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types
As for the ico vs png, if you want to support older browsers like Internet Explorer 10 and lower, you will need to define the .ico favicon as these browsers do not support png, gif, jpeg, or svg favicons.
The best way to have a nice favicon optimised for most browsers is to have something like this:
// Target ios browsers.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
// Target safari on MacOS.
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
// The classic favicon displayed in tabs.
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
// Used by Android Chrome for the "Add to home screen" icon and settings.
<link rel="manifest" href="/site.webmanifest">
// Used for Safari pinned tabs.
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#193860">
// Target older browsers like IE 10 and lower.
<link rel="icon" href="/favicon.ico">
// Used by Chrome, Firefox OS, and opera to change the browser address bar.
<meta name="theme-color" content="#ccccc7">
// Used by windows 8, 8.1, and 10 for the start menu tiles.
<meta name="msapplication-TileColor" content="#00aba9">
To generate all these different files, and meta tags is best to use https://realfavicongenerator.net/ (I am not affiliated with this site in any way, I simply use it very often)
I have a favicon in a website that it works in all browsers, except of Microsoft Edge. What's the issue?
My code:
<link rel="shortcut icon" href="../img/favicon.ico" />
<link rel="icon" href="../img/favicon.ico" />
<link rel="apple-touch-icon-precomposed" href="../img/favicon.ico" />
I have also tried with type="image/x-icon".
At the moment it seems as though favicon will only worked after you have deployed your site and never on localhost.
Try deploying the site to see if it works.
I have used the online tool RealFaviconGenerator to generate the favicons for my website, to support a variety of devices and browsers.
Most of my favicons have a transparent background, except for the apple-touch-icons as iOS adds a black background, which I do not want. So, I have manually added a white background and used that image instead for iOS.
The favicons work well with all the devices I have tested so far, except for Google Chrome on iOS (specifically, an iPad mini 1). What I want is the browser to use one of the icons with a transparent background, like it does on a computer (probably either favicon.ico or favicon.png). However, Chrome is instead using one of the apple-touch-icons, which has a white background.
My question is: Is this behaviour normal for Chrome on all iOS devices, or am I doing something wrong?
Additional Information:
I am not sure if this is relevant, but I am adding it anyway.
In order to make it easier to organise the favicon images, I put them all in a separate folder (instead of the root directory). However, I left the favicon.ico and browserconfig.xml files in the root folder, and removed the explicit links as the FAQ of the generator recommends so:
When your favicon is in the root directory, RealFaviconGenerator does
not generate this code. This is because it somehow confuses some other
browsers like Chrome. And since IE looks for a file named favicon.ico
anyway, the best solution is to not even talk about it.
By default, Internet Explorer 11 looks for browserconfig.xml at the
root of the web site.
Any help will be gladly accepted!
UPDATE:
This is what I have in my <head> now. Notice that I have also added the favicon.ico as a <link>. When I tried using this, it seemed to work fine at first, with iOS Chrome displaying the correct favicon. However, when I refreshed the page once, the favicon went back to the earlier white background one and remained the same.
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" sizes="57x57" href="/pics/icons/apple-touch-icon-57x57.png?v=2">
<link rel="apple-touch-icon" sizes="60x60" href="/pics/icons/apple-touch-icon-60x60.png?v=2">
<link rel="apple-touch-icon" sizes="72x72" href="/pics/icons/apple-touch-icon-72x72.png?v=2">
<link rel="apple-touch-icon" sizes="76x76" href="/pics/icons/apple-touch-icon-76x76.png?v=2">
<link rel="apple-touch-icon" sizes="114x114" href="/pics/icons/apple-touch-icon-114x114.png?v=2">
<link rel="apple-touch-icon" sizes="120x120" href="/pics/icons/apple-touch-icon-120x120.png?v=2">
<link rel="apple-touch-icon" sizes="144x144" href="/pics/icons/apple-touch-icon-144x144.png?v=2">
<link rel="apple-touch-icon" sizes="152x152" href="/pics/icons/apple-touch-icon-152x152.png?v=2">
<link rel="apple-touch-icon" sizes="180x180" href="/pics/icons/apple-touch-icon-180x180.png?v=2">
<link rel="icon" type="image/png" href="/pics/icons/favicon-32x32.png?v=2" sizes="32x32">
<link rel="icon" type="image/png" href="/pics/icons/android-chrome-192x192.png?v=2" sizes="192x192">
<link rel="icon" type="image/png" href="/pics/icons/favicon-96x96.png?v=2" sizes="96x96">
<link rel="icon" type="image/png" href="/pics/icons/favicon-16x16.png?v=2" sizes="16x16">
<link rel="manifest" href="/pics/icons/manifest.json?v=2">
<link rel="mask-icon" href="/pics/icons/safari-pinned-tab.svg?v=2" color="#5bbad5">
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="msapplication-TileImage" content="/pics/icons/mstile-144x144.png?v=2">
<meta name="theme-color" content="#ffffff">
What you observe is normal, even if that's not what you want: iOS Chrome takes the Apple Touch icon for bookmark and favicon.ico for the regular tab icon. On an iPad Mini, it takes the 57x57 Touch icon and the embedded 16x16 pic of favicon.ico.
Android Chrome is not that different:
Add to home screen icon (no equivalent with iOS Chrome), tab icon and task switcher icon: icons declared in manifest.json.
Bookmark icon: the Apple Touch icon. Yep.
Long story short: there is no workaround. It would worth trying to remove all touch icons to see how iOS Chrome behaves, but this is not something you will do in production.
Oh, and as the author of RealFaviconGenerator, I congratulate you for this excellent choice :)
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
or
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
Have you tried this inside of your <head>? It works fine on my website. I have just tested it on Google Chrome for IOS.
I had a problem with displaying my favicon in Chrome. It works fine in FireFox, but I can't get it to display in Chrome. Also, something else I would like to ask is if you have to actually have a website on the web to display favicons because I took the link to the favicon from this website and tried it on my html code and it worked just fine. Something else to note is that the file is up a directory, so I don't want people to correct me on the ../ that appears in the code. Like I said, it works in FireFox. Thanks in advance.
Here is the code:
<!Doctype html>
<html>
<head>
<link rel="shortcut icon" href="../GRAFX/ICO/fav.ico">
</head>
<body>
</body>
</html>
No, you don't have to have the website on the web to view favicons in Chrome. It happens because Chrome old versions do not support favicon hosted on your computer. The favicon has to be hosted on an internet server. Use a photo hosting website. I recommend ImageShack.
After, just do this:
<link rel="shortcut icon" href="http://www.urloftheimage.com/image.png" type="image/x-icon">
Major browsers support PNG, JPG and GIF as extensions of the favicon. It doesn't has to be .ico, but it's good to use it.
Just add the following lines to your head tag. That will supports the major browsers.
<link rel="icon" type="image/png" href="http://www.example.com/image.png">
<link rel="icon" type="image/gif" href="http://www.example.com/image.gif">
<link rel="icon" type="image/jpeg" href="http://www.example.com/image.jpg">
<link rel="icon" type="image/vnd.microsoft.icon" href="http://www.example.com/image.ico">
PS: don't forget to delete the browsers cache before you try the code!