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">
Related
Unsolved
I want the proper png to show up in the browser tab while still maintain the app I use to connect my website with uses the gif favicon
So I'm using metamask as an extension and it automatically looks for the first favicon so thus my first favicon is a gif for an animation. But while firefox automatically uses the png version of my favicon, how do I get a browser like Chrome to use the png version as well in the browser tab menu?
So the HTML goes like this...
<link rel="icon" href="%PUBLIC_URL%/animation.gif" type="image/gif" >
<link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/favicon144.png" />
The first is the gif which I need to be first due to metamask and the second is the png version which chrome skips over.
I am currently using Chrome version 79.0.3945.117. Using this code in HTML, it correctly displays the PNG icon.
Code:
<link rel="icon" href="animation.gif" type="image/gif" >
<link rel="shortcut icon" href="favicon.png">
There doesn't seem to be any problems or interferences with my case.
For debugging, I recommend that you check for any 404 errors finding the image, or in other words, the wrong href route. Also, try clearing the cache of your browser and reload.
Glad to answer.
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" />
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.
the last opened pages got a shortcut in chrome and safari on smartphone. but my page not.
how do I set up the picture for this?
for example ikea and bild works
favicon is set
<link rel="shortcut icon" href="include/designs/wirte/favicon.ico">
<link rel="shortcut icon" href="include/designs/design/images/favicon.png" type="image/x-icon">
<link rel="icon" href="include/designs/design/images/favicon.png" type="image/x-icon">
iOS Safari uses the Apple Touch icon for this purpose and also bookmarks and home screen icons. You definitely want to declare this one.
Android Chrome is similar, it reuses the icon it already takes for bookmarks and home screen icons:
A high resolution icon declared in a Web App manifest.
Else, a high resolution PNG icon.
Else, the classic Apple Touch icon.
As an alternative to the classic, manual creation, you can use this online favicon generator. It allows you to design your icons platform per platform and creates the icons and HTML you need to get the job done. Full disclosure: I'm the author of this site.
Add this code with your favicon.
<link rel="SHORTCUT ICON" HREF="/favicon.png">
After going through the page source, I found:
<link rel="apple-touch-icon image_src" href="//cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png?v=41f6e13ade69">
But even after I did that, my image still has a bored effect. My image is also a transparent png. Any ideas?
Here is my attempt (10.10.1 OS X Yosemite, Safari: Version 8.0.2):
I used this website to generate the favico:
http://realfavicongenerator.net
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
Two things in this answer:
How I did to reproduce StackOverflow's behavior
Why this may not be a good idea
How to reproduce StackOverflow's behavior
What I did:
Download http:////cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png
Submit this picture to RealFaviconGenerator (full disclosure: I'm the author of this site)
Put the generated pics and HTML in a test web site
Access it with Safari and add a bookmark
I got your expected result, ie. a transparent background.
This is basically what you did, so there must be something wrong. A few tips:
There can be a lot of issues with favicon, whatever the browser. They often cache the old icon and do not load the new one. Sometimes they do not load your icon at all, but load it if you wait a few seconds. And so on. My advice: try to use another domain to make sure you start from a fresh state.
Maybe your test web site as some additional stuff that can conflict with your actual test. For example, if you have a file apple-touch-icon.png in your root directory, Safari may load it, even if it is not declared in your HTML code.
Why this may not be a good idea
Mac OS Safari relies on the Touch icon, primarily designed for iOS. It is mainly used for the "Add to home screen" feature. In that case, iOS prevents transparency and fills transparent regions with black. Add StackOverflow.com to the home screen and you get:
Honestly the result is okay, but is this really what SO expected? Your choice.
I figured out the problem here.
The farthest one on the right has a TLD of .io
The center one has a TLD of .com
They are exact clones, the same code on. So it must be because the domain TLD is not .com/.net
Edit:
To further recap information I found about this. It seems like adding a www in front of my domain, allows it to be fully transparent.
mysite.com works
www.mysite.com works
mysite.io doesn't work
www.mysite.io works
Transparent Apple Touch icons are indeed possible. What you need to do is strip all excess information from the PNG using ImageOptim for Mac or a similar program on Windows. I did extensive research and stumbled on the answer by looking at the Apple Touch icon used by the Virtual DJ site. This icon keeps its transparent background on iOS and MacOS Sierra. I looked at the file size and realized how small it was compared to the custom apple touch icons with transparency that I made for my favorites in Safari. Next I looked at the file information using the inspector in Mac's Preview app. All of my custom apple touch icons had four tabs in the inspector section named General, exif, PNG and TIFF. The virtual DJ icon only had two tabs named PNG and General. Once I ran my custom images through ImageOptim the file sizes plummeted by over 90% and the extra TIFF and exif tabs disappeared from the inspector in Preview. Sure enough once I reloaded my custom images and launched Safari all of my Favorites tabs have transparent backgrounds!