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.
Related
Trying to display my Web app Icon on the iPhone Home screen.
When creating a Shortcut from my Home Screen to my Flutter Web App, a screenshot of the app is displayed, not the Favicon.
By short cut I mean on your Iphone in Safari click share Icon > Add to Home-Screen > Add
In index.html I added
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />
<link rel="icon" type="image/x-icon" href="/favicon.ico"/>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
Created all images with https://www.favicon-generator.org/ (so they have the right size) and stored them at the root.
The Favicon works in Safari and Chrome and when creating a shortcut from Home screen to Web app on Android the Proper Logo is displayed. But not on IOS, what else do I need to configure.
It's also possible to somehow configure this icon, as you can see if you try adding https://flutter.dev/ to your home screen
I suppose you’re working on windows and as a result didn’t build the Web App in Xcode yet.
Had the same issue sometime ago and that fixed it.
Let me know if it worked.
My app is supporting dynamic type, so the font sizes are scaled according to the user's preferences set in the accessibility settings in iOS.
One view of the app though contains a WKWebView to display a large portion of text.
Does anyone know how to make WKWebView also respond to the scaled font sizes?
I figured, I could do it using CSS/JS injection, applying the proper font size on the fly.
But maybe there is a better solution? Is WKWebView capable of responding to dynamic font/ UIFontMetric?
I did some research, but could not find anything.
WKWebView does support dynamic type. Here are some font names you should use in css section or file:
font: -apple-system-body
font: -apple-system-headline
font: -apple-system-subheadline
font: -apple-system-caption1
...
Here are some steps I have done in my iOS app. First step is to add a style sheet file stylesheet.css to my project.
body {
font: -apple-system-body;
}
h1 {
font: -apple-system-headline;
}
...
Then, in my html file, I add those items in my head section:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<link rel="stylesheet" href="stylesheet.css" />
<style>
// other specific styles in this html
....
In this way, your web viewer will show html text in dynamic types!
Ref: Apple doc on Using Dynamic Type With Web Views
Ive noticed with website favicons that have transparent backgrounds, when a shortcut is made on iOS and the favicon becomes the shortcut image, the background turns black. So if the favicon is a black logo on a transparent background, it looks a bit strange.
Does anyone know the reason this happens?
Thanks
This is a known behavior of iOS. Although this is not documented anywhere, this is probably to enforce iOS UI guidelines, where all home screen icons are squares with rounded corners.
Oh, and you are not the only one trying to use transparency on iOS. Check StackOverflow's Touch icon and add it to your home screen!
Note: I'm the author of the article mentioned above.
iOS doesn't allow home screen icons to have transparent backgrounds
The home screen icons doesn't support transparency. And why are you using favicon? You should use below in the head tag.
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
As described in the answer: https://stackoverflow.com/a/21144916/468724
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 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