Favicon insanities
When adding an icon becomes a nightmare
One day we will all laugh of this:
<!-- favicon --> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <!-- non-retina iPhone pre iOS 7 --> <link rel="apple-touch-icon" href="icon57.png" sizes="57x57"> <!-- non-retina iPad pre iOS 7 --> <link rel="apple-touch-icon" href="icon72.png" sizes="72x72"> <!-- non-retina iPad iOS 7 --> <link rel="apple-touch-icon" href="icon76.png" sizes="76x76"> <!-- retina iPhone pre iOS 7 --> <link rel="apple-touch-icon" href="icon114.png" sizes="114x114"> <!-- retina iPhone iOS 7 --> <link rel="apple-touch-icon" href="icon120.png" sizes="120x120"> <!-- retina iPad pre iOS 7 --> <link rel="apple-touch-icon" href="icon144.png" sizes="144x144"> <!-- retina iPad iOS 7 --> <link rel="apple-touch-icon" href="icon152.png" sizes="152x152"> <!-- Win8 tile --> <meta name="msapplication-TileImage" content="tile.png"> <!-- IE11 tiles --> <meta name="msapplication-square70x70logo" content="tile-tiny.png"/> <meta name="msapplication-square150x150logo" content="tile-square.png"/> <meta name="msapplication-wide310x150logo" content="tile-wide.png"/> <meta name="msapplication-square310x310logo" content="tile-large.png"/>