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/
Related
I am using WordPress as a platform for my website. I used plug in real favicon generator and gained instantaneous results for my favicon on every platform except "android and ios google search engine." It is however showing me the old favicon and not updating the recent one. I changed the favicon 4 days ago.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=vMQMeew0Ox">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=vMQMeew0Ox">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=vMQMeew0Ox">
<link rel="manifest" href="/site.webmanifest?v=vMQMeew0Ox">
<link rel="mask-icon" href="/safari-pinned-tab.svg?v=vMQMeew0Ox" color="#5bbad5">
<link rel="shortcut icon" href="/favicon.ico?v=vMQMeew0Ox">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
I tried using realfavicongenerator.net and created my favicon. On top, I included the code in my root directory, but I am still not getting updated results for google search engine. I have even deleted the old favicon from the root directory.
I expect the updated favicon for the website in google search engine results.
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.
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.
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!
The default page on Opera Blink contains links to user-favourited webpages. Some of these webpages, like facebook, twitter, etc., have a logo.
When I add my website there, it doesn't show any logo; it shows only my-site.com text.
I see there are some websites which, when I add them here, display their logo.
What should I do with my website to make the logo retrievable by Opera?
List of Favicon Sizes - Please see the update below...
Perhaps the correctly sized Favicon is missing? The size can vary by device.
Here is a great Favicon generator that will help you create the images and code. http://realfavicongenerator.net/ Its created by philippe_b, a contributor on Stack Overflow.
You'll need several sizes for the different devices and platforms. Here's a great article explaining the details: http://www.jonathantneal.com/blog/understand-the-favicon/
Once you create the Favicon images, the links will go in the head of your html page.
Here's a good list to get you started...
<!--_________Start Favicons____________-->
<!-- favicon for non-IE browsers -->
<link rel="icon" href="media/img-icon/favicon.png">
<!-- favicon ico for IE only, IE doesn't recognize .png. E10+ won't see conditional comments, so favicon.ico was added to the root folder. Safari and Chrome will choose ico over png, so the conditional comment will hide the ico code from Safari and Chrome. -->
<!--[if IE]><link rel="shortcut icon" href="media/img-icon/favicon.ico"><![endif]-->
<!-- favicon Windows 8 Pinned Tiles. Application name = Tile text. Otherwise, it pulls from the title tag. TileColor = bg color -->
<meta name="msapplication-TileImage" content="media/img-icon/windows-tile-144.png">
<meta name="application-name" content=“Name of Your Site”>
<!-- favicon Web Clips for Apple -->
<link rel="apple-touch-icon" sizes="72x72" href="media/img-icon/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="76x76" href="media/img-icon/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="media/img-icon/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="120x120" href="media/img-icon/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="media/img-icon/touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="media/img-icon/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="57x57" href="media/img-icon/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" href="media/img-icon/touch-icon-iphone.png"> <!-- 57x57, smallest size listed last for older browsers -->
<!-- size and order are important for diffrent browser/browser functions-->
<link rel="icon" href="media/img-icon/favicon-16.png" sizes="16x16">
<link rel="icon" href="media/img-icon/favicon-48.png" sizes="48x48">
<link rel="icon" href="media/img-icon/favicon-64.png" sizes="64x64">
<link rel="icon" href="media/img-icon/favicon-128.png" sizes="128x128">
<link rel="icon" href="media/img-icon/favicon-32.png" sizes="32x32">
Update
Opera uses the larger icons. For the old Speed Dial, the Favicon had to be at least 114px x 114px, and anything smaller would not show. If you have a properly linked large Favicon, then it may be Opera's cache. Sometimes its difficult to see an updated Favicon because of the browsers cache. Once you add the Favicon, you may need to delete the bookmark, close the browser and re-bookmark your site to see the icon.
Using the Favicon set above:
Opera 12 displays the Favicon on the Speed Dial page. If only a small, or standard Favicon .ico is used, it displays a screenshot of the page instead.
Opera 25 also displays the correct Favicon, and it looks great. On the sites that have only the .ico file or a small icon, it will display the website text link as you pictured in your example.
So it looks like both versions use the larger Favicons.