I have the following line in index.html that declares my apple-touch-icon file.
<link rel="apple-touch-icon" href="%PUBLIC_URL%/images/logo192.png"/>
When I attempt to add the website as a bookmark in Safari (16.3, macOS Ventura 13.2), the icon displays shrunken, when ideally it should fill the rounded-rectangle container. See my icon below, and see for example Stripe's:
The image I'm using is a .png sized 192 x 192. Has anyone encountered this before and managed to solve it?
Related
Not filling entire icon space.
website
The favicon on my website is squished. It only happens on browsers. It doesn't happen with the safari mask icon, windows 8/10 Tile icon, Android (Launcher) shortcut icon, or the iOS safari shortcut icon. Is there a way i can fix this?
this issue may appear when your computer browser is cached ...
click on CNTROL + F5 on key bored to make hard refresh and add this code to tag on your HTML PAGE assuming that your icon image on folder and img/icon/(your favicon name)
please resize your favicon to heiht : 16px and width 16px and paste the below code
<link rel="shortcut icon" type="image/x-icon" href="img/icon/favicon.png">
hope this works for you
See my annotations in this image from invoking iOS’s Add to Homescreen option https://i.stack.imgur.com/XNoVG.jpg
My notes simply illustrate what Ahmed already stated: you need to spend more time reworking the pixels in your favicon. Yes, it’s all about anti-aliasing and pushing pixels.
Font awesome icons showing up as blank boxes in live site while it is showing up correctly locally. Added "fa" in front of the class but still not working. Any idea why?
to test, try loading the code through their CDN rather than locally. see if that does the trick.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
I faced a similar issue. I realized I had not put all the fa webfonts. You can debug your issue by going to Inspect Element -> Network and then see which files are resulting in a 404 error.
Go to their initiators and upload those files. It will start working again.
On my WordPress site the icons that were rendered with fonts are no longer displaying the icon. Instead they are displayed as a little square.
I see this in 2 locations on my site. The sidebar that displays social icons. And the 3 lined menu icon when the browser window is sized down to the mobile layout.
On Mac OS X I see the error on Firefox 31, and Chrome 37. But it works correctly on Safari 7.
Here's the URL: www.ashton.me
Why is this happening?
What should I do to fix it?
If you take a look at the Network tab in Chrome Inspector (or similar in other browsers) you will notice that your icon fonts are not loading correctly. Missing glyphs are displayed as a square, so that is what you are seeing. And different browsers use different font files (or may have the correct file in cache) so that is probably why it does work in Safari.
I fixed it.
In WordPress Settings "WordPress Address (URL)" and "Site Address (URL)" both needed the www version of the URL and it cleared right up.
Does anybody know how to show a larger favicon in the Google Chrome bookmarks on my mobiles devices, like this fd-favicon? (image)
My website supports the favicon sizes:
16x16
72x72
114x114
120x120
144x144
152x152
Image:
http://oi60.tinypic.com/1yl6ag.jpg
Thanks.
Google recommends to use the Apple touch icon and a 196x196 PNG icon. If you use both, Chrome will almost always use the Apple touch icon.
In other words, your HTML code should contain something like:
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
See Apple specs for more information on the Apple touch icon.
You can generate all pictures and HTML code with this favicon generator. Full disclosure: I'm the author of this site.
I can't get my dashcode web clip icon to show up, it just shows the safari generated icon. I have tried using dashcode to design it, then I used the code
<link rel="apple-touch-icon" href="Images/WebClipIcon.png">
I also tried adding a file named apple-touch-icon.png to the root folder and that still didn't work. I have run the site on the simulator, my iphone, and my ipad and the custom web clip icon will not show up. Does anyone have a suggestion
Update: I just created a new dashcode project and tried adding a webclip icon and it still won't work. This is really starting to frustrate me.
You need to add the image to the image file that is outside the mobile photo
I will add 1 thing that caused this issue for me. After trying all of the documented fixes, I tried adding a background color to my icon. Originally, I had a transparent background. Once I added a background color to the .png file, it all just worked.
My steps:
Use GIMP to create a 72x72 image with 7 layers and a transparent background layer.
Save a copy as apple-touch-icon.png and add to my web app's root folder.
Launch the website on my iPad 2 running IOS 5.0.1.
"Add to Home Screen"
RESULT: A black icon on the home screen.
Back in GIMP, fill the background with a color.
Overwrite my .png file.
Back to iPad safari to reload the site.
"Add to Home Screen"
The icon shows up now as documented.
My conclusion: sufficient or well placed transparent areas in the icon image will prevent iOS from accepting it as valid and cause it to be rejected.