<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>resume</title>
<link rel="icon" type="image/png" href="./favicon_io/favicon.ico">
<link rel="icon" type="image/png" href="./favicon_io/favicon-32.png" sizes="32*32">
<link rel="icon" type="image/png" href="./favicon_io/favicon-16.png" sizes="16*16">
<link rel="icon" type="image/png" href="./favicon_io/android-192.png" sizes="192*192">
<link rel="icon" type="image/png" href="./favicon_io/favicon-512.png" sizes="512*512">
My Question is why is my localhost making 200 first one (status code) and 304(status code)in rest of the images requests ? I mean it should just render the one compatible with my screen ? how can I do that ?
As Sysix said, you should be using x instead of * for the sizes.
This is the typical chunk of code I use by default that I've cobbled together over the years to try and cover most browsers for favicons. Seems to work. I also setup an action in Photoshop so with one click I can generate all sizes. Then I use xiconeditor.com to generate a favicon.ico for older browsers that need it.
I'd search for some more in case there are any I've missed.
<link rel="icon" sizes="32x32" href="/images/icons/icon-32.png">
<link rel="icon" sizes="48x48" href="/images/icons/icon-48.png">
<link rel="icon" sizes="96x96" href="/images/icons/icon-96.png">
<link rel="icon" sizes="128x128" href="/images/icons/icon.png">
<link rel="icon" sizes="144x144" href="/images/icons/icon-144.png">
<link rel="icon" sizes="160x160" href="/images/icons/icon-160.png">
<link rel="icon" sizes="192x192" href="/images/icons/icon-192.png">
<link rel="icon" sizes="196x196" href="/images/icons/icon-196.png">
<link rel="icon" sizes="228x228" href="/images/icons/icon-228.png">
<link rel="icon" sizes="256x256" href="/images/icons/icon-256.png">
<link rel="icon" sizes="384x384" href="/images/icons/icon-384.png">
<link rel="icon" sizes="512x512" href="/images/icons/icon-512.png">
<link rel="apple-touch-icon" sizes="57x57" href="/images/icons/apple-touch-icon-57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/images/icons/apple-touch-icon-60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/images/icons/apple-touch-icon-72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/images/icons/apple-touch-icon-76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/images/icons/apple-touch-icon-114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/images/icons/apple-touch-icon-120.png">
<link rel="apple-touch-icon" sizes="152x152" href="/images/icons/apple-touch-icon-152.png">
<link rel="apple-touch-icon" sizes="167x167" href="/images/icons/apple-touch-icon-167.png">
<link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon-180.png">
<!--[if IE]>
<link rel="shortcut icon" href="/images/icons/favicon.ico">
<![endif]-->
<meta name="msapplication-TileColor" content="#222">
<meta name="msapplication-TileImage" content="/images/icons/ms-tile-144.png">
<meta name="theme-color" content="#222">
If you are using WordPress, you can use the following php added into the file path to get the template directory:
<link rel="icon" sizes="32x32" href="<?php echo get_template_directory_uri(); ?>/library/images/icons/icon-32.png">