When a website provides more than one favicon link tag, what kind of rules does a browser take to determine which icon to be actually used?
For example, the html src of IMDB includes following snippet:
<link href="https://m.media-amazon.com/images/G/01/imdb/images/safari-favicon-517611381._CB483525257_.svg" mask="" rel="icon" sizes="any">
<link rel="icon" type="image/ico" href="https://m.media-amazon.com/images/G/01/imdb/images/favicon-2165806970._CB470047330_.ico">
<meta name="theme-color" content="#000000">
<link rel="shortcut icon" type="image/x-icon" href="https://m.media-amazon.com/images/G/01/imdb/images/desktop-favicon-2165806970._CB484110913_.ico">
<link href="https://m.media-amazon.com/images/G/01/imdb/images/mobile/apple-touch-icon-web-4151659188._CB483525313_.png" rel="apple-touch-icon">
<link href="https://m.media-amazon.com/images/G/01/imdb/images/mobile/apple-touch-icon-web-76x76-53536248._CB484146059_.png" rel="apple-touch-icon" sizes="76x76">
<link href="https://m.media-amazon.com/images/G/01/imdb/images/mobile/apple-touch-icon-web-120x120-2442878471._CB483525250_.png" rel="apple-touch-icon" sizes="120x120">
<link href="https://m.media-amazon.com/images/G/01/imdb/images/mobile/apple-touch-icon-web-152x152-1475823641._CB470042035_.png" rel="apple-touch-icon" sizes="152x152">
Which icon is selected and what does other ones used for?
I noticed that the one with rel="shortcut icon" is always set as highest priority. If so, what will a browser do with a webpage with multiple shortcut icon tag?
What will a browser do with a webpage with multiple shortcut icon tag?
I've experimentally tested that when multiple shortcut icon links are provided, as long as each link has some different attribute such as the type or size, the browser will pick the best icon depending on factors such as the screen DPI or the accepted MIME types.
As a matter of fact, I have the following snippet in the header tag of a website I made:
<link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon" sizes="16x16">
<link rel="shortcut icon" href="/assets/16x16.png" type="image/png" sizes="16x16">
<link rel="shortcut icon" href="/assets/32x32.png" type="image/png" sizes="32x32">
I've noticed that every modern browser will pick the PNG version of the icon. In fact, I haven't seen any usages of the MS-ICO version of the icon, although I haven't tested if older browsers (such as older versions of IE) will pick the ICO version over the PNG version.
When a HiDPI screen is used, I've noticed the 32x32 version will be picked in order to be presented as a 16x16#2x favicon in the tab. Otherwise, the 16x16 version will be picked. Moving the browser window from a HDPI to a non-HDPI browser window will make the browser re-evaluate the current favicon and if needed, it will change it.
The proper link relation (link rel="") for creating a bookmark icon doesn't include the word "shortcut" .
According to this page: https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types
The shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore.
There are some sites which don’t even declare an icon. All browsers will simply check for a (favicon.ico) file at the root level of your website.
Shortcut is simply a workaround to designate an icon that is not named favicon.ico.
i.e You will have to use “shortcut” if you need multiple icons for various pages or subdomains. (also you need to specify a path to a specific ICO file.)
<link rel="shortcut icon" href="path/to/icon.ico" />
Related
I'm building a website in HTML, and hosting it via GitHub Pages. You can take a look of it here: http://marcuscodes.me/
It has previously shown normally with this code:
I also tried using favicons:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico?">
I have tried adding a ? to my path as shown here:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico?">
However, it still does not show.
I have tried these steps:
Refreshing browser cache
Using different browser
using different device
You can view the full source code here. https://github.com/inkthought-labs/website
Thanks for any help!
In your index.html, you used this to supposedly create the favicon:
<link rel="icon" href="https://i.ibb.co/SBX2vY1/inkthoughtinvis.png">
However, you forgot the type attribute. It should be:
<link rel="icon" type="image/png" href="https://i.ibb.co/SBX2vY1/inkthoughtinvis.png" />
Additional note: If permitted by copyright licenses, it is best that you download the image to your local storage and then set the location into the href attribute. In the scenario that the website host removes the image, it will not display.
<link rel="icon" type="image/png" href="https://i.ibb.co/SBX2vY1/inkthoughtinvis.png" />
I've been able to set it so that when I add the site to an iOS homescreen the proper icon shows. It also shows in any web browser. However, when I use iOS Safari, go to the site, book mark it to the bookmark list, a C shows for the icon. I want our icon to show just like it does for www.apple.com or
www.sunsetwx.com
This is our site: www.cbcexeter.org that I'm using:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=kPgOnJYLYR">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=kPgOnJYLYR">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=kPgOnJYLYR">
<link rel="manifest" href="/manifest.json?v=kPgOnJYLYR">
<link rel="mask-icon" href="/safari-pinned-tab.svg?v=kPgOnJYLYR" color="#bd4c4c">
<link rel="shortcut icon" type="image/png" href="/favicon.png?v=kFginJYoYs">
<meta name="theme-color" content="#ffffff">
I've tried .ico and it hasn't worked.
Thanks in advance.
Thank you for your question. It made me check out my own site and I found you were right. My fav icon wasn't showing in Safari. Instead there was a default icon with the starting letter of my site.
After a quick search I found this awesome page: http://realfavicongenerator.net/
Not only you can check your existing icons, it also lets you upload your icon and test it agains various devices/systems. Then replace singe images (e. g. i have a colored png for iOS homescreen but a monochrom vector for the safari bookmark and yet another one for android).
Then just generate and download the icon pack and upload it to your server, include the generated code in the <head> of your page and you are good to go.
UPDATE
For me it looks like it is working with your site now:
I would highly recommend using http://realfavicongenerator.net/. It automates the whole thing and generates the icons as well as copy-paste code and instructions to set it up.
Are there any alternatives to the default option in web browsers, like chrome that allows me to add a link or button in my webapp and create an icon in homescreen?
For example, I have my webapp and i want a link or button in the main.html that execute an script and create the icon in the homescreen. It is not possible i think. So are there any alternatives that simulate this default option in web browsers?
Also i want to specify the icon that shows in the homescreen. How can i do that?
I want to specify the icon that shows in the home screen. How can i do that?
You can use <link rel="apple-touch-icon" sizes="128x128" href="niceicon.png"> (yes, even for Android device).
Please check iOS document for detail information on Apple devices. Please note you can even define icon for the entire website.
Please check Android document for detail information on Android devices. If <link rel="apple-touch-icon" sizes="128x128" href="niceicon.png"> does not work, you can try <link rel="icon" sizes="192x192" href="nice-highres.png">, which is the recommended method in Android.
Are there any alternatives that simulate this default option in web browsers?
You can check http://cubiq.org/add-to-home-screen for an alternative. "add-to-home-screen" will show an overlaying message encouraging user to add the web app to the homescreen.
Note: Thanks to adam0404's comment, cubiq.org link is broken now. Fortunately, the "add-to-home-screen" library was uploaded to GitHub, please check https://github.com/cubiq/add-to-homescreen
First line apply to Web and Android, second line apply to iOS omit sizes tag to specify only one icon.
if jpg
<link rel="shortcut icon" type="image/jpeg" href="favicon.jpg">
<link rel="apple-touch-icon" href="favicon.jpg">
if png
<link rel="shortcut icon" type="image/png" href="favicon.png">
<link rel="apple-touch-icon" href="favicon.png">
How to set rel="shortcut icon" on image page ?
When i access EG: example.com/food.png
I want to display rel="shortcut icon" on image page, how can i do that ?
In other php page i write <link rel="shortcut icon" href="food.png"> in <head> tag
But in image page EG: example.com/food.png how to add rel="shortcut icon" ?
you can test on this link http://ir.ebaystatic.com/pictures/aw/homepage/eBayTodayCoverPhotos/UK/Sale_27062014_2.jpg you will see favicon of ebay , how can i do that ?
All that you need to do is place image file favicon.ico in your main site directory eg public_html/favicon.ico place that way file with name and extension favicon.ico size 16x16 it will be shown in every pages of your site including in image preview also Here is example http://srpskalegija.bplaced.net/forumhtml/images/logo.gif
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png">
This is achievable, just insert put the PNG image in your root directory the, linking absolutely will help. Put the above link tag in your head.
I guess the PNG image would work fine, but if it doesn't just convert your image to ico format and replace the type with ico. I suggest just converting it in .ico format as it has more support.Check this wiki link Favicon Browser Implementation and Support
I've seen that some browsers do take time to display the favicon if you've changed it or added a new one, anyways it'll work fine. After you've done that, when you open any image suppose at this URL
example.com/img/one.png it'll show the favicon on the tab, that's what you want right? :D
Here is a solution.
<link rel="icon" href="address" sizes="32x32">
<link rel="icon" href="address" sizes="192x192">
<link rel="apple-touch-icon-precomposed" href="address">
<meta name="msapplication-TileImage" content="address">
The image next to the page title in the browser tab - how can you link an image here?
That image is called 'favicon' and it's a small square shaped .ico file, which is the standard file type for favicons. You could use .png or .gif too, but you should follow the standard for better compatibility.
To set one for your website you should:
Make a square image of your logo (preferably 32x32 or 16x16 pixels, as far as I know there's no max size*), and transform it into an .ico file. You can do this on Gimp, Photoshop (with help of a plugin) or a website like Favicon.cc or RealFaviconGenerator.
Then, you have two ways of setting it up:
A) Placing it on the root folder/directory of your website (next to index.html)
with the name favicon.ico.
or
B) Link to it between the <head></head> tags of every .html file on your site, like this:
<head>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
If you want to see the favicon from any website, just write www.url.com/favicon.ico and you'll (probably) see it. Stackoverflow's favicon is 16x16 pixels and Wikipedia is 32x32.
*: There's even a browser problem with no filesize limit. You could easily crash a browser with an exceedingly large favicon, more info here
It is called 'favicon' and you need to add below code to the header section of your website.
Simply add this to the <head> section.
<link rel="icon" href="/your_path_to_image/favicon.jpg">
This is the favicon and is explained in the link.
e.g. from W3C
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
Plus, of course the image file in the appropriate place.
Add a icon file named "favicon.ico" to the root of your website.
<link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file:
'apple-touch-icon-retina.png')}">
or you can use this one
<link rel="shortcut icon" sizes="114x114" href="${resource(dir: 'images', file: 'favicon.ico')}"
type="image/x-icon">
ADD THIS
**<HEAD>**
< link rel="icon" href="directory/image.png">
Then run and enjoy it