added favicon and apple-touch-icons

index.html

@@ -6,6 +6,19 @@
     <title>HTML5 Please - Use the new and shiny responsibly</title>
     <meta name="description" content="Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are.">
     <meta content="width=device-width, initial-scale=1.0" name="viewport">
+
+    <!-- favicon -->
+    <link rel="shortcut icon" href="favicon.ico" />
+
+    <!-- For iPhone 4 with high-resolution Retina display: -->
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
+
+    <!-- For first-generation iPad: -->
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
+
+    <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
+
     <link href="http://fonts.googleapis.com/css?family=Francois+One|Open+Sans:400italic,400,800" rel="stylesheet">
     <link href="css/style.css" rel="stylesheet">
     <script src="js/libs/modernizr-2.0.min.js"></script>
@@ -172,7 +185,7 @@ <h2 class="name">box-shadow </h2>
               <div class="recco">
                 <p><code>box-shadow</code> is safe to use most of the time, except when you are applying it on a large area as that may cause significant performance impact when interacting with the page (on scroll and hovers, but also transitions and animations). </p>
 
-<p>Polyfills are unncessary for box-shadow. They are too costly and slow down pageload. Users without a modern browser will not see a shadow, but aren't checking your site in multiple browsers anyhow.</p>
+<p>Polyfills are unnecessary for box-shadow. They are too costly and slow down pageload. Users without a modern browser will not see a shadow, but aren't checking your site in multiple browsers anyhow.</p>
               </div>
               <div class="polyfills"></div> 
 

template.html

@@ -6,6 +6,19 @@
     <title>HTML5 Please - Use the new and shiny responsibly</title>
     <meta name="description" content="Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are.">
     <meta content="width=device-width, initial-scale=1.0" name="viewport">
+
+    <!-- favicon -->
+    <link rel="shortcut icon" href="favicon.ico" />
+
+    <!-- For iPhone 4 with high-resolution Retina display: -->
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
+
+    <!-- For first-generation iPad: -->
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
+
+    <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
+
     <link href="http://fonts.googleapis.com/css?family=Francois+One|Open+Sans:400italic,400,800" rel="stylesheet">
     <link href="css/style.css" rel="stylesheet">
     <script src="js/libs/modernizr-2.0.min.js"></script>