android


Separate favicon and android homescreen icon


In reference to these thorough write up's on the madness that is fav icons:
http://www.jonathantneal.com/blog/understand-the-favicon/
https://mathiasbynens.be/notes/touch-icons
http://en.wikipedia.org/wiki/Favicon
Android is now starting to use the <link rel="icon" .. /> syntax for it's homescreen icons which is the same as the fav icon syntax.
Does anyone have the mysterious size combinations and ordering to be able to target android with a separate homescreen icon and still keep cross browser compatibility.
For example our fav icon has a transparent background and we'd prefer dedicated icons for homescreens.
Answer
Build and declare the following icons in this order:
192x192 PNG icon (designed for Android)
194x194 PNG icon (classic favicon design, with transparency)
32x32 PNG icon (classic favicon design, with transparency)
Note: Android Chrome may use the 192x192 icon for both home screen and bookmark, although v37 does not seem to do so.
You can use this favicon generator to create code and pictures you can use as a template. Since it does not support differentiated pic for Android, you will need to add the 194x194 picture manually. Full disclosure: I'm the author of this site.
Explanations
For reference, Android Chrome uses a 192x192 icon
<link rel="icon" sizes="192x192" href="/favicon-192x192.png">
I've made some experiments about the Android Chrome favicon. The conclusions:
Android Chrome really uses the 192x192 icon.
If it cannot find a 192x192 icon, it looks for lower definition icons: 191x191. Else, 190x190. Else...
It does not use anything above 192x192. For example, if you offer a 16x16 icon and a 194x194 icon, Chrome picks the 16x16 icon, even if the 194x194 icon sounds like a better choice.
About the other browsers: as far as I know, there is no other browser that explicitly picks the 192x192 icon. Good. Else, that would be a blocking issue. There are two policies to deal with:
Some browsers choose some low definition PNG icons (eg. Windows Firefox uses a 32x32 PNG icon).
Some browsers choose the PNG icon with the highest definition (eg. IE 11).
With these information, the game is now to offer to both kind of browsers what they want, so no one (but Android Chrome) will take the special 192x192 icon. Thus the answer above.
A little additional twist about the order. Normally, it is irrelevant, since a browser is supposed to select an icon based on its size only. Except for Firefox, which picks the last declared icon.

Related Links

issues in writing files to sd card in android api 23(marshmallow)
How to detect conference call in Android?
Android - contacts address field updating to other fields
Google Maps Api don't work when uploaded
IBM MobileFirst direct update failure
Android Socket IO connection established 2 times
How to handle click event in recyclerview in Android?
why using android:configChanges is a bad practice
Some problems with android listview
android - Firebase Notification Push Notification not working
Clear network cache using Picasso
Merging 2 videos in android
How to create a floating label entry in Xamarin Forms?
Getting String address in spinner instead of Strings form Array List in SQLite?
OnItemClickListener not triggering in dialog fragment
Dependent Spinners and unwanted `setOnItemSelectedListener` triggering

Categories

HOME
phantom-dsl
gridview
character-encoding
interface
obfuscation
solaris
limit
hpc
nuget-package
gluon-mobile
opengl-3
teechart
tput
azure-powershell
alpacajs
glyphicons
searchview
mvc-mini-profiler
html5-appcache
postscript
dynamically-generated
mat
apktool
soot
datastax-enterprise-graph
failover
volatile
powershell-ise
dynamic-jasper
hunspell
slacktextviewcontroller
browser-extension
apiary.io
watchman
projects-and-solutions
demo
vaadin-elements
serde
dbcontext
colorbar
pdf-conversion
css-transforms
flac
trigger.io
mathcad
pacemaker
microstation
dotnetnuke-7
neon
windows-azure-queues
udpclient
html-to-pdf
ellucian-scribe
nupic
jparsec
roadkill-wiki
fuelcms
sony-lifelog-api
batik
mod-proxy
sha512
mirror
snoop
procedural-programming
webfinger
lambda-architecture
ebay-lms
asdf
process-explorer
monotouch.dialog
faye
screen-size
cgbitmapcontextcreate
globals
zen
scrollbars
fault-tolerance

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App