I'm working on my very first (very lame) website, so apologies for the n00b question.
In Chrome/FF/Safari, my site renders the CSS fine. But on my iPhone or iPad (Chrome or Safari), my site renders as if there were no CSS styles at all. What's the cause?
Link to site
Thanks in advance!
you are referencing localhost for your stylesheet
<link rel="stylesheet" href="http://localhost:8888/kirbydev/assets/styles/styles.css" />
needs to be
<link rel="stylesheet" href="http://www.tvsonsale.co.uk/kirbydev/assets/styles/styles.css" />
or relative path so it works on local dev and production:
<link rel="stylesheet" href="/kirbydev/assets/styles/styles.css" />
Related
My team are now developing a vue-cli based webapp that aims to works on Safari(iOS) and Chrome(android).
The favicon show normally on chrome but not showing in safari, or showing on some pages but not in some page.
I've figuring on this issue for like two weeks.
I tried to force refresh the favicon by ./favicon?v=2, or use full url path or relative path, or use several different way to write favicon, but nothing works.
Sometimes the favicon just show for a second and a disappear.
Some pages say the safari iphone can be heavily cached but i can't find a good way to clean the cache.
I use vue-cli so the below link tag is written in public/index.html like below, and the favicon in public/favicon.ico.
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
after build, above code become code like
<link rel="icon" href="https://www.mysitesite.com/favicon.ico">
chrome android or chrome pc show normally but not safari ios
I also tried some code like below but don't work.
<link rel="icon" href="https://www.mysitesite.com/favicon.ico?v=2" />
<link rel="icon" href="https://www.mysitesite.com/favicon.png?v=2" />
<link rel="icon" href="./favicon.ico?v=2" />
<link rel="icon" href="./favicon.ico?v=2" />
also, I tried generate favicon path by html-webpack-plugin but not show in safari.
apple-touch-icon shows when i bookmarked but favicon didn't show on the safari tab.
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon-180x180.png">
Does anybody knows the solution or is this just a bug in safari?
Thank you so much.
I am facing one issue with favicon.ico. Here is my link rel code which has been included in header portion.
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
The problem is, I can view the favicon in all browsers if the url starts with http://. When the address starts with https://, the favicon is not showing in IE browser. Is there anything that I need to do? Did I miss anything important to include?
I had the same problem and fixed it by putting the following line in the head section of my html file:
<link rel="shortcut icon" href="">
I have a favicon on my page, and when i go to the link for the favicon: mypage/favicon.ico
It starts download, instead of just showing it as an online image (as every other site).
I've searched everywhere for a solution, but got no answer.
I want it to show, and not to be downloaded, what can be the problem?
<head>
<link rel="shortcut icon" href="/favicon.ico">
</head>
Its an .ico file at 32x32.
Thanks - Chris
You can show it in HTML as a regular image tag. This has been tested in Firefox 26, Chrome 29 and Internet Explorer 10. All with positive results. You can try on your own browsers if you'd like.
Code:
<!DOCTYPE html>
<html>
<body>
<img src = "logo.ico" type = "image/x-icon">
</body>
</html>
You should use
<head>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
</head>
And consider to use another image e.g .png
<link rel="icon" href="/favicon.png" type="image/png" />
(Some Browsers does not support .ico)
If you call mypage/favicon.ico directly it might be dowloaded, depending on your http server/browser which mime type should be downloaded or displayed.
see Wikipedia.
If I specify different image sizes for favicon PNGs like so:
<link rel="icon" type="image/png" sizes="16x16" href="/favicon.png" />
<link rel="icon" type="image/png" sizes="24x24" href="/favicon-24px.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32px.png" />
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48px.png" />
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64px.png" />
<link rel="icon" type="image/png" sizes="256x256" href="/favicon-256px.png" />
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512px.png" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
Does every one of these files get fetched?
Quoting from http://www.jonathantneal.com/blog/understand-the-favicon/:
How do these PNG-favicon-compatible browsers determine which favicon
should be used? 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, not wanting to take sides, will choose from any of the
available icons at complete random. I love that Opera does this.
And that’s just the beginning. Now it’s time to learn about the
Internet Explorer caveats.
While IE8-10 will display
the favicon on first load of the page, IE7 will skip the first load
and display the favicon during repeat visits. Worse yet, IE6 will only
display the favicon once the site has been bookmarked and reopened in
the browser. IE6 will also drop the favicon whenever the browser cache
is cleared, and it will not display the favicon again until the site
is either re-bookmarked, or the favicon is somehow reloaded. If IE6
and favicons mean a lot to you, you can force this reload with a
little JavaScript snippet, preferably wrapped in a conditional
comment.
<!-- I "support" IE6 -->
<!--[if IE 6]><script>(new Image).src="path/to/favicon.ico"</script><![endif]-->
According to the specification, the most appropriate icon will be used. So there is no a need to fetch something that has no use.
If multiple icons are provided, the user agent must select the most appropriate icon according to the type, media, and sizes attributes.
Surprisingly, I observed that some browsers are loading all PNG favicons, not only the most suitable one:
Chrome on Windows
Chrome on Android
Firefox on Windows
I didn't tested other settings, like Firefox on Android.
More about the "all favicons are loaded" issue.
The browser will get only one file, if any.
Its been a couple of weeks that some sites just keeps on hanging.
e.g.
Facebooks => static.ak.fbcdn.net
FLicker => l.yimg.com
GoogleAnalytics
I've googled and found many problems like this and some answers which are outdated or just doesn't solve the problem.
I did:
Cookies clearing, ran cc cleaner and several other nifty methods. None solved my problem??
Only with facebook, if I enter https:// manually instead of http:// on every url on facebook, it works and when it does the redirection to http://, everytime I have to type 's' on the address bar to make it https://
It is driving me nuts coz I'm developing Facebook App and this problem in being pain in my ass.
What might be the reason for these CDNs hanging behaviour??
Update: Mon Feb 8, 2010
Well when I viewed the source with firefox, this is the header part:
<link type="text/css" rel="stylesheet" href="http://b.static.ak.fbcdn.net/rsrc.php/zDO0B/hash/8jpbog60.css" />
<link type="text/css" rel="stylesheet" href="http://static.ak.fbcdn.net/rsrc.php/zA96O/hash/8jqnsh63.css" />
<link type="text/css" rel="stylesheet" href="http://b.static.ak.fbcdn.net/rsrc.php/z9X8U/hash/5zy5e7ns.css" />
<link type="text/css" rel="stylesheet" href="http://b.static.ak.fbcdn.net/rsrc.php/z7XWB/hash/b881ctjq.css" />
<link type="text/css" rel="stylesheet" href="http://static.ak.fbcdn.net/rsrc.php/zEMLE/hash/6n3druoq.css" />
<link type="text/css" rel="stylesheet" href="http://b.static.ak.fbcdn.net/rsrc.php/zEEQQ/hash/3et16vbl.css" />
<link type="text/css" rel="stylesheet" href="http://b.static.ak.fbcdn.net/rsrc.php/zF0BN/hash/4ey03a8b.css" />
#<link type="text/css" rel="stylesheet" href="http://b.static.ak.fbcdn.net/rsrc.php/zD46U/hash/4ctxkmr7.css" />
<script type="text/javascript" src="http://b.static.ak.fbcdn.net/rsrc.php/z5KPU/hash/f92tjc5l.js"></script>
When I clicked the each link, all links open with its contents except the last link with -# sign prefixed.
So the url -#http://b.static.ak.fbcdn.net/rsrc.php/zD46U/hash/4ctxkmr7.css is not opening and this css file is not downloaded and the facebook page looks horrible and all left aligned??
Update: Tue Feb 9, 2010
Today the link with the -# sign is just keeps hanging and looping:
<link type="text/css" rel="stylesheet" href="http://static.ak.fbcdn.net/rsrc.php/zEMLE/hash/6n3druoq.css" />
<link type="text/css" rel="stylesheet" href="http://b.static.ak.fbcdn.net/rsrc.php/z9X8U/hash/5zy5e7ns.css" />
<link type="text/css" rel="stylesheet" href="http://b.static.ak.fbcdn.net/rsrc.php/zF0BN/hash/4ey03a8b.css" />
<link type="text/css" rel="stylesheet" href="http://static.ak.fbcdn.net/rsrc.php/z1580/hash/4l5utauj.css" />
#<link type="text/css" rel="stylesheet" href="http://b.static.ak.fbcdn.net/rsrc.php/z4851/hash/532htj7z.css" />
<link type="text/css" rel="stylesheet" href="http://static.ak.fbcdn.net/rsrc.php/z1GEW/hash/dh01t0zv.css" />
<link type="text/css" rel="stylesheet" href="http://static.ak.fbcdn.net/rsrc.php/z80UK/hash/3a6o59ih.css" />
<link type="text/css" rel="stylesheet" href="http://b.static.ak.fbcdn.net/rsrc.php/zD46U/hash/4ctxkmr7.css" />
<script type="text/javascript" src="http://b.static.ak.fbcdn.net/rsrc.php/z5KPU/hash/f92tjc5l.js"></script>
Why that url http://b.static.ak.fbcdn.net acting weird? Has something Akamai got to do with this?
It could be some kind of connectivity issue between you and the CDNs. Blocking them with adblock (or the hosts file) is an effective way forward, or there's a Firefox extension for it - Ghostery.
This could also be an issue with your ISP. I have seen cases in which certain domains take arduous amounts of time to access or, in some cases, cannot be accessed at all during peak hours. It could be possible that the domains you're having issues with are ones that your ISP is having problems with. In the past I've experienced outages of Google as well as one or tow subdomains.
Do you have the same problem from different computers on the same network?
I also have the same problem. I've not resolved the issue completely but I found a hack fix:
Set the CDN domains to fixed IP numbers in your local computer's hosts file.
I added these lines to my WinXP c:\windows\system32\drivers\etc\hosts
Other OS's have a similar file(Linux: /etc/hosts)
# CDN networks broken for Yahoo, Google and Facebook
217.212.252.78 static.ak.fbcdn.net
217.212.252.78 profile.ak.fbcdn.net
217.212.252.78 external.ak.fbcdn.net
217.212.252.78 creative.ak.fbcdn.net
217.212.252.78 platform.ak.fbcdn.net
217.212.252.78 l.yimg.com
To choose the fastest IPs for your location visit just-ping.com .
I've not tried it but this trick might also work for Windows users:
http://www.updatexp.com/dns-windows-xp.html
I observed this same issue on several computers on our home LAN over a prolonged period and after many months, finally found a fix. It turned out that the intrusion detection rules in my Billion ADSL router were overly aggressive in blocking sites. This discussion thread revealed the issue and solution for my case.
http://forums.whirlpool.net.au/archive/1622370
You may find that your router has similar issues or that your firewall performs a similar intrusion detection function that needs tuning.
If you have a similar router or firewall feature, you can test if this is the case by clearing the 'intrusion detection' blacklist when you observe the blocking problem to see if it unblocks the site.
If you have a Billion modem/router, I'd also recommend updating to the latest firmware that now includes the ability to add white list IPs that will permanently prevent IP blocking. This may or may not be helpful for CDN sites like Facebook that use large server farms (= numerous IPs per domain name). What I think Billion need to do here is support domain name white listing rather than just IP white listing so that the router determines which IP you've been allocated for this domain.