My icons are showing on all other browsers except IOS 10 with Safari when adding to bookmarks/favourites, cannot figure out what is missing or out of place and no help on the forums or documentation. Could someone perhaps tell me the default path used by Safari in IOS 10 to add icons to favorites?
This is my code:
<link rel="apple-touch-icon-precomposed" href="http://www.mainboard.com/apple-touch-icon-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="http://www.mainboard.com/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="http://www.mainboard.com/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.mainboard.com/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="http://www.mainboard.com/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.mainboard.com/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="http://www.mainboard.com/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://www.mainboard.com/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="http://www.mainboard.com/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="http://www.mainboard.com/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="http://www.mainboard.com/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="http://www.mainboard.com/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="http://www.mainboard.com/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="http://www.mainboard.com/favicon-128.png" sizes="128x128" />
<link rel="icon" type="image/png" href="http://www.mainboard.com/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="http://www.mainboard.com/favicon-196x196.png" sizes="196x196" />
<meta name="application-name" content="MAINBOARD"/>
<meta name="msapplication-TileImage" content="http://www.mainboard.com/mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="http://www.mainboard.com/mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="http://www.mainboard.com/mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="http://www.mainboard.comm/stile-310x150.png" />
<meta name="msapplication-square310x310logo" content="http://www.mainboard.com/mstile-310x310.png" />
<link rel="manifest" href="http://www.mainboard.com/manifest.json">
<link rel="mask-icon" href="http://www.mainboard.com/safari-pinned-tab.svg" color="#fff">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="http://www.mainboard.com/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">
I suggest you to submit your site to the favicon checker. If will check your markups and icons. At the time of writing this answer, it is full green. So you can be nearly sure that everything is alright. Full disclosure: I'm the author of this service.
Keep in mind that browsers tend to be very lazy regarding favicon. For example, favicon caching is a recurrent web development issue. In the case of iOS Safari, I often observed that Safari does not always load the icon on time while bookmarking. Consequence: while testing your touch icon, you have the feeling that it does not work. It actually works, but you have to try again a minute later. Frustrating. Another possible issue is that, as the site author, you are constantly visiting your site under development. Maybe Safari considers your touch icon is broken (maybe it was at some point: this is a site under dev after all) so it does not reload it, but will eventually do it... later.
My advice here is to try with another iOS device if you have one at your disposal.
Related
I am setting up my application to bundle css and js files when not in development, and not bundle when in development.
To do that I first have a bundleconfig.json file:
[
{
"outputFileName": "wwwroot/css/bundle.min.css",
"inputFiles": [
"wwwroot/lib/bootstrap/bootstrap.min.css",
"wwwroot/lib/jqueryui.jquery-ui.min.css"
]
},
{
"outputFileName": "wwwroot/js/bundle.min.js",
"inputFiles": [
"wwwroot/lib/jquery/jquery.min.js",
"wwwroot/lib/jqueryui/jquery-ui.min.js",
"wwwroot/lib/bootstrap/dist/js/bootstrap.bundle.js"
]
}
]
Then in my page I have a head tag:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewBag.Title</title>
<environment exclude="development">
<link rel="stylesheet" href="~/css/bundle.min.css" asp-append-version="true" />
<script type="text/javascript" src="~/js/bundle.min.js" asp-append-version="true"></script>
</environment>
<environment include="development">
<link rel="stylesheet" href="~/lib/bootstrap/bootstrap.css" asp-append-version="true" />
<link rel="stylesheet" href="~/lib/jqueryui/jquery-ui.css" asp-append-version="true" />
<script type="text/javascript" src="~/lib/jquery/jquery.js" asp-append-version="true"></script>
<script type="text/javascript" src="~/lib/jqueryui/jquery-ui.js" asp-append-version="true"></script>
<script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.bundle.js" asp-append-version="true"></script>
</environment>
</head>
This all works fine. I'm just not a fan of the fact that I have to duplicate the list of files in the budingconfig.json and in the development environment tag in the header.
In WebForms project I can use <%: Scripts.Render("...") %> and it will generate links for each item in the bundle if in development mode, and it will generate 1 link for the bundle if not in development mode. Is something like this available in .net core MVC projects as well?
There is no build-in way to do this in ASP.NET Core. However it is pretty straight forward to roll your own.
Mad Christensen has build an unpacker for MVC5 and here is a gist that adapts it to .NET Core.
You use it like this:
<environment names="Development">
#Bundler.Unpack(HostingEnvironment.ContentRootPath, "/js/site.min.js")
</environment>
However, if you have no specific reason to include each file other than debugging you can also rely an sourcemaps. There is a flag in the bundleconfig for this. ( "sourceMap": true )
You can try a TagHelper like the following
https://github.com/meziantou/Meziantou.AspNetCore.BundleTagHelpers
That will help you what you want to achieve. Instead of writing following type of code
<environment names="Development">
<link rel="stylesheet" href="~/css/site1.css" />
<link rel="stylesheet" href="~/css/site2.css" />
<link rel="stylesheet" href="~/css/site3.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
You can only write this:
<bundle name="wwwroot/css/site.min.css" />
In production, it uses the minified file and appends the version in
the query string (same behavior as asp-append-version).
In development, it uses all input files and does not append version.
I want to include the following code block in my application.html.erb:
<link rel="apple-touch-icon" sizes="180x180" href="images/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/icons/favicon-16x16.png">
<link rel="manifest" href="images/icons/site.webmanifest">
<link rel="shortcut icon" href="images/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="MenuTranslator">
<meta name="application-name" content="MenuTranslator">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="images/icons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
These ten lines take care of all my icon needs. I've seen this question and frankly I don't know how to get these ten lines using that method, and frankly I'm not that interested in spending time figuring it out when this already works. Except-- it doesn't work, because I'm using the wrong path. images/icons/filename doesn't work.
How can I do this? Does rails not allow me to do this?
Place that images folder inside the app/public/ directory, put a slash in front of all those paths like below (or just copy and paste that) and it will work.
<meta name="apple-mobile-web-app-title" content="MenuTranslator">
<meta name="application-name" content="MenuTranslator">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/images/icons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png">
<link rel="manifest" href="/images/icons/site.webmanifest">
<link rel="shortcut icon" href="/images/icons/favicon.ico">
I am facing problem of stabilizing styles in my html page.
Whenever I am using datepicker (jqmobile UI datepicker), the look and feel is affected terribly. The icons on the header, the icons for closing dialog, the icons for type dropdown all vanishes.
Here is my header portion,
<head>
<meta charset="UTF-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="jquery-mobile/styles/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<link rel="stylesheet" href="jquery-mobile/styles/jqm-icon-pack-fa.css" >
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link type="text/css" href="styles/datepicker.css" rel="stylesheet" />
<link type="text/css" href="jquery-mobile/styles/jquery.mobile.simpledialog.css" rel="stylesheet" />
<script src="cordova.js" type="text/javascript"></script>
<script src="jquery-mobile/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="jquery-mobile/js/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery-ui.js"></script>
<script type="text/javascript" src="jquery-mobile/js/jquery.mobile.simpledialog2.js"></script>
<script src="scripts/Common.js"></script>
<script src="scripts/FlightServices.js"></script>
</head>
If I comment out the line:
link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css
then the icons appear properly but datepicker style is spoiled.
If I put this line:
script src="scripts/datepicker.js"
instead of :
script src="scripts/jquery-ui.js"
Datepicker is completely disabled.
Is there any mistake I am making in this above mentioned portion?
Any wrong file included?
Anyone any suggestion, I shall be thankful.
Thanks
santu ghosh
The order of style sheets is important.
Change the order of style sheets instead of keeping one or the other. Usually, the themes style sheet template should be added first and then, your own style sheet(main.css) which adds in your own modifications to the base template. Edit your main.css to super-impose major conflicts.
I would also recommend putting the mobile style sheets conditionally for mobile platforms only unless this page is strictly for mobile anyways.
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link href="jquery-mobile/styles/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
<link rel="stylesheet" href="jquery-mobile/styles/jqm-icon-pack-fa.css" >
<link href="styles/main.css" rel="stylesheet" />
Mobile Safari requires the use of the following incantation for favicons of a higher resolution than the traditional 16x16:
<link rel="shortcut icon" href="old-16x16-favicon.ico" />
<link rel="apple-touch-icon" sizes="158x158" href="my-new-158x158-icon.png" />
However, Firefox requires the use of the HTML5 syntax, e.g.:
<link rel="shortcut icon" href="old-16x16-favicon.ico" />
<link rel="icon" type="image/png" sizes="158x158" href="my-new-158x158-icon.png" />
Now, my expectation is that it should be possible to combine these into a single line, as follows.
<link rel="shortcut icon" href="old-16x16-favicon.ico" />
<link rel="icon apple-touch-icon" type="image/png" sizes="158x158" href="my-new-158x158-icon.png" />
Does anyone know of any problems with this? We all know things are rarely this simple, and I don't have an iOS device to test against, let alone all the other devices out there that have no-doubt copied the Apple syntax.
This solution is very promising. Unfortunately, it does not work.
I have just tried with an iPad Mini, running iOS 7.0.4 and Safari with the following code:
<link rel="icon apple-touch-icon" type="image/png" sizes="57x57" href="/apple-touch-icon-57.png">
<link rel="icon apple-touch-icon" type="image/png" sizes="114x114" href="/apple-touch-icon-114.png">
<link rel="icon apple-touch-icon" type="image/png" sizes="72x72" href="/apple-touch-icon-72.png">
<link rel="icon apple-touch-icon" type="image/png" sizes="144x144" href="/apple-touch-icon-144.png">
<link rel="icon apple-touch-icon" type="image/png" sizes="60x60" href="/apple-touch-icon-60.png">
<link rel="icon apple-touch-icon" type="image/png" sizes="120x120" href="/apple-touch-icon-120.png">
<link rel="icon apple-touch-icon" type="image/png" sizes="76x76" href="/apple-touch-icon-76.png">
<link rel="icon apple-touch-icon" type="image/png" sizes="152x152" href="/apple-touch-icon-152.png">
Two notes about this code:
The sizes are for iOS7 (eg. 60x60) and prior (eg. 57x57)
The file names were intentionally changed to not match Apple naming conventions. For example, I could see in the server's log that Safari tries to access apple-touch-icon-76x76.png, whatever the HTML code says. So it was necessary to use special names not to be tricked.
The results:
When adding a link to the home screen, Safari fails at finding a suitable picture. It offers a miniature of the site.
When bookmarking the page, Safari takes the 57x57 picture. This is strange, since this size is not the right one (my device is more interested in 76x76 icons) and dedicated to iOS6 and prior.
Too bad, this solution looks good. Yet, even if this test was successful, a lot more tests should have been performed, since several platforms use the Apple icons. In particular, Android. So even if iOS devices would have been smart enough to handle this trick, some other existing or future devices might fail.
I am using Liferay 6.1 and have developed theme in the same. My problem is when i load the theme the head section contains huge links as shown below:
<link rel="alternate" hreflang="ar-SA" href="http://localhost/ar">
<link rel="alternate" hreflang="eu-ES" href="http://localhost/eu">
<link rel="alternate" hreflang="bg-BG" href="http://localhost/bg">
<link rel="alternate" hreflang="ca-AD" href="http://localhost/ca">
<link rel="alternate" hreflang="ca-ES" href="http://localhost/ca_ES">
<link rel="alternate" hreflang="zh-CN" href="http://localhost/zh">
<link rel="alternate" hreflang="zh-TW" href="http://localhost/zh_TW">
<link rel="alternate" hreflang="hr-HR" href="http://localhost/hr">
<link rel="alternate" hreflang="cs-CZ" href="http://localhost/cs">
<link rel="alternate" hreflang="da-DK" href="http://localhost/da">
<link rel="alternate" hreflang="nl-NL" href="http://localhost/nl">
<link rel="alternate" hreflang="nl-BE" href="http://localhost/nl_BE">
<link rel="alternate" hreflang="en-GB" href="http://localhost/en_GB">
<link rel="alternate" hreflang="et-EE" href="http://localhost/et">
<link rel="alternate" hreflang="fi-FI" href="http://localhost/fi">
<link rel="alternate" hreflang="fr-FR" href="http://localhost/fr">
<link rel="alternate" hreflang="gl-ES" href="http://localhost/gl">
<link rel="alternate" hreflang="de-DE" href="http://localhost/de">
<link rel="alternate" hreflang="el-GR" href="http://localhost/el">
<link rel="alternate" hreflang="iw-IL" href="http://localhost/iw">
<link rel="alternate" hreflang="hi-IN" href="http://localhost/hi">
<link rel="alternate" hreflang="hu-HU" href="http://localhost/hu">
<link rel="alternate" hreflang="in-ID" href="http://localhost/in">
<link rel="alternate" hreflang="it-IT" href="http://localhost/it">
<link rel="alternate" hreflang="ja-JP" href="http://localhost/ja">
<link rel="alternate" hreflang="ko-KR" href="http://localhost/ko">
<link rel="alternate" hreflang="lo-LA" href="http://localhost/lo">
<link rel="alternate" hreflang="nb-NO" href="http://localhost/nb">
<link rel="alternate" hreflang="fa-IR" href="http://localhost/fa">
<link rel="alternate" hreflang="pl-PL" href="http://localhost/pl">
<link rel="alternate" hreflang="pt-BR" href="http://localhost/pt">
<link rel="alternate" hreflang="pt-PT" href="http://localhost/pt_PT">
<link rel="alternate" hreflang="ro-RO" href="http://localhost/ro">
<link rel="alternate" hreflang="ru-RU" href="http://localhost/ru">
<link rel="alternate" hreflang="sr-RS" href="http://localhost/sr">
<link rel="alternate" hreflang="sr-RS-latin" href="http://localhost/sr_RS_latin">
<link rel="alternate" hreflang="sl-SI" href="http://localhost/sl">
<link rel="alternate" hreflang="sk-SK" href="http://localhost/sk">
<link rel="alternate" hreflang="es-ES" href="http://localhost/es">
<link rel="alternate" hreflang="sv-SE" href="http://localhost/sv">
<link rel="alternate" hreflang="tr-TR" href="http://localhost/tr">
<link rel="alternate" hreflang="uk-UA" href="http://localhost/uk">
<link rel="alternate" hreflang="vi-VN" href="http://localhost/vi">
I want remove languages that are not needed. I want these links to be removed as this is not the good practice for SEO. I want a default language for a theme. I tried adding translations.disabled=true in the portal-ext file but this didnt worked.
Your any suggestions are appreciated.
You have to restricted to the locales you want to use, adding the "locales" property to portal-ext.porperties. To restrict it to englisch and german for example, you can do this
locales=en_US,de_DE
See also the official wiki documentation
I quote it here:
Removing unwanted language
By default, Liferay supports all the follow languages (excerpt from portal.properties of Liferay 4.3.3):
locales=ar_SA,ca_AD,ca_ES,zh_CN,zh_TW,cs_CZ,nl_NL,en_US,fi_FI,fr_FR,de_DE,el_GR,hu_HU,it_IT,ja_JP,ko_KR,fa_IR,pt_BR,ru_RU,es_ES,sv_SE,tr_TR,vi_VN
If we only want to support English, German and Spanish, we simply remove the unwanted locales so that our locales value looks like this:
locales=en_US,de_DE,es_ES
The portal-ext.properties settings can be overridden my Portal settings at Control Panel > Settings > Display Settings > Available Languages. I'd say it's safe to set them there.
Also, there is a per-page option in the SEO section to disable the canonical links there.
go to web.xml and delete language mapping url after that start the server.
url--tomcat-7.0.42\webapps\ROOT\WEB-INF