I have no control over my site presentation icon. Browsers choose to show the menu button that I have in my header section. Or, when saved in bookmarks, my site is automatically represented by an ugly yellow square with a letter inside. Please show me the code I should write to have a picture/graphics of my own choice that will represent my site in browsers (when sharing the link, when saving to bookmarks). Please do not write about favicon code for tabs, this is not the question here. Thank you!
Diffrant browsers and platforms use diffrant resolutions/aspect ratio's and code for the icon image.
The reason why you get a stock browser icon and not your logo is probably due to you having a incorrect aspect ratio of your image and the wrong code for the platform your targeting. Please be more specific about what platform your targeting your icon for and I'm sure people can help more. But in any case I'll post the resolutions and code I know below.
16x16: browser favicon
32x32: taskbar shortcut icon
96x96: desktop shortcut icon (and Google/android TV)
128x128: Chrome Webstore icon
196x196: Android Chrome icon
228x228: Opera Coast icon
Here's a example of the code for browser favicon, taskbar and shortcut
<link rel="icon" type="image/png" href="https://yourwebsite.com/favicon-16x16.png" sizes="16x16">
Apple IOS (touch devides)
120x120: iPhone Retina (iOS 7)
180x180: iPhone 6 Plus (iOS 8+)
152x152: iPad Retina (iOS 7)
167x167: iPad Pro (iOS 8+)
Here's a example of the code targeting apple devices
<link rel="apple-touch-icon" sizes="180x180" href="yourLogo.png">
Windows Metro
Due to how the tile system works in microsoft metro UI used in windows you need the following resolutions 70x70, 270x270, 310x310 and 310x150
Code example, keep in mind that the following code should be posted in the root directory of your website with the name browserconfig.xml!!!
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="https://cdn.yourwebsite.com/mstile-70x70.png"/>
<square150x150logo src="https://cdn.yourwebsite.com/mstile-270x270.png"/>
<square310x310logo src="https://cdn.yourwebsite.com/mstile-310x310.png"/>
<wide310x150logo src="https://cdn.yourwebsite.com/mstile-310x150.png"/>
<TileColor>#2b5797</TileColor>
</tile>
</msapplication>
</browserconfig>
Set an og:image in the of your HTML like this:
<meta property="og:image" content="http://yoursite.com/ogp.jpg" />
This is part of the Open Graph Protocol, used by most sites.
more info on structuring og:image here
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.
I'm searching for a reason and a hint why my website (Link) is not shown correctly with responsive design (based on Twitter Bootstrap) on iPhone5 Safari Browser while it is completely working correctly on desktop using IE, Chrome or Safari. Also on HTC & Samsung Galaxy the website is working correctly.
By Googling I only could find 2 solutions which are
A) cleaning the cache of the browser and
B) using
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1">
Both doesn't fix the problem. Also simulating the iPhone 5 Device in Google Developer Tool shows the website correctly while in reality the page does not show the CSS design.
Here the:
False Responsive Design Screenshot
Any idea what I need to look for as I'm running out of possible ideas.
Based on the screenshot we moved away from the Iphone theory and discovered that there was simply a problem in one of the CSS files. We had a false symbol (?) in the file and this triggered that the full CSS was not loaded correctly. It seems though that all other devices were able to compensate the mistake.
Download bootstrap to your web server and include the path in the page, so don't have to rely on another source that could go down. This should fix your problem, if not, then just try Cordova. It is possible that your your phone is being blocked by the bootstrap site because the it is going over mobile network or something like that.
Source: Personal Experience
Regards,
PRO
I have an iOS app that basically shows the website inside a webview. On the iPhone 6/6+, the text is blurry when viewed in the app, but looks great when viewed as a regular webpage in Safari. Everything is basically the same in the app and website: same CSS rules, etc., and:
<meta name="viewport" content="width=device-width, initial-scale=1">
I have seen this How to fix blurred text on an iPhone 6 (+), but there's just a comment saying to "add native support." Another answer mentioned to add a new launch image. Is that going to fix blurry text? I'm also not sure where this would be added.
It would be a huge plus if this can be fixed in the HTMl/JS/CSS as opposed to making an update to the native wrapper.
If your app isn't built to support the iPhone 6/6 Plus, then it will emulate an iPhone 5, and just scale things up.
So, yes, you should build an submit a new version of the app, built against the latest iOS SDK, with a launch screen.
Have set up my website on github pages: w8tiles
I use buildmypinnedsite to create all the markup and images.
I open the site in ie11 on windows 8.1. Add the site to the applications and see an ie logo with some random background color(that is usually the same for all sites I add). I pin the site to start and its still an ie logo with some background color that doesnt match the one I define in browserconfig.xml.
Below is the code to set the background and tile in html. Same code is in the browserconfig.
<meta name="msapplication-TileColor" content="#603cba">
<meta name="msapplication-TileImage" content="mstile-144x144.png">
The question is: what am I doing wrong and why the images I add as a tiles are ignored? Note: I added all the images to the root and checked that they are all available via the link + browserconfig.xml is available too.
The detailed desciption of the issue is listed here
There are 2 key points:
You need IE to be your browser by default. Or the live tiles are not updated. Even if it was your browser by default and the tiles were live, once you make chrome, opera or any other browser your browser by default live updates will stop.
IE should be in a metro mode. If its in a usual mode, the favicon will be retrieved and browserconfig.xml or any metategs are ignored. Also tile background in this case is set by favicons color(not sure how it is calculated, but depending on the color of your favicon the color of the tile will be set).
You can find more details in the github issue.
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.