I was wondering if the icons in the address bar, which are showing the site's information, are called favicons or does it depend on the browser?
For example in Safari the favicon is diplayed in the address bar:
But not in Chrome and Firefox:
Chrome
Firefox
So what would you call these icons in Chrome and Firefox?
And third, is there a way to change these icons or do they just come with the browser defaults, when visiting sites?
The parts you've circled for Chrome and Firefox are not favicons, they are site information. The favicons for Chrome and Firefox are shown in the tab right at the top, with the title text next to them.
Favicons are decided upon by the site, not the browser. For instance, the favicon on this page can be viewed in the page source:
<link rel="shortcut icon" href="//cdn.sstatic.net/stackoverflow/img/favicon.ico">
Related
So I'm making a website and using Safari as the browser of choice. I decide to open the website in chrome but the font and images are broken. I tried the same thing on my phone, but there ONLY the image is broken.
Here's the website:
dikril.viliworld.eu/Archive
heres the image that has to show up in the top left corner but doesn't.:
https://dikril.viliworld.eu/Archive/images/Dikril-white-print.svg
Please delete your invalid manifest line in your html-file. Chrome is using it, safari not.
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 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
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.