I've been doing some research on getting a webapp I am working on to display the proper icon / tiles in the correct situation. We have a version of our logo as an .ICO on transparent that we have been using for the icon shown in the browsers tab. No borders from a background, just the logo against the gray of the tab.
Now we want users to be able to add a home screen link to our app. This link's icon should be the logo against a gray background.
For apple this is easy:
<link rel="apple-touch-icon" href="css/touch-icon-iphone.png" />
plus any additional sizes we want to add. The apple-touch prefix makes having a separate file easy.
However, Android is presenting an issue. Currently Android will accept the apple touch icon, but this listed as depreciated and will not work soon. (https://developer.chrome.com/multidevice/android/installtohomescreen#icon) The meta tag given for adding icons to be used for Android (Chrome is the only concern) is listed as:
<link rel="icon" sizes="192x192" href="icon-name-192.png">
<link rel="icon" sizes="128x128" href="icon-name-128.png">
This will apparently overwrite the favicon when the browser sees it. Which means that if I give these images the wanted gray background, then the icons in my browser tabs will show the gray square. And if these are on transparent then when I add to desktop on ANdroid I get the icons without the gray square.
Am I missing something? This seems like a pretty common request, and yet I cant find a solution. I tried looking at the meta data for other sites where the favicon appears to be on transparency but the desktop version shows on gray / another color, but I dont see any extra tags, and so I assume they are using the apple touch version, which as stated is apprently still legal as of now.
Whats the accepted way to deal with this issue?
rel="shortcut icon" is probably what you are looking for
Related
I am working on building a website using GitHub Pages and am having a bit of trouble getting the favicon to display properly. My understanding is that, due to compatibility concerns, you need to add various custom bits of code to make sure that your favicon displays correctly across different browsers.
I am currently using Safari 14.0.3 and Google Chrome to test this.
I have included the following HTML code to display my favicon:
<link rel="apple-touch-icon" sizes="60x60" href="/images/favicon_2.png">
<link rel="icon" href="/images/favicon_2.png">
The only problem with this is that it is not displaying on the tab bar in Safari. It correctly displays on Google Chrome and in the search bar at the top of Safari, but not in the tab bar. I have included images below for reference:
Where it is showing correctly in Safari:
Where it is not showing in Safari:
Note: I am trying to get the globe favicon to display.
I have read some similar questions that have talked about clearing cache etc., but none of these seem to have worked.
What I have tried so far:
Clearing all of my Safari Cache (clearing all of the history)
Emptying all of the Cache
Deleting all of the files in the Safari Favicon Cache folder on my Mac
When I did two, and then initially launched Safari, the correct favicon briefly displayed in the tab bar before switching back to the other one.
I am a little bit unsure of what to do here. Does anyone have any ideas? Do I need to add additional code? Any links to any examples or resources would be greatly appreciated. Also, as a side note, are there any links to documentation where I can read further about what all of the different rel="" do here?
Thanks.
you can try use this tool:
https://realfavicongenerator.net/
it's worked for me
I figured it out -
There are two different lines of HTML code required to make favicons display on Safari properly. Changing the line:
<link rel="icon" href="/images/favicon.ico?v=M44lzPylqQ">
will make the favicon display in the top search bar on Safari as well as on Google Chrome.
The favicon displayed on a Safari tab is managed differently. This requires the use of HTML code for the Apple mask-icon for Safari Pinned Tabs. Consequently, this requires the editing the following code below:
<link rel="mask-icon" href="{{ base_path }}/images/safari-pinned-tab.svg?v=M44lzPylqQ"
color="#000000">
Editing this line will allow for the favicon to be displayed on the Safari tab.
Note: Both lines are necessary for the favicon to display in both the Safari search bar and the Safari tabs.
First, check that there aren’t any other web pages on your site that are setting the favicon. If there aren’t it is just a little safari bug.
I have had a similar issue and it seems that safari will hold onto the favicon for extended periods of time even if the code is changed. Unfortunately, you may just have to wait.
For me, the problem was that Safari doesn't support SVG. I should have known not to trust W3schools when it said that Safari supports it (I've submitted a page correction). Based on https://dev.to/masakudamatsu/favicon-nightmare-how-to-maintain-sanity-3al7 which I found via https://caniuse.com/link-icon-svg, the correct method for having an SVG icon (in supported browsers) while still supporting old Safari users appears to be:
<link rel="icon" href="/icon.png" type="image/png">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
Unless you've already got an .ico file, in that case you might as well use that file instead of a PNG. Note that you must now use sizes=any to trick Chrome into doing the right thing and using the SVG which it supports.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
can someone please advise how best to change whatever that symbol is on websites I create?
google chrome tabs, left side
This is called a favicon !
You can just use this in your page's <head> :
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png" />
(You just have to replace the url and image/png by image/jpg if necessary)
What you are looking for is called "Favicon"
A favicon (favorite icon) is a tiny icon included along with a
website, which is displayed in places like the browser's address bar,
page tabs and bookmarks menu.
Read more about it here https://developer.mozilla.org/en-US/docs/Glossary/Favicon
You will have to create different icons in different sizes for multiple devices. See this page for generating icons https://favicon.io/ and the HTML you will need
I've noticed that some favicon's for web-pages (including my own) does not display correctly and transparency is ignored.
For example:
Feel free to test my web-page favicon out using IE/Edge and it will display similar results. I have made sure that transparency has been exported (in the alpha layer) using GIMP. An image is attached below for reference.
Does anyone see anything wrong with either my header coding for a favicon or an issue with the image?
<link rel="icon" type="image/x-icon" href="./favicon.ico?v=1.0">
The issue pictured above appears to be a bug for the dark theme of Microsoft Edge, as the favicon shows up as expected on the light theme.
However internet explorer's issue (displaying a document icon underneath the favicon) was resolved by adding the following line of code:
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="./favicon.ico?v=1.0">
IE supports ico as favicon, you need to generate an ico from your png image. IE 11 supports PNG for Favicons.
Update
I have just tried "Pinning" my site to the Taskbar again (after removing it) but when I clicked and held down the mouse button on the 16x16px icon inside the address bar (see pic below), you can see my favicon being dragged around with the mouse - so internet explorer has found and got the icon - it's just not displaying it in all the right places! Also updated code below:
As the title suggests, I can't get my favicon to display; in any version of any browser. There is 1 exception, though - which isn't good enough:
IE 9 and IE 10 -
As you can probably see in the screenshot above, the only time I get to see my favicon is after I've added it to my Favorites folder and opened the Favorites Bar. The favicon does not display in the Tab (next to the page title), it does not display in the Taskbar area, and it does not display up the top-left of the browser window if I have "Pinned" my site to the Taskbar.
In every other browser, it simply does not display at all.
I have tried every possible "solution" that I could find online.
Here's the code I have:
<link rel="icon" type="image/x-icon" href="http://www.mysite.com/favicon.ico"><!-- Major Browsers -->
<!--[if IE]><link rel="shortcut icon" href="http://www.mysite.com/favicon.ico"/><![endif]--><!-- Internet Explorer-->
I have also tried all common sizes for the favicon; 16x16, 32x32, 64x64, 128x128 and 256x256 - and I've even tried saving all sizes within the same *.ico file.
I have tried deleting the cache file for *.ico files.
Nothing has worked. The exact same code has previously worked on other sites that I've made. I don't get it. What gives?
I've edited this answer, leaving only solution to problem presented in question.
Use: <link rel="shortcut icon" href="{ICONURL}"/>
Instead of: <link rel="icon" href="{ICONURL}"/>
I had the same problem with my site just now. Drove myself crazy trying to get an favicon.ico file to work. What finally got it working correctly for me in IE 11 (on Windows 7), was to dump the favicon.ico file completely and go with a PNG instead:
<link rel="shortcut icon" href="/favicon-32x32.png" type="image/png"/>
I used a PNG file with a transparency layer. Once I did this and uploaded my page, IE began displaying the icon correctly in the Tabs (and the shortcuts/bookmarks) on the very next page refresh. I double checked and it looks like Chrome and Firefox are cool with this as well.
I use
<link rel="icon"
type="image/ico"
href="Link Goes Here">
If putting the favicon in a folder:
<link rel="icon"
type="image/ico"
herf="Folder/Subfolder"
Make sure the code is in the head tag.
Make sure the image is in the .ico format; It won't work otherwise.
i noticed that paypal displays a very different favicon,
one that's not just a simple 16x16 icon and is lengthy?
anyone can teach me?
I think you are refering to the green box that shows the PayPal logo followed by "PayPal, Inc. (US)".
If so, it is not a favicon, but a feature of Firefox 3 to show sites with extended validation (EV). See also http://news.cnet.com/8301-13554_3-9974672-33.html
That is not a favicon, but the type of SSL certificate they use. It's an Extended Validation (EV) certificate, which intends to provide better identity verification.
Its easy. Under the {title} tag, you put this code.
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
Just make sure that the favicon image is less than 100px * 100px. My recommended favicon image size is 50px * 50px.