{"type":"doc","content":[{"type":"paragraph","content":[{"text":"Three Files will need to be edited to accomidate all Favicons across devices/browers. Add the new ","type":"text"},{"text":"browserconfig.xml","type":"text","marks":[{"type":"em"}]},{"text":" & ","type":"text"},{"text":"manifest.json","type":"text","marks":[{"type":"em"}]},{"text":" files along with editing the ","type":"text"},{"text":"html.html","type":"text","marks":[{"type":"em"}]},{"text":" file as needed.","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"browserconfig.xml","type":"text","marks":[{"type":"em"}]}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Placed within the ","type":"text"},{"text":"root","type":"text","marks":[{"type":"strong"}]},{"text":" of the project, not the theme/anywhere else.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Is responsible for linking the icons needed ","type":"text"},{"text":"ONLY","type":"text","marks":[{"type":"strong"}]},{"text":" for IE10 & IE11 → As in, for Windows 8 users/","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"manifest.json","type":"text","marks":[{"type":"em"}]}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Is responsible for linking icons needed, across ","type":"text"},{"text":"Android/Chrome","type":"text","marks":[{"type":"strong"}]},{"text":" devices/browser.","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"html.html.twig","type":"text","marks":[{"type":"em"}]}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Placed within the enabled (custom) theme, somewhere.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Is responsible for linking all icons needed - both general/global + ","type":"text"},{"text":"Apple","type":"text","marks":[{"type":"strong"}]},{"text":" specific devices.","type":"text"}]}]}]}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"There should be 34 icons total:","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"+5 browserconfig (mstile)","type":"text"}]},{"type":"paragraph","content":[{"text":"+7 manifest (android)","type":"text"}]},{"type":"paragraph","content":[{"text":"+18 html.html (apple)","type":"text"}]},{"type":"paragraph","content":[{"text":"+5 html.html (favicon)","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Use ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://realfavicongenerator.net/"}},{"text":" or Kalamuna’s Favicon Generator to create all required icons in a snap!","type":"text"}]},{"type":"rule"},{"type":"paragraph","content":[{"text":"Original Reference to follow","type":"text","marks":[{"type":"strong"}]},{"text":": ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://stackoverflow.com/questions/19029342/favicons-best-practices"}},{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"There are a number of different icons and even splash screens that you can set for various devices. This answer goes through how to support them all.","type":"text"}]},{"type":"paragraph","content":[{"text":"Here are some snippets I have used with relevant links to where I gathered the information. See ","type":"text"},{"text":"my blog","type":"text","marks":[{"type":"underline"},{"type":"link","attrs":{"href":"http://rehansaeed.co.uk/internet-favicon-madness/"}}]},{"text":" for more information and more information about the ","type":"text"},{"text":"ASP.NET MVC Boilerplate","type":"text","marks":[{"type":"underline"},{"type":"link","attrs":{"href":"https://visualstudiogallery.msdn.microsoft.com/6cf50a48-fc1e-4eaf-9e82-0b2a6705ca7d"}}]},{"text":" project template with all this built in right out of the box (Including sample image files).","type":"text"}]},{"type":"paragraph","content":[{"text":"Add the following mark-up to your html head. The commented out sections are entirely optional. While the uncommented sections are recommended to cover all icon usages. Don't be scared, most if it is comments to help you.","type":"text"}]},{"type":"codeBlock","content":[{"text":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","type":"text"}]},{"type":"paragraph","content":[{"text":"My browserconfig.xml file. Full explanation above.","type":"text"}]},{"type":"codeBlock","content":[{"text":"\n\n \n \n \n \n \n \n #5cb95c\n \n \n\n","type":"text"}]},{"type":"paragraph","content":[{"text":"My manifest.json file. Full explanation above.","type":"text"}]},{"type":"codeBlock","content":[{"text":"{\n \"name\": \"ASP.NET MVC Boilerplate (Required! Update This)\",\n \"icons\": [\n {\n \"src\": \"\\/Content\\/icons\\/android-chrome-36x36.png\",\n \"sizes\": \"36x36\",\n \"type\": \"image\\/png\",\n \"density\": \"0.75\"\n },\n {\n \"src\": \"\\/Content\\/icons\\/android-chrome-48x48.png\",\n \"sizes\": \"48x48\",\n \"type\": \"image\\/png\",\n \"density\": \"1.0\"\n },\n {\n \"src\": \"\\/Content\\/icons\\/android-chrome-72x72.png\",\n \"sizes\": \"72x72\",\n \"type\": \"image\\/png\",\n \"density\": \"1.5\"\n },\n {\n \"src\": \"\\/Content\\/icons\\/android-chrome-96x96.png\",\n \"sizes\": \"96x96\",\n \"type\": \"image\\/png\",\n \"density\": \"2.0\"\n },\n {\n \"src\": \"\\/Content\\/icons\\/android-chrome-144x144.png\",\n \"sizes\": \"144x144\",\n \"type\": \"image\\/png\",\n \"density\": \"3.0\"\n },\n {\n \"src\": \"\\/Content\\/icons\\/android-chrome-192x192.png\",\n \"sizes\": \"192x192\",\n \"type\": \"image\\/png\",\n \"density\": \"4.0\"\n }\n ]\n}\n","type":"text"}]},{"type":"paragraph","content":[{"text":"A list of the files in the project (Note that the names of these files are important if you decide to put some of them at the root of your project to avoid using the above meta tags):","type":"text"}]},{"type":"codeBlock","content":[{"text":"favicon.ico\nbrowserconfig.xml\nContent/Images/\n android-chrome-144x144.png\n android-chrome-192x192.png\n android-chrome-36x36.png\n android-chrome-48x48.png\n android-chrome-72x72.png\n android-chrome-96x96.png\n apple-touch-icon.png\n apple-touch-icon-57x57.png\n apple-touch-icon-60x60.png\n apple-touch-icon-72x72.png\n apple-touch-icon-76x76.png\n apple-touch-icon-114x114.png\n apple-touch-icon-120x120.png\n apple-touch-icon-144x144.png\n apple-touch-icon-152x152.png\n apple-touch-icon-180x180.png\n apple-touch-icon-precomposed.png (180x180)\n favicon-16x16.png\n favicon-32x32.png\n favicon-96x96.png\n favicon-192x192.png\n manifest.json\n mstile-70x70.png\n mstile-144x144.png\n mstile-150x150.png\n mstile-310x150.png\n mstile-310x310.png\n apple-touch-startup-image-1536x2008.png\n apple-touch-startup-image-1496x2048.png\n apple-touch-startup-image-768x1004.png\n apple-touch-startup-image-748x1024.png\n apple-touch-startup-image-640x1096.png\n apple-touch-startup-image-640x920.png\n apple-touch-startup-image-320x460.png\n","type":"text"}]},{"type":"paragraph","content":[{"text":"Total Overhead","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"If you take out the comments that's 3KB of extra HTML, if you don't support splash screens that's 1.5KB. If you are using GZIP compression on your HTML content, which everyone should be doing these days, that leaves you with about 634 Bytes of overhead per request to support all platforms or 446 Bytes without splash screens. I personally think its worth it to support IOS, Android and Windows devices but its your choice, I'm just giving the options!","type":"text"}]},{"type":"paragraph","content":[{"text":"Side Note About The Current Web Icon/Splash Screen/Settings Situation","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"This situation with vendor specific icons, splash screens and special tags to control the web browser or pinned icons is ridiculous. In a perfect world we would all use a favicon.svg file which could look good at any size and could be placed at the root of the page. Only FireFox supports this at the time of writing (See ","type":"text"},{"text":"CanIUse.com","type":"text","marks":[{"type":"underline"},{"type":"link","attrs":{"href":"http://caniuse.com/#feat=link-icon-svg"}}]},{"text":").","type":"text"}]},{"type":"paragraph","content":[{"text":"However, icons are not the only setting these days, there are several other vendor specific settings (shown above) but a favicon.svg file would cover most use cases.","type":"text"}]},{"type":"paragraph","content":[{"text":"Update","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"Updated to include the new Android/Chrome version M39+ favicon/theming options. Interestingly, they have gone with a similar approach to Microsoft but are using a JSON file instead of XML.","type":"text"}]}],"version":1}

Browser not supported