Favicon Guide

favicon

/* == FAVICON GUIDE == */
As of 2016, favicon development has become a somewhat more complicated process. The standard Favicon used to be a 16x16 pixel ICO file. 
While this format is still used widly today, it doesn't play well with responsive design.

This guide aims to list all of the different favicon formats and sizes for each major device for you to copy and paste into your 
website's header. Depending on what your web app will be used for, you likely won't need everything here.


/* == iOS Devices == */
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> //iPhone 6s, iPhone 6, iPhone 5, iPhone 4s (@2x)
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> //iPad 2, iPad Mini
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> //iPad, iPad Mini (@2x)
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-167x167.png"> //iPad Pro (@2x)
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon-180x180.png"> //iPhone 6s Plus, iPhone 6s (@3x)

/* == Android Devices == */

/* == Windows Devices == */

/* == Blackberry Devices == */