I can't find how to make Android use a custom icon (e.g. the favicon or the app-touch image that iOS uses) for a website shortcut.
Can you give me a hint?
Android uses a home screen image AND a "Shortcut icon" (like favicon). If you only specify the home screen icon, the web page will not display an icon next to the URL in the web browser.
The "shortcut icon" must be listed separately, even though it can be the same file.
<link rel="shortcut icon" href="http://yourdomain.com/path/icon57.png" />
<link rel="apple-touch-icon" href="http://yourdomain.com/path/icon57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="http://yourdomain.com/path/icon72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="http://yourdomain.com/path/icon114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="http://yourdomain.com/path/icon144.png" />
Relative URLs will work for many devices, but most sources say you need to use absolute URLs.
Listing the sizes separately allows the device to download only the smallest image that meets it's needs. For the "shortcut icon", you can't list different sizes, but you can use an ICO file which may contain multiple sizes encoded in the file. Many image programs like GIMP can save ICO files with multiple sizes.
Note that if you want the shortcut icon to display in IE, it must be a real ico file.
Apparently, Android versions 2.1 and earlier only recognize the "precomposed" image link, but if you include the precomposed icon, every device that is capable of "fancifying" icons will skip their process and just use the precomposed ones. The Androids I tested can do their own fancifying, so I don't use precomposed icon links. It will depend on your compatibility needs.
<link rel="apple-touch-icon-precomposed" href="http://yourdomain.com/custom_icon.png"/>
For more information about using home screen icons...
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
Android and iOS seem to use the same references for the icons on the home screen.
For the HTML link icons:
<!-- These two are what you want to use by default -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- This one works for anything below iOS 4.2 -->
<link rel="apple-touch-icon-precomposed apple-touch-icon" href="apple-touch-icon-precomposed.png">
The difference between the two types are that the top two don't have a space. The bottom one includes both with a space in between. The space is not recognized by iOS 4.2+. Your best bet is to use all three. If you are limited on space, use only the top two.
For Sizes:
144 × 144 pixels for an iPad Retina display.
114 × 114 pixels for an iPhone Retina display.
57 × 57 pixels for almost anything else
One thing to watch out for is that iOS 4.2+ will simply ignore the size attribute, so you can just link them with out it. I'd suggest putting the size within the icon's file name just for organizational purposes.
Another thing to note is that you don't even need to include the links for the "apple-touch-icon"s. If there is no icons defined in the html, iOS will search through the root folder for files named the following in order. Android DOES need them defined, so put them in the code anyways.
apple-touch-icon-57x57-precomposed.png
apple-touch-icon-57x57.png
apple-touch-icon-precomposed.png
apple-touch-icon.png
This looks like a good explanation.
It would appear that if you place:
<link rel="apple-touch-icon" href="/path/to/some.png"/>
<link rel="apple-touch-icon-precomposed" href="/custom_icon.png"/>
In the bookmarked page's HTML, it will appear on the desktop automagically.
This Android and iPhone icon page suggests absolute URLs for Android.
So just amend KenY-N's tags to
<link rel="apple-touch-icon" href="http://yourdomain.com/path/to/some.png"/>
<link rel="apple-touch-icon-precomposed" href="http://yourdomain.com/custom_icon.png"/>
I can confirm it works using relative (and absolute was working for me too)... but clearing caching solved what issues i was having... sample lines i used:
<!-- fj Icon for Android Chrome shortcut etc-->
<link rel="apple-touch-icon" href="/static/main/img/m3magnet-full.png">
<link rel="apple-touch-icon-precomposed" href="/static/main/img/m3magnet-full.png">
this is what worked for me. Chrome on Android:
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="shortcut icon" href="favicon.ico" />
<link
rel="apple-touch-icon"
sizes="64x64"
href="http://glatocha.com/bmr/favicon.png"
/>
<link
rel="apple-touch-icon-precomposed"
href="http://glatocha.com/bmr/favicon.png"
/>
Related
I have been struggling to get favicon to work. Finally, I got it to work by using a Base64 version per the answer to this previous question: local (file://) website favicon works in Firefox, not in Chrome or Safari- why?
Now, I want to save the bookmark to my phone's home screen, but the icon the phone uses is not favicon. Instead, it is just a black box with a letter "S" (being the first letter of my app's title). I'm sure this is by default.
I have seen the favicon generators where all sorts of icons are generated for all sorts of devices, like this generator: https://www.favicon-generator.org/
The generators create a lot of files. The Base64 string is very long. To repeat all this for every icon file for every device would result in a big, ugly html header.
Is there a short-form way to get this to work? The first <link> is for my favicon.ico. If I am on the right track, I need to deal with all the rest of the commented <links> below.
<link href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAABILAAASCwAAAAAA
AAAAAABxbGj/cWxo/3FsaP9xbGj/cWxo/3FsaP9xbGj/cWxo/3FsaP9xbGj/cWxo/3FsaP9xbGj/
cWxo/3FsaP9xbGj/ODIr/zgyK/84Miv/ODIr/zgyK/84Miv/ODIr/zgyLP84Miz/ODIr/zgyK/84
Miv/ODIr/zgyK/84Miv/ODIr/0I8Nv9CPDb/Qjw2/0I8Nv9CPDb/QTs3/0E7OP9BOzf/QTs4/0E7
Of9CPDb/Qjw2/0I8Nv9CPDb/Qjw2/0I8Nv9AOjT/QDo0/0A6NP9AOjT/QDo1/0I7L/9DPSr/Qjws
/0M9Kv9FPib/QTsy/0A6Nf9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjT/Pzk2/0I8Lv85M0v/
Kyd1/xMRw/8SEMf/IyCP/z04PP9BOzL/QDo1/0A6NP9AOjT/QDo0/0A6NP9AOjT/QDo1/0I8L/88
NkL/DgzT/xEPyv8AAP//AAD+/wIC+f8gHZj/Qjsv/0A6NP9AOjT/QDo0/0A6NP9AOjT/QDo0/0E6
Mv8/OTj/Hxyd/xUTvf8IB+b/Cgne/xcVtf8VE73/BAPz/yIflP9EPib/Pzk3/0A6NP9AOjT/QDo0
/0A6Nf9CPC3/NjFT/x0aov8cGqX/EhDG/xEPy/8CAfr/AAD+/wAA//8MC9n/QTsy/0A6NP9AOjT/
QDo0/0A6NP8/OTb/Qz0q/zAsZv8YFbP/JCGM/woJ4f8EA/P/BQTx/wYG6/8JCOT/GBaz/z85Nv9A
OjP/QDo0/0A6NP9AOjT/QDo1/0E7Mf88NkH/FBK//yQhi/8YFrL/EA7N/xMRwv8UEr//DQzV/xgW
sv9CPCz/QDo2/0A6NP9AOjT/QDo0/0A6NP8/OTf/RD4m/x4bn/8RD8j/FhS5/wkI4v8AAP//AAD+
/wAA//8tKXH/Qz0p/z85N/9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6M/8/OTb/KSV7/wQD8/8ODdP/
ExHE/xQSwP8qJnr/Qz0q/z85Nv9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjX/QDoz/0M9Kv82
MVT/JiKH/y0ocf9AOjT/RD4o/z85Nv9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6
Nf8/OTb/Qjwt/0U+JP9EPSj/QDo0/z85N/9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjT/QDo0
/0A6NP9AOjT/QDo0/0A6Nv8/OTf/Pzk3/0A6Nf9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjT/
QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9A
OjT/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAA==" rel="icon" type="image/x-icon" />
<!-- <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> -->
<!-- <link rel="icon" href="https://ssl.gstatic.com/ui/v1/icons/mail/favicon.ico" type="image/x-icon"> -->
<!-- <link rel="icon" href="www.basketball.superdocs.com/favicon.ico" type="image/x-icon"> -->
this source claims that you don't need that many lines. 5 lines is enough. but since your favicon is 16x16 and resizing for bigger is unnecessary you can even skip some of those. it depends on the original image size, and what platforms you want to support, but you can even go down to 1 line. (you can ditch favicon.ico if you don't plan to support IE10- and use only png.)
in most cases 4-bit image depth is enough. that means 16 colors, which is more than plenty for your icon example, but works with most logos even in high resolutions. png supports 4-bit, and it saves a ton of space, even though it is lossless. it is smaller then 24-bit jpg or gif files, and has better quality. if 4-bit is not enough 8-bit is still a viable option and no icon needs more. your image was 1150 Bytes, and the 4-bit png version is 202 Bytes (you can use IrfanView to decrease color depth and save as png).
if you can use javascript and you need multiple declarations, you can have js build the html in the browser. you can even use unicode text instead of base64 and convert it with js, or build your icon dynamically (the example below doesn't use js).
i'm not an android expert, but for the example to work this much must be enough:
<link rel="icon" type="image/png" sizes="16x16" href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAMFBMVEU0OkArMjhobHEoPUPFEBIu
O0L+AAC2FBZ2JyuNICOfGx7xAwTjCAlCNTvVDA1aLzQ3COjMAAAAVUlEQVQI12NgwAaCDSA0888G
CItjn0szWGBJTVoGSCjWs8TleQCQYV95evdxkFT8Kpe0PLDi5WfKd4LUsN5zS1sKFolt8bwAZrCa
GqNYJAgFDEpQAAAzmxafI4vZWwAAAABJRU5ErkJggg==" />
My Blogger site generates the following line:
<link href='http://www.mtscollective.com/favicon.ico' rel='icon' type='image/x-icon'/>
And I've also added the following line for Android to use when the site is saved to the home screen:
<link href='http://cdn.mtscollective.com/images/android/icon-196.png' rel='icon' sizes='196x196'/>
The problem is that sometimes Chrome and Firefox use these interchangeably, but I only want them to use the first line. Is it possible to control this?
Thanks
Firefox and Chrome tend to favor PNG pictures over favicon.ico. So you should also declare a 16x16 PNG picture, along with your existing 196x196 picture.
Also note that Firefox uses the last declared PNG picture (this is bug 751712). Make sure you declare the 16x16 picture last:
<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-196x196.png" sizes="196x196">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-16x16.png" sizes="16x16">
Finally, both Firefox and Chrome lack support for the sizes attribute. As a consequence, during the first visit, they will load both PNG pictures (these are bug 751712 (FireFox) and issue 324820 (Chrome)). This is not a serious issue, but good to know this.
I have a website with a mobile version and I am trying to get it so that when someone chooses to Bookmark the website or 'Add to home screen' it will save an Icon to the home screen. I have an Android Samsung Galaxy S3 and no matter what I try I cannot get it to use the icon instead of the standard ribbon with tiny preview in the middle.
Currently..The below code will get it to display the standard ribbon with tiny preview of favicon image but will not display the entire icon:
<link rel="icon" href="http://www.mydomain.com/favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="http://www.mydomain.com/favicon.ico" type="image/x-icon"/>
I have also tried this code as well which only yields the standard ribbon icon when I add the bookmark to my homescreen. Not even a tiny preview like above:
<link rel="apple-touch-icon" href="http://www.mydomain.com/customicon.ico"/>
<link rel="apple-touch-icon-precomposed" href="http://www.mydomain.com/customicon.ico"/>
Note: I have also tried 1) Placing the icon files in the root. 2) Naming the filename to apple-touch-icon-precomposed.ico. 3) Icon is 57x57 and under 40 kb.
I know there is some way to accomplish this because I tested a couple of websites like AOL, and eBay and both save to my home screen with a normal sized icon that appears like an app.
If anyone has run into the same problem and found a solution that works please let me know. I am stumped!
The entire issue was because the website was .htaccess password protected for testing purposes during design and development. All I had to do was move the folder that contained all icons outside of the password protected directory!
The following code is what I used and is now working:
<link rel="apple-touch-icon" sizes="144x144" href="http://m.mydomain.com/touch-icon-ipad-retina.png" />
<link rel="apple-touch-icon" sizes="114x114" href="http://m.mydomain.com/touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="72x72" href="http://m.mydomain.com/touch-icon-ipad.png" />
<link rel="apple-touch-icon" href="http://m.mydomain.com/touch-icon-iphone.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
I keep getting the default Android ribbon bookmark icon, instead of my 114x114 icon for web app. Ideas?
I have tried ...
<link rel="apple-touch-icon" href="/icon.png"/>
<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png"/>
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-114x114-precomposed.png"/>
I have also tried an approach similar to:
if (useragent == blackberry){
use precomposed/use 114x114-precomposed
}
In all variations, I continue to get the default ribbon icon, with the favicon centered in the middle of the ribbon. Isn't it possible to create a home page icon in Android that looks like a native app?
I have iOS and BlackBerry devices handled, but I am having no luck with Androids. It also doesn't seem to matter what browser I use.
Do I need to have full path including domain location? Other ideas?
take à look at this ;)
Configuring Android Web Applications
or this
http://www.mollerus.net/tom/blog/2010/06/web_app_homescreen_icons_in_android.html
this
it should work, it may not work because your path is not the right one, make sure your image is at the root of your web server because you included '/' before your path
bookmark and add to my homescreen 60x60 icon does not apprear.
Make
<link rel="apple-touch-icon" href="images/iphone.png"/>
Size: 60x60 pixels. tried 8bit and 24bit ping! Does not work. Site is on a localhost and not 'online'.
on http://news.bbc.co.uk/sport if I bookmark and add to my homescreen it works! Why?
They use: <link rel="apple-touch-icon" href="/sol/shared/img/iphone-sport.png"/>
Any help appreciated
For Android to pick up the icon you need a precomposed icon
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png"/>
Also mentioned here Configuring Android Web Applications
Add 57x57 png image without any effects like glossy, transparent. Code for the bookmark icon is:
<link rel="apple-touch-icon" href="http://devw3.com/devw3-icon/57x57.png" />
We can use the same code for iphone, ipod touch and ipad but the icon sizes will differ. You can find more about options sizes and how to configure for different devices here: Adding Bookmark Icon On Home Screen IPhone, IPad, IPod Touch And Android