The location of the favicon is clicking the share button at right top hand corner in iOS's Chrome. The icon is in the share drawer which I circle it out in the picture below.
When I make it as a dynamic icon base on the url, I leave the href empty at the beginning in index.html and add the path of the icon to the href in js or a script to the href. <link rel="shortcut icon" href="" /> As a result, it doesn't work to make it dynamic. What I guess is seem like chrome only set the icon at the beginning. Because I leave it empty in index.html, there is no icon. The change I add later doesn't have any effect on the icon.
But if I hard code the path in index.html, e.g <link rel="shortcut icon" href="/favicon.ico" />. The icon shows up. However, if I want to change href path to something else by script, it doesn't have any effect as well.
Is there any way that can make this icon dynamic? Thank you.
Related
Does anyone know if it's possible to track website traffic coming specifically from a home screen icon on an Apple device?
E.g. when I specify the following HTML I can obviously control the image that appears when the user adds a shortcut on their homescreen:
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<etc, etc>
I'd like to know how many people are launching from their homescreen i.e. pressing the orange button in the above example. I don't think it's possible, but I was wondering if anyone had a trick up their sleeves?
TIA ♥
navigator.standalone
Returns a boolean indicating whether the browser is running in standalone mode. Available on Apple's iOS Safari only.
if (window.navigator.standalone) {
// From home screen
}
From Safari Web Content Guide:
You can determine whether a webpage is displaying in standalone mode
using the window.navigator.standalone read-only Boolean JavaScript
property. For more on standalone mode, see apple-mobile-web-app-capable.
I have a review box on my website that has 10 or more reviews. Since it's all text it's getting crawled and indexed. I'd rather it didn't get crawled and I've placed the google:off and google:on idea that I discovered. However that may only work for a googlebot crawl, if at all. I was thinking if the review box could link to the text in an external htm page, like you can to a css page, then that might prevent it from being crawled and still load into the space accordingly. I don't know, is this possible?? Thanks for any response.
I have found an excellent solution on my own, and would like to share it...
I created an iframe for my review box and styled it for width, height, and border in my css. Within the iframe tag I put src="reviewstext.htm". I then created this htm page and copied and pasted all my reviews. Within the head tag of the page I put...
meta name="robots" content="noindex,nofollow"
link rel="stylesheet" href="styles.css" type="text/css"
Also, for some reason the iframe tag takes on the same background color as the body of your site. In my case it was a blue colour. I wanted my iframe to have a white background instead. The css styling didn't seem to work but styling the body tag in my reviewstext.htm file did the trick... like below.
body style="background-color: transparent;"
So, I now have a reviews box that refers to an external page. Not only does the text on that external page not get crawled, but the text is not on my homepage either for crawlers to see. With this change my keyword ratios are back in line and not obscured by all the review text... :o)
I am following this guide for Specifying a Webpage Icon for Web Clip
(https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html)
However, I wasn't able to find how to change the default Name or Title displayed below on the icon on the phone. Anyone know how to change or set a default icon name?
Figured it out
<meta name="apple-mobile-web-app-title" content="Enter Your Name Or Title Here">
put this line in between your head tags in the index.html or your top level html.
I'm designing an app using phonegap, and I wanted to use jquery mobile's ThemeRoller for making theme's for the different pages of the app. Anyways, my issue, first of all, is that the theme I create is not showing up on the pages. I removed the original jquery structure .css file and replaces it with the correct structure file, along with my theme .css file. Like this:
<link rel="stylesheet" href="css/themes/TestTheme.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
I tried different things, like adding data-theme="a" into each of the different data-role's, but that didn't make any difference. Another thing that is confusing me however, is that when I download the .zip file, and I open up the index page to make sure the theme is being applied correctly, it doesn't have any kind of jquery structuring to it, it's just a plain white page with black text, with no input slider at all, and the buttons look like I've traveled back in time to Windows 95. Any ideas of what's happening?
I have read that there are many apple touch icon size.
just like that :
<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />
In the theme i have bought, my code look like that :
<link rel="apple-touch-icon" href="logo.png" /><style type="text/css" media="all">
So the question is : what size should the icon be, if no size specified, and how the thevice will handle it ?
My guess, i will make the icon 144x144 and all the above will be scale down appropriately !
*reference : What size should apple-touch-icon.png be for iPad and iPhone 4?
According to this Apple Developer page, if no size is specified, it defaults to 57x57... but I believe the device will scale it appropriately if you have a larger icon in there, so 144x144 would work.
If you have access to the code though, why don't you change what's in there and specify the different sizes? That way each device will only download the appropriately-sized image for its screen and save some bandwidth (which is important on mobile devices that may be on slow 3G or even pre-3G connections).
One caveat is that really old devices do not understand the "sizes" attribute and will end up loading the last specified element... so you should keep the 57x57 icon at the bottom of the list.
Lastly, note that the filenames in your first sample code can be changed; if "apple-touch-icon-114x114.png" makes more sense to you than "apple-touch-icon-iphone4.png", feel free to use that (or whatever you prefer) instead. Just make sure the URL in the href attribute matches the file name you're using! The only concern with this is to make sure you have a file that matches one of the four default images so that any page that doesn't have the apple-touch-icon links specified will still have a default. The four images are (in the order they're checked):
apple-touch-icon-57x57-precomposed.png
apple-touch-icon-57x57.png
apple-touch-icon-precomposed.png
apple-touch-icon.png