Favicon icon is not showing on chrome browser but it is coming on firefox.I am using this line of code :
<link rel="shortcut icon" href="${resource(dir:'images',file:'favicon.ico')}" type="image/x-icon" />
You can not show it in Chrome. Default Globe icon will be displayed for http sites and lock icon will be default for https sites.
Related
I'm using chrome, my favicon works in the browser tab.
However, when move URL to desktop to create shortcut, the chrome logo appears instead.
This is the link I used...
<link rel="icon" type = "image/png" href="img/favicon16.ico" sizes="16x16">
<link rel="icon" type = "image/png" href="img/favicon32.ico" sizes="32x32">
<link rel="icon" type = "image/png" href="img/favicon96.ico" sizes="96x96">
Favicon is not used for that. You need to add a web app manifest file, that points to the correct icon as explained here: https://developer.mozilla.org/en-US/docs/Web/Manifest
Edit: I might be wrong and the manifest.json might only work for mobile
Desktop chrome shortcuts do not have the same icon as a favicon and will open in the program you have as the default for that extension, in this case chrome. You can sometimes customize desktop shortcut icons.
I am using Dreamweaver and I tried to create a favicon to show logo on the address bar and i put this tag in the head tag of html page
<link rel="icon" href="images/favicon.png" type="image/png">
also I tried the ".ico" extension but still nothing is shown on the address bar browsers (chrome - firecox and internet explorer)
so any suggestion as I followed the steps as this link https://en.wikipedia.org/wiki/Favicon
Having read how to add a custom home screen icon for my web app, I have spent days trying to make it work and whatever I do, the Add to Home Screen process results in an icon based on the screen shot of the current web page.
I have tried using the default file names alone
I have tried using the <link rel="" href=""> definitions and the icons
I have tried putting the icons in the root directory and one level down
I have tried 57x57, 72x72 and 114x114 sized icons, with and without the sizes definition
I have tried precomposed and normal with and without the corresponding change to the rel name
But whatever I do the Add to Home Screen process on my iPhone 4 running iOS 6.3 ignores whatever icon I define and gives me a screen shot based icon. I am tearing my hair out.
How can I find what is going wrong? How do I debug this process to find what is wrong? I have mobile safari linked to safari on the desktop to see what is going on but I am none the wiser.
You might be missing some meta definitions. For example this works in our web apps. Check that the png you're using is valid image.
<!DOCTYPE html>
<head>
<link rel="apple-touch-icon" href="/img/appicon-57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/img/appicon-72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/img/appicon-114.png" />
<link rel="shortcut icon" href="favicon.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
...
I have a web application that will be used on iPhones, and want to provide the icon to be shown when added as a homescreen shortcut.
How can I do this?
Use this HTML code in the <head> section of your start page:
<link rel="apple-touch-icon" href="my_icon.png" />
I am looking at calling different CSS for desktop and iPad browsers.
For desktop, I am using
<link rel="stylesheet" media="only screen and (min-width:1000px)" href="desktop.css">
and for iPad, I use
<link rel="stylesheet" media="only screen and (device-width:768px)" href="desktop.css">
When I say desktop browsers, I am referring to IE8 and above, FF4+, Safari 5+ on MAC
But for some reasons, the desktop CSS does not get applied in IE8.
Please suggest the best approach such that I can clearly separate desktop/iPad and also it would work on all desktop browsers..
#testndtv; mediaquery is not work in IE. for this you have to use Response.js
The easiest way is to add
<!--[if IE ]><link rel="stylesheet" media="screen" href="desktop.css"><![endif]--> to you <head> tag.