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.
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" />
How to get an icon from address bar of Opera, I.E. and other browsers?
The question us not specific
if you want to download that icon
then you can try
domainname.com/favicon.ico, if that
doesnot work then view the source
code of the page on the
<html><head> section search for
link rel="shortcut icon".
following is the favicon for
stackoverflow
<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">
If you want to put such icon for
your website then put a ico file in
root folder of you document root or
link each page above code in
section with href to
your icon file, preferably (16X16)
or (32X32)
The icon is called favicon.ico.
Put a .ico file in the root web directory.
I am already using the standard way of adding a favicon:
<link rel="icon" type="image/gif" href="/graphics_card/favicon.gif">
<link rel="shortcut icon" href="/graphics_card/favicon.ico">
so the favicon.gif and .ico are both supposed to reside on
/graphics_card
However, I found that IE 8 (or maybe other IE) cannot show it, (update: no matter how many times I pressed CTRL-F5, or clear the browser cache), but as soon as the .ico file is present in that directory where the index.html is, then it will show.
So if it is
http://www.example.com/graphics_card/nvidia/index.html
there needs to be a favicon.ico in
/graphics_card/nvidia/
too. I ended up specifying it as
<link rel="icon" type="image/gif" href="/graphics_card/favicon.gif">
<link rel="shortcut icon" href="favicon.ico">
and just put a favicon.ico in that directory. Is this the standard way?
No, you can put it anywhere if you specify it in the tag. However, for IE, you need to give a fully qualified URL (i.e. not a relative url).
You can put it anywhere else and use the <link> tag to refer to it. e.g.
<link rel='shortcut icon' href='/images/favicon.ico' type='image/x-icon' />
However it is good practice to put it on the domain root e.g. http://example.com/favicon.ico, because modern browsers will actually do a call to that file when loading pages to load the icon first.
After peeking at the SO source, I noticed this tag:
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
Which after a quick Google revealed an Apple "favicon" type thing for display on your homepage ("WebClip Bookmark" to be exact).
The only other one that jumps to mind is the:
<input type="search" results="5"/>
(source: alexking.org)
This type="search" causes the field to "inherit" the Apple search icon, and the optional results="x" enables a history of "x" keywords to be maintained.
I'm therefore wondering, what other Apple/Safari (iPhone/iPod Touch) specific HTML tags and attributes are out there that I'm not aware of! Curious minds need to know!
<meta name="viewport" content="width=320, initial-scale=2.3, user-scalable=no">
Allows you to set the width, height and scale values
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Set the status bar style, pretty self explanatory.
<meta name="apple-mobile-web-app-capable" content="yes" />
As Marc mentioned above, and is explained in the daringfireball.net link, allows the webpage to be run in full-screen mode, as opposed to through safari.
There's other various attributes that are supported and are documented here: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
Thought I'd add my own answer with some new things I've seen crop up.
1.) There's an option for providing a higher definition iPhone 4 retina display icon
<link rel="apple-touch-icon" href="icons/regular_icon.png" />
<link rel="apple-touch-icon" href="icons/retina_icon.png" sizes="114x114"/>
2.) If you find the default glossy overlay that iPhone/iPod/iPad places on app icons is too much, you can request to not have it added by adding "precomposed" to the rel attribute.
<link rel="apple-touch-icon-precomposed" href="/images/touch-icon.png" />
3.) You can make iPhone links for phone/sms texting directly do the desired action
Call us
Text us
4.) Not quite an HTML tag, but a handy option for toggling CSS based on orientation
<script type="text/javascript">
function orient(){
switch(window.orientation){
case 0:
document.getElementById("orient_css").href = "css/iphone_portrait.css";
break;
case -90:
document.getElementById("orient_css").href = "css/iphone_landscape.css";
break;
case 90:
document.getElementById("orient_css").href = "css/iphone_landscape.css";
break;
}
}
window.onload = orient();
</script>
5.) You can provide a special CSS stylesheet for iPhone 4's retina display which supports 4x as many pixels as the original.
<link rel="stylesheet" type="text/css" href="../iphone4.css"
media="only screen and (-webkit-min-device-pixel-ratio: 2)" />
Thanks to #Sarah Parmenter over on 24 ways for this added information.
A useful header tag for single-purpose webapps is apple-mobile-web-app-capable. When the user creates a home screen shortcut for the site, it will launch in 'fullscreen' mode, separate from the normal Mobile Safari application and without the URL bar or other chrome. If the site is nicely designed it can feel almost like a native iPhone app.
The above mentioned documentation has moved. These are the new locations.
Safari HTML Reference:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/
Safari Web Content Guide:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/
#scunliffe I took your orientation switch a step further:
function orient(o){
switch(o){
case -90:
case 90:
$('#container').removeClass().addClass('landscape');
break;
default:
$('#container').removeClass().addClass('portrait');
break;
}
}
It turns out, there are a lot of them!
I found this one interesting:
To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png or apple-touch-icon-precomposed.png. If you use apple-touch-icon-precomposed.png as the filename, Safari on iPhone won’t add any effects to the icon.
precomposed is available to iPhone OS
2.0 and later
The DaringFireball link Marc shared links to the Safari Web Content guide. As mentioned by Andy, you have to sign up for it, but it's free and easy (well, not as easy as OpenID, but close).
Safari Web Content Guide