So I'm doing some research regarding mobile site user experience and stumbled upon the fact of the whole favicon.ico being completely outdated and all.
Looking around I've gathered that I require various new sets of images/icons to actually present the "favicon" properly on various mobile devices like android, iphones and windows phones.
Now the question here is, I've got the following code:
<link rel="apple-touch-icon" sizes="57x57" href="images/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="images/favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="images/favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="images/favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="images/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="images/favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/favicons/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="images/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="images/favicons/favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="images/favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="images/favicons/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="images/favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="images/favicons/manifest.json">
<meta name="apple-mobile-web-app-title" content="JoJo Productions">
<meta name="application-name" content="JoJo Productions">
<meta name="msapplication-TileColor" content="#00aba9">
<meta name="msapplication-TileImage" content="images/favicons/mstile-144x144.png">
<meta name="msapplication-config" content="images/favicons/browserconfig.xml">
<meta name="theme-color" content="#555555">
<link rel="shortcut icon" href="favicon.ico">
but for me this is just a too huge chunk of code to just show the favicon properly. So I was wondering what I would be able to remove and what I should definitely keep to present it properly on "most" mobile devices.
Most other websites that make use of mobile favicons only use a handful of the above mentioned code, being the: 57x57, 72x72, 114x114 and the 144x144 this all being the apple-touch-icons. So are the images/code parts really that important for Iphone or other mobile users? Or is it possible to have it a bit more optimised?
Either way thanks for the information.
Edit
So with some further research I've gotten to this result which seems to work okay on most modern devices:
<meta name="msapplication-config" content="images/favicons/browserconfig.xml">
<meta name="msapplication-TileImage" content="images/favicons/mstile-large.png">
<meta name="msapplication-TileColor" content="#ae8160">
<meta name="application-name" content="JoJo Productions">
<link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48" href="favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="favicon.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
Which is of course better for me as the amount of code/images has been decreased significantly. And as long as it works on most modern mobile devices I'm happy.
With a combination of this "cheat sheet", this tutorial, and the help from Philippe B. I managed to get it to this.
Either way thanks for all the help and hopefully in the coming years they'll make a proper standard for the favicon!
To address as many platforms as possible without a large set of icons, you basically need four icons:
A PNG icon, for modern, desktop browsers.
An Apple Touch icon for mobile browsers (iOS Safari of course, but also Android Chrome and many others; and also Mac OS Yosemite Safari).
favicon.ico, for legacy browsers (think IE 9, 8, ...).
A tile icon for IE on Windows 8 and 10.
This gives us:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon.png" sizes="32x32">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="msapplication-TileColor" content="#00aba9">
A few comments about this code:
apple-touch-icon.png is 180x180, which is the highest supported resolution by iOS (iOS 8 on iPhone 6+ and Retina iPad). Lesser platforms will scale the icon down.
apple-touch-icon.png is named this way and placed in the root directory of the web site because this is a convention from Apple. If you place it or name it differently, you will probably notice 404 errors in your server's logs. Nothing to worry but if you can avoid them...
favicon.png is 32x32. Not too small and not too large. You might make it large, but for no significant benefits.
favicon.ico is in the root directory of your web site because this is a convention from IE. For example, Yandex search engine expects it here.
In this example, I used mstile-144x144.png and no browserconfig.xml. I did this because it looks easier (this is just two lines of HTML and a picture; no extra XML file involved). But this choice is arguable. The msapplication-TileImag and msapplication-TileColor metas introduced by Win 8.0 / IE 10 have been replaced by browserconfig.xml in Win 8.1 / IE 11. So browserconfig.xml is a longer term solution. Plus, if you put this file in the root directory of your site, you don't have to declare it in the HTML: IE 11 will find it by convention ("favicon.ico" style). Note that Coast by Opera picks msapplication-TileImag for bookmarks. Now make your choice!
A final note: the large code chunk you quote in your question was generated by RealFaviconGenerator. As the author of this tool, your question makes me sad ;-)
Related
I'm currently working at improving the accessibility of a site.
I'm using the TotalValidator tool to check the accessibility issues there, and the icons on the
The icons there use this format:
<link href="/full/path/to/the/image/120.png" rel="apple-touch-icon" />
<link href="/full/path/to/the/image/152.png" rel="apple-touch-icon" sizes="152x152" />
<link href="/full/path/to/the/image/167.png" rel="apple-touch-icon" sizes="167x167" />
<link href="/full/path/to/the/image/180.png" rel="apple-touch-icon" sizes="180x180" />
<link href="/full/path/to/the/image/192.png" rel="icon" sizes="192x192" />
<link href="/full/path/to/the/image/128.png" rel="icon" sizes="128x128" />
I searched about this topic and this format seems to be correct, but the accessibility report throws:
The 'sizes' attribute is not allowed here.
Does anyone knows how I should replace it? Thank you!
According to #Darek Kay, this documentation refers that:
The sizes attribute gives the sizes of icons for visual media. [...]
The attribute must not be specified on link elements that do not have a rel attribute that specifies the icon keyword or the apple-touch-icon keyword.
NOTE: The apple-touch-icon keyword is a registered extension to the
predefined set of link types, but user agents are not required to
support it in any way.
Thank you!
I have analyzed my new website with GTmetrix (see report) and i have a 95% score in Google pagespeed. But the time of loading at the start of loading its very slow. (more than 10 seconds)
The technical support of my hosting says that maybe a query its slowing all. But i cant find the origin.
Can you help me?
I have try P3 plugin and
Waterfall Analysis say this in header response:
<html lang="es-ES" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<title>
Inicio - Brunchear.comBrunchear.com | Tu guia de brunch y desayunos</title>
<link rel="stylesheet" href="http://www.brunchear... [truncated to save space (240874 more bytes)]
Thanks
The website its www.brunchear.com
Probably one of the biggest problem is that you call
http://fonts.googleapis.com/css
that returns a 400 Error and it slow down the page because the browser try to load that content
I've just checked your gtmetrix results, and well yes it's severely slow.
Minimum things to do:
get a better hosting
install cache plugins, w3 total cache e.g.
use cdn, amazon works wonders! also use photon for images
If you're not confident in these steps and also wants code modifications to optimize your site speed, there are services like: http://pagespeedpro.com/ that can help you improve your speed easily.
well I've searched upon the web for an answer, yet to find a solution.
I'm trying to add an iPhone web app icon (the one when you save the webpage to your home-screen) through the following code:
<link href="http://localhost:5001/Images/cc.png" rel="apple-touch-icon" />
<link href="http://localhost:5001/Images/cc-76x76.png" rel="apple-touch-icon" sizes="76x76" />
<link href="http://localhost:5001/Images/cc-120x120.png" rel="apple-touch-icon" sizes="120x120" />
<link href="http://localhost:5001/Images/cc-152x152.png" rel="apple-touch-icon" sizes="152x152" />
P.S - I'm programming using Visual Studios 2013 and running the app through localhost
After some research I came to a conclusion that my problem might be in how I link the image's place - people say you need to place it in the root document folder but I couldn't figure out how to do so
Thanks in advance for any help :)
Add a simple bit of code to the HEAD of your site so the devices can find your images ,it is recommended to create the icon for the respective sizes and add them to your site's root folder)
Code is as follows (According to ios 7)-
<link href="http://www.yoursite.com/apple-touch-icon.png" rel="apple-touch-icon" />
<link href="http://www.yoursite.com/apple-touch-icon-76x76.png" rel="apple-touch-icon" sizes="76x76" />
<link href="http://www.yoursite.com/apple-touch-icon-120x120.png" rel="apple-touch-icon" sizes="120x120" />
<link href="http://www.yoursite.com/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" />
I have three stylesheets: a persistent one, one for windows 800px or greater ("standard"), and one for windows smaller than 800px ("mobile"). My problem is that the standard style sheet is being recognized and applied, but when I resize the window to under 800px, the mobile sheet is ignored and I'm left with only the persistent style. I suspect it's a basic syntax error, but I haven't been able to find the problem.
<link rel="stylesheet" type="text/css" href="persistentstyle.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:800px)" title="standard" href="style.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width:799px)" title="mobile" href="mobilestyle.css">
I already have the necessary meta tag in the header:
<meta name="viewport" content="width=device-width" />
Thanks!
May be you need this:-
<meta name="viewport" content="width=device-width">
Generally, the most common mistake is not including the meta tag required for CSS media queries to work:
<meta name="viewport" content="width=device-width">
This link explains the viewport meta tag, and additional properties you can assign to it, such as allowing the screen to be scaled, and more.
On XP, IE8 site http://rweberjewelry.com/ is ignoring styles. Here's a video http://www.screenr.com/AeMH. It works fine on Win7 IE9. This started when I updated to WP 3.5.2 and latest theme version.
Problems - images not showing, fonts are huge, page container does not fill page, and just overall ignoring of most styles!
Theme designer says it renders well on their browser emulator and "..there is something else in play either on your network or computer. If the browser is getting pushed into compatibility mode for some reason or something similar."
I had a friend check her computer and it is having the same problem.
I read a suggestion to add the following but it didn't help:
meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE"
I checked:
IE>tools>compatibility mode> website is not listed and "display all websites in compatibility mode" is not checked and ripped paper icon is not showing next to the URL so I don't think it is in compatibility mode.
Much thanks for any ideas.
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
<link rel="stylesheet" type="text/css" media="all" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/style.css" />
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/css/grid.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/css/base.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/css/layout.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/css/slideshow.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/css/shortcodes.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/js/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/js/projekktor/theme/style.css" type="text/css" media="screen"/>
<!-- plugin and theme output with wp_head() -->
<link rel='stylesheet' id='testimonials-widget-css' href='http://www.rweberjewelry.com/wp-content/plugins/testimonials-widget/testimonials-widget.css?ver=3.5.2' type='text/css' media='all' />
<link rel='stylesheet' id='avia-woocommerce-css-css' href='http://www.rweberjewelry.com/wp-content/themes/propulsion/config-woocommerce/woocommerce-mod.css?ver=3.5.2' type='text/css' media='all' />
<!-- custom styles set at your backend-->
<style type='text/css' id='dynamic-styles'>
<!----a ton of stuff deleted - too long ----->
</style>
<!-- google webfont font replacement -->
<link id="google_webfont_1" rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cardo" />
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/css/custom.css" type="text/css" media="screen"/>
</head>
You seem to have some HTML issues that IE8 isn't handling quite as gracefully as the other browsers. Some of the worst offenses are apostrophes in HTML attributes, which prematurely end the attribute.
W3C validator results