icons - Mobile Favicons -


so i'm doing research regarding mobile site user experience , stumbled upon fact of whole favicon.ico being outdated , all.

looking around i've gathered require various new sets of images/icons present "favicon" on various mobile devices android, iphones , windows phones.

now question here is, i've got following code:

<link rel="apple-touch-icon" sizes="57x57" href="images/favicons/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="images/favicons/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="images/favicons/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="images/favicons/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="images/favicons/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="images/favicons/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="images/favicons/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="images/favicons/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="images/favicons/apple-touch-icon-180x180.png"> <link rel="icon" type="image/png" href="images/favicons/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="images/favicons/favicon-194x194.png" sizes="194x194"> <link rel="icon" type="image/png" href="images/favicons/favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="images/favicons/android-chrome-192x192.png" sizes="192x192"> <link rel="icon" type="image/png" href="images/favicons/favicon-16x16.png" sizes="16x16"> <link rel="manifest" href="images/favicons/manifest.json"> <meta name="apple-mobile-web-app-title" content="jojo productions"> <meta name="application-name" content="jojo productions"> <meta name="msapplication-tilecolor" content="#00aba9"> <meta name="msapplication-tileimage" content="images/favicons/mstile-144x144.png"> <meta name="msapplication-config" content="images/favicons/browserconfig.xml"> <meta name="theme-color" content="#555555"> <link rel="shortcut icon" href="favicon.ico">

but me huge chunk of code show favicon properly. wondering able remove , should keep present on "most" mobile devices.

most other websites make use of mobile favicons use handful of above mentioned code, being the: 57x57, 72x72, 114x114 , 144x144 being apple-touch-icons. images/code parts important iphone or other mobile users? or possible have bit more optimised?

either way information.

edit

so further research i've gotten result seems work okay on modern devices:

<meta name="msapplication-config" content="images/favicons/browserconfig.xml"> <meta name="msapplication-tileimage" content="images/favicons/mstile-large.png"> <meta name="msapplication-tilecolor" content="#ae8160"> <meta name="application-name" content="jojo productions"> <link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48" href="favicon.ico"> <link rel="icon" type="image/png" sizes="32x32" href="favicon.png"> <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">

which of course better me amount of code/images has been decreased significantly. , long works on modern mobile devices i'm happy.

with combination of "cheat sheet", this tutorial, , philippe b. managed this.

either way , in coming years they'll make proper standard favicon!

to address many platforms possible without large set of icons, need 4 icons:

  • a png icon, modern, desktop browsers.
  • an apple touch icon mobile browsers (ios safari of course, android chrome , many others; , mac os yosemite safari).
  • favicon.ico, legacy browsers (think ie 9, 8, ...).
  • a tile icon ie on windows 8 , 10.

this gives us:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" href="/favicon.png" sizes="32x32"> <link rel="shortcut icon" href="/favicon.ico"> <meta name="msapplication-tileimage" content="/mstile-144x144.png"> <meta name="msapplication-tilecolor" content="#00aba9">

a few comments code:

  • apple-touch-icon.png 180x180, highest supported resolution ios (ios 8 on iphone 6+ , retina ipad). lesser platforms scale icon down.
  • apple-touch-icon.png named way , placed in root directory of web site because convention apple. if place or name differently, notice 404 errors in server's logs. nothing worry if can avoid them...
  • favicon.png 32x32. not small , not large. might make large, no significant benefits.
  • favicon.ico in root directory of web site because convention ie. example, yandex search engine expects here.
  • in example, used mstile-144x144.png , no browserconfig.xml. did because looks easier (this 2 lines of html , picture; no xml file involved). choice arguable. msapplication-tileimag , msapplication-tilecolor metas introduced win 8.0 / ie 10 have been replaced browserconfig.xml in win 8.1 / ie 11. browserconfig.xml longer term solution. plus, if put file in root directory of site, don't have declare in html: ie 11 find convention ("favicon.ico" style). note coast opera picks msapplication-tileimag bookmarks. make choice!

a final note: large code chunk quote in question generated realfavicongenerator. author of tool, question makes me sad ;-)


Comments

Post a Comment

Popular posts from this blog

c# - Validate object ID from GET to POST -

i have method allows user access comment have made on site. have post method lets them update comment. my normal solution send entire comment model through, let them update it, update on database when post back. involve sending commentid through in hiddenfor , can manipulated. how can verify commentid sent in get method same i'm getting in post , not able alter comment wish? how can verify commentid sent in method same i'm getting in post? basically have validate following things in post - user logged-in user. authenticated users post comments. commentid in post , should valid commentid , should present in database. userid associated logged-in user should same userid associated comment . comment should contain userid column, can check @ time of update. to make sure update happens comment has been sent in get - hold commentid in session , in post action compare commentid value in session .
Read more

node.js - Custom Model Validator SailsJS -

when using custom model validator checks record within model. return within spread doesn't seem end control flow. //post.js model /** * custom validator **/ types: { isuservalid: function(user_id) { var promise = require('bluebird'); promise.all([ user.findone({id: user_id}) ]) .spread(function(user) { console.log(user); if (user === null || user === undefined) { console.log('failed'); return false; }else{ console.log('passed'); return true; } }); } }, my response standard validation failed response. { "error": "e_validation", "status": 400, "summary": "1 attribute invalid", "model": "post", "invalidattributes": { "owner": [ { "rule": "isuservalid", ...
Read more

php - Find a regex to take part of Email -

i have following emails need extract part from: bestellnummer xxx: 1 von xxx, 1er pack ------------- anfang der nachricht ------------- foo bar baz foo bar baz // <<<<< need text here ------------- ende der nachricht ------------- ------------- anfang der nachricht ------------- foo bar baz foo bar baz ------------- ende der nachricht ------------- there 0 unlimited occurences of ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- and i'm able extract first part regex: $re = "/------------- .*? -------------.?(.*?).?------------- .*? -------------/s"; but, i'm quite new on learning regex, i'm pretty sure there must better regex extract part (foo bar baz foo bar baz) of text between ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- as can in different languages, i'm using .? to match between hyphens. i...
Read more