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
Related
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.
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 notice that there are a lot of ways to add website icons. Because of the various of devices and systems, there are also very different formats to add icon. So how can I meet all of their requirements? What is the safest solution?
For example:
Method One:
<link rel="shortcut icon" href="img/favicon.ico">
Method Two:
<link rel="icon" type="image/vnd.microsoft.icon" href="img/favicon.ico" />
Method Three:
<link rel="apple-touch-icon" href="img/touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="img/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/touch-icon-ipad-retina.png">
I understood that method three is to add icon to the home-screen of apple devices. And ico file is a file format that stores various size of icons.
So if I use method three(Apple's way), does it get the same effect as the two others? What are the relationships between these three methods? If putting them together, what would happen? How do they influence each other?
These is no one-to-one relationship between browsers and icons. However, the following list gives a good overview of the topic:
Legacy desktop browsers (eg. old versions of IE): favicon.ico, declared with <link rel="shortcut icon" href="/favicon.ico">
Modern desktop browsers (eg. latest Chrome): 16x16 PNG icon, declared with <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">. Yet, modern browsers can deal with the legacy favicon.ico, so this is not a strict requirement.
Safari with Mac OS Yosemite: Apple Touch icon, declared with <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
iPhone and iPad: several Apple Touch icons, from 57x57 (first generations of iPhone) to 180x180 (iOS 8, ie. iPhone 6 and latest iPad), declared with <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
Android Chrome, prior M39 / Android 5 / Lollipop: 192x192 PNG icon, declared with <link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">. It also uses the Apple Touch icon as the bookmark icon.
Android Chrome M39+ / Android 5 / Lollipop: up to 6 icons declared in a manifest, declared with <link rel="manifest" href="/manifest.json">. It also uses the Apple Touch icon as the bookmark icon.
IE 10 / Windows 8: a 144x144 icon, declared with <meta name="msapplication-TileImage" content="/mstile-144x144.png">
IE 11 / Windows 8.1: up to 4 icons declared in a manifest, declared with <meta name="msapplication-config" content="/browserconfig.xml">
Coast by Opera: a 228x228 PNG icon, declared with <link rel="icon" type="image/png" href="/favicon-228x228.png" sizes="228x228">
Google TV: a 96x96 PNG icon, declared with <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
... Yandex Browser, etc.
In addition to the huge amount of icons, there is also a design issue. The most common pitfall is transparency. Favicons are often transparent, which is fine. However, iOS forbids it and fills the transparent regions with black. For an example of this, compare the SO touch icon and what you actually get when you add SO to the home screen of your iPhone/iPad. So it is important to keep design in mind, not just resize your master picture blindly.
For these reasons, I advice you to use this favicon generator. It generates all the required icons you need to support all major platforms and also let you design icon platform-per-platform. Full disclosure: I'm the author of this service.
Method 1 is the simplest, method 2 is for older versions of Internet Explorer, and, as you say Method 3 is for apple devices.
You should be able to use all 3 for maximum support. They will suplement each other, with devices each using the relevant one and ignoring the others.
See Favicon on Wikipedia for more information.
Here is a page I am working on for a class. Don't worry that it's all divs - the exercise allows that as it was to experiment with web fonts.
My problem is that the page renders fine in IE, Firefox, Safari, but on the iPad it doesn't center and the scale is off. If you look at the top left header "Top of the Napkin", it actually breaks into 2 lines on the iPad. There is no left margin yet quite a bit of right margin.
thanks for any help -
The above answer did not work for me on the iPad. Here is what did work.
In the body tag I added the minimum width of what I would want in a browser.
body { min-width:1080px; }
This worked without adding
<meta name="viewport" width=device-width />
but I left it in the header for good measure.
I checked the page on my iPad (latest IOS v5.1) and I can see the text "Top of the Napkin" on one line, though you are right about the entire page not getting center aligned..
For that, I would suggest you to do 2 things;
A. Set the viewport width as below (add this line inside your head element);
<meta name="viewport" width=device-width />
The above line would set your viewport width to device-width (i.e. 768px on the iPad). You can even hard code the value as
<meta name="viewport" width=900 />
Though this is not the best approach.
B. The other thing you can try is giving the following style to your body element
margin:0 auto
This would effectively center align your entire page.
There is some real good information on how to design websites for mobile (iPhone/iPad, etc) on http://bit.ly/rs1npZ
You probably need a viewport meta tag. Check the link for info on what this does and which to choose. http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/
I had the same problem.
for my part, the page was broken because of div elements bigger than their container.
i fixed it by playing with overflow-x property.
You may try putting overflow-x:hidden; on your containers.
I had the same problem. Here is how I fixed it:
<meta name="viewport" content="width=device-width, maximum-scale=.9" />
I am working on a PhoneGap application using jQuery Mobile.
Currently I am only testing in the iPhone and iPhone Retina-simulators.
When I open up the application in Retina-mode, the application's density is correct but the page is only half the screen size on both dimensions.
My own guess is that jQuery Mobile's css does not scale up the widths and heights, but I haven't been able to find anything about this.
My HTML has this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
And then I execute this Javascript:
if ($.mobile.media("screen and (min-width: 320px)")) {
if ($.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)")) {
$('meta[name=viewport]').attr('content','width=device-width, user-scalable=no,initial-scale=.5, maximum-scale=.5, minimum-scale=.5');
}
}
What am I missing?
I think you are guessing correct.
Look at the JQM.css file.
It only includes media queries for hi-res/lo-res icons. Everything else is "as is" on retina and non-retina devices, so JQM only supports retina in terms of icon-size.
By specifying initial-scale=.5, maximum-scale=.5, minimum-scale=.5 you are locking everything in at 50%. So there is your non-scalable half page.
The more you tailor for retina ("high-end") devices the more trouble you will have with standard browsers (especially "low end", like IE7). Check the JQM iconsprite positioning in IE7 for example - if you don't include a script like respond.js to support media queries, icons will be off-postion.
I think there is currently just not enough retina devices to warrant JQM providing a cross-browser retina and non-retina solution.
I found some good info here. I also did a CSS-only iOS tab-bar, which works down to IE7.
Check the CSS required in my plugin to just make icons and gradient backgrounds look good on all browsers and the amount of extras CSS necessary to tailor for IE7+8. A retina/non-retina JQM.css file would be nice to have but hard to download :-)
In your case you have to target images only and not the entire viewport.
the images have to half size down than your normal display.