I have followed this test, the results show up. https://www.google.com/s2/favicons?domain=www.baoholaodongtot.com But when searching on google on mobile devices does not show favicon
<link rel="icon" href="https://www.baoholaodongtot.com/templates/lam_tuong/favicon.ico" type="image/x-icon">
<link href="/templates/lam_tuong/favicon.ico" rel="shortcut icon" type="image/x-icon" />
The site looks correct. Give Google some time to show your icon in its result pages. Depending of the popularity of your site, that could take days or even weeks.
As an additional clue, look at your site in the Google Search Console. For UX purpose, it displays your favicon, generally faster than the search engine. So if you see your new icon here, you can be optimistic.
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've had a problem with Facebook.com for a few days now. Every time I load the website # https://www.facebook.com it will just take a few seconds and then display a white page. The source of the page is this:
<!DOCTYPE html>
<html lang="en" id="facebook" class="no_js">
<head><meta charset="utf-8" /><script>function envFlush(a){function b(c){for(var d in a)c[d]=a[d];}if(window.requireLazy){window.requireLazy(['Env'],b);}else{window.Env=window.Env||{};b(window.Env);}}envFlush({"ajaxpipe_token":"AXgRWhMTFIL_juHq","lhsh":"KAQF0BXye","khsh":"0`sj`e`rm`s-0fdu^gshdoer-0gc^eurf-3gc^eurf;1;enbtldou;fduDmdldourCxO`ld-2YLMIuuqSdptdru;qsnunuxqd;rdoe-0unjdojnx0"});</script><script>CavalryLogger=false;</script><noscript><meta http-equiv="refresh" content="0; URL=/?_fb_noscript=1" /></noscript><meta name="referrer" content="origin-when-crossorigin" id="meta_referrer" /><link type="text/css" rel="stylesheet" href="https://static.xx.fbcdn.net/rsrc.php/v2/yf/r/rTRM3thxxyG.css" data-bootloader-hash="nVu0I" data-permanent="1" crossorigin="anonymous" />
<link type="text/css" rel="stylesheet" href="https://static.xx.fbcdn.net/rsrc.php/v2/yX/r/h3ydpK_uuri.css" data-bootloader-hash="zp4CG" data-permanent="1" crossorigin="anonymous" />
<link type="text/css" rel="stylesheet" href="https://static.xx.fbcdn.net/rsrc.php/v2/ym/r/T7fKvPc0GuV.css" data-bootloader-hash="2S8io" data-permanent="1" crossorigin="anonymous" />
<link type="text/css" rel="stylesheet" href="https://static.xx.fbcdn.net/rsrc.php/v2/yu/r/Ld1C_Jcgl5j.css" data-bootloader-hash="/JEly" data-permanent="1" crossorigin="anonymous" />
<script src="https://static.xx.fbcdn.net/rsrc.php/v2/yW/r/m6m6Y7RpsEs.js" data-bootloader-hash="5WJdo" crossorigin="anonymous"></script>
<script>require("TimeSlice").guard(function() {(require("ServerJSDefine")).handleDefines([["CSSLoaderConfig",[],{"timeout":5000,"loadEventSupported":true},619]]);new (require("ServerJS"))().handle({"require":[["Bootloader","loadEarlyResources",[],[{"RmDcU":{"type":"js","src":"https:\/\/static.xx.fbcdn.net\/rsrc.php\/v2\/yL\/r\/uKsBDyzJwJh.js","crossOrigin":1},"5zC\/8":{"type":"js","src":"https:\/\/static.xx.fbcdn.net\/rsrc.php\/v2\/y0\/r\/64jGxSfxJ36.js","crossOrigin":1},"pFHnJ":{"type":"js","src":"https:\/\/static.xx.fbcdn.net\/rsrc.php\/v2\/yp\/r\/K6ojr4ngQRr.js","crossOrigin":1},"P0eje":{"type":"js","src":"https:\/\/static.xx.fbcdn.net\/rsrc.php\/v2\/y2\/r\/Wn1AFwUyuPt.js","crossOrigin":1},"q\/AOh":{"type":"js","src":"https:\/\/static.xx.fbcdn.net\/rsrc.php\/v2\/yn\/r\/r40PYeaPQsy.js","crossOrigin":1}}]]]});}, "ServerJS define", {"root":true})();</script>
I tried deleting all cookies, history, empty cache etc. and that allowed me to get to the login screen. When I login using my account it gives me the white screen, however I created a dummy account for this problem and logged in using a new account, completely fresh and it worked fine...
Not too sure what's going on here since it seems to be account specific, and it's not like I've misused the site... Anyone have any insight into this?
Or just answer the question with a fix and be a little more human and compassionate. The fix by the way is simple - create a business FB profile at business.facebook.com, using the same email address as the affected FB account. Once in on that, change views to your personal profile and your account should be back working normally.
You will need to submit the code to Facebook as its an issue accessing their server. That's a timeout, try logging in with a VPN set from a different area. Sometimes going from Instagram to Facebook cross-platform will cause a similar issue is an authentication token isn't given in a timely manner.
If that doesn't work report the code to Facebook so they can fix the timeout error.
I have a web app situated at www.xclo.mobi
I notice that when looking at other IOS web apps, they have an image that points to the browser menu telling people to install there web app to their device that appears as soon as the user views that page.
The image generally says: "Install this web app on your device: Tap on the arrow and then 'Add to Home Screen'"
can someone please advise me on how to add this? what codes will I need to add to my IOS home pages in order to get this?
thanks a lot for your help.
I've just got a proposed edit to the answer telling me it doesn't work anymore.
Fist of all, the proposed edits are used to edit the answer, if it doesn't work and you know how to fix it, send the fix on the update, if you don't know how to fix it, post a comment instead and provide more info, not just "it doesn't work".
There is a new add2home version
http://cubiq.org/add-to-homescreen-goes-3
Source code is here:
https://github.com/cubiq/add-to-homescreen
The basic usage for the new version
<head>
<title>Add To Home</title>
...
<link rel="stylesheet" type="text/css" href="../../style/addtohomescreen.css">
<script src="../../src/addtohomescreen.js"></script>
<script>
addToHomescreen();
</script>
</head>
use this script Cubiq add to home screen
Usage, copy the files add2home.js and add2home.css to the folder where you have your ipad.html and edit your <head> to include this:
<head>
<link rel="stylesheet" href="add2home.css">
<script type="application/javascript" src="add2home.js"></script>
</head>
I have previously been told to use something along the lines of:
<link rel="stylesheet" media="only screen and (max-width: 480px)" href="mobile.css">
I'd like to use a separate stylesheet AND html doc for mobile visitors. Is that normal? I have so many elements I want cut from the mobile version it seemed less complicated to just have a site within a site for mobile - it's own html and CSS.
How do I use the media query above for a mobile specific stylesheet and for an html? What code would I use and where would I put it?
<link href="the/directory/containing/your/mobile.css type="text/css" media="handheld" rel="stylesheet" />
Next line could be:
<link href="the/directory/containing/your/desktop.css" type="text/css" media="screen" rel="stylesheet" />
Use this method and avoid two documents. Instead you're styling one document according to the device being used to view that document.
As far as I'm concerned, you have to detect the browser server side, and serve up a different page.
PHP pseudocode example
if(browser == mobile && !isset($_COOKIES["prefer_desktop_view"])) //Pseudo code you do the checking here
{
$_COOKIES["is_mobile"] = true; //more pseudo code
header("location: mobile.example.com") //redirect solution - if
}
Media queries are CSS specific. There's no way to do this on the client side, and even if there was, the client still has to download and parse the "desktop" HTML.
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.