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.
Related
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 have added a favicon to my website build (currently on my local machine) using the below code and it appears as it should in Chrome. When I open the file in Safari and bookmark the page the icon doesn't show up (just a letter) and the same on my MacBook touchbar...
I used this website to generate my favicon https://realfavicongenerator.net
Will it not show because it is sitting on my local machine?
I know it is a small thing in a website build but I would like to get it right! Any help would be greatly appreciated.
<link rel="apple-touch-icon" sizes="180x180" href="favicon_package_v0.16/apple-touch-icon.png">
<link rel="apple-touch-icon" href="favicon_package_v0.16/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon_package_v0.16/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon_package_v0.16/favicon-16x16.png">
<link rel="manifest" href="favicon_package_v0.16/site.webmanifest">
<link rel="mask-icon" href="favicon_package_v0.16/safari-pinned-tab.svg" color="#079992">
<meta name="msapplication-TileColor" content="#bdc3c7">
<meta name="theme-color" content="#ffffff">
Delete Safari’s favicon cache
If you’re experiencing favicons that aren’t right, maybe they have icons for different websites, clearing the cache and starting over is a good option.
Close and quit Safari.
Using Finder, click Go > Go to Folder from the menu bar
Enter ~/Library/Safari/Favicon Cache/ in the pop-up window and click Go.
Select all items in the cache folder and move them to the Trash. You can select all with the keyboard shortcut Command + A and then drag them to your Trash or right-click and pick Move to Trash.
Source: https://www.idownloadblog.com/2020/09/08/refresh-favicons-in-safari-mac/
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">
I have used the online tool RealFaviconGenerator to generate the favicons for my website, to support a variety of devices and browsers.
Most of my favicons have a transparent background, except for the apple-touch-icons as iOS adds a black background, which I do not want. So, I have manually added a white background and used that image instead for iOS.
The favicons work well with all the devices I have tested so far, except for Google Chrome on iOS (specifically, an iPad mini 1). What I want is the browser to use one of the icons with a transparent background, like it does on a computer (probably either favicon.ico or favicon.png). However, Chrome is instead using one of the apple-touch-icons, which has a white background.
My question is: Is this behaviour normal for Chrome on all iOS devices, or am I doing something wrong?
Additional Information:
I am not sure if this is relevant, but I am adding it anyway.
In order to make it easier to organise the favicon images, I put them all in a separate folder (instead of the root directory). However, I left the favicon.ico and browserconfig.xml files in the root folder, and removed the explicit links as the FAQ of the generator recommends so:
When your favicon is in the root directory, RealFaviconGenerator does
not generate this code. This is because it somehow confuses some other
browsers like Chrome. And since IE looks for a file named favicon.ico
anyway, the best solution is to not even talk about it.
By default, Internet Explorer 11 looks for browserconfig.xml at the
root of the web site.
Any help will be gladly accepted!
UPDATE:
This is what I have in my <head> now. Notice that I have also added the favicon.ico as a <link>. When I tried using this, it seemed to work fine at first, with iOS Chrome displaying the correct favicon. However, when I refreshed the page once, the favicon went back to the earlier white background one and remained the same.
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" sizes="57x57" href="/pics/icons/apple-touch-icon-57x57.png?v=2">
<link rel="apple-touch-icon" sizes="60x60" href="/pics/icons/apple-touch-icon-60x60.png?v=2">
<link rel="apple-touch-icon" sizes="72x72" href="/pics/icons/apple-touch-icon-72x72.png?v=2">
<link rel="apple-touch-icon" sizes="76x76" href="/pics/icons/apple-touch-icon-76x76.png?v=2">
<link rel="apple-touch-icon" sizes="114x114" href="/pics/icons/apple-touch-icon-114x114.png?v=2">
<link rel="apple-touch-icon" sizes="120x120" href="/pics/icons/apple-touch-icon-120x120.png?v=2">
<link rel="apple-touch-icon" sizes="144x144" href="/pics/icons/apple-touch-icon-144x144.png?v=2">
<link rel="apple-touch-icon" sizes="152x152" href="/pics/icons/apple-touch-icon-152x152.png?v=2">
<link rel="apple-touch-icon" sizes="180x180" href="/pics/icons/apple-touch-icon-180x180.png?v=2">
<link rel="icon" type="image/png" href="/pics/icons/favicon-32x32.png?v=2" sizes="32x32">
<link rel="icon" type="image/png" href="/pics/icons/android-chrome-192x192.png?v=2" sizes="192x192">
<link rel="icon" type="image/png" href="/pics/icons/favicon-96x96.png?v=2" sizes="96x96">
<link rel="icon" type="image/png" href="/pics/icons/favicon-16x16.png?v=2" sizes="16x16">
<link rel="manifest" href="/pics/icons/manifest.json?v=2">
<link rel="mask-icon" href="/pics/icons/safari-pinned-tab.svg?v=2" color="#5bbad5">
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="msapplication-TileImage" content="/pics/icons/mstile-144x144.png?v=2">
<meta name="theme-color" content="#ffffff">
What you observe is normal, even if that's not what you want: iOS Chrome takes the Apple Touch icon for bookmark and favicon.ico for the regular tab icon. On an iPad Mini, it takes the 57x57 Touch icon and the embedded 16x16 pic of favicon.ico.
Android Chrome is not that different:
Add to home screen icon (no equivalent with iOS Chrome), tab icon and task switcher icon: icons declared in manifest.json.
Bookmark icon: the Apple Touch icon. Yep.
Long story short: there is no workaround. It would worth trying to remove all touch icons to see how iOS Chrome behaves, but this is not something you will do in production.
Oh, and as the author of RealFaviconGenerator, I congratulate you for this excellent choice :)
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
or
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
Have you tried this inside of your <head>? It works fine on my website. I have just tested it on Google Chrome for IOS.
M designing a website using DW. I wanted to add a favicon to my website so when I did and view the website, it dsn't show up the icon. I used a 16 x 16 png as the image and the coding is given below. what might I have done wrong. please help me!
thank you.
<link rel="icon" type="image/png" href="favicon.png">
Internet Explorer does not support a PNG favicon.
What you should do, is setup your <link tag like so:
<link rel="shortcut icon" type="image/png" href="favicon.png" />
For IE, and legacy browsers, also keep a less-pretty (by the fact it's an ICO, not intentionally!) version of your icon in .ico format in the root of your site named favicon.ico. You can use http://icoconverter.com/ to convert your PNG to an ICO. Don't just rename favicon.png to favicon.ico and expect it to work.
wrong file extension.. it's supposed to be .ico instead of .png
go here for all the info:
http://tools.dynamicdrive.com/favicon/
EDIT:
Try going on the link and converting your favicon to ico
then add this <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> to your main page.
make sure the favicon exists in that directory.