PACS - 09/19/15 1 favicon A ‘Favorite icon’ is a file containing one or more small icons associated with a particular website or web page. Web browsers might make use of it by displaying it in the address bar, history list, bookmark list and/or as a shortcut. First used in IE5 in Default file name is favicon.ico and located in the site’s root. Possible to change from defaults with this line in the HTML Head section:

PACS - 09/19/15 2 favicon Icon images can be 16×16, 32×32, 48×48, or 64×64 pixels. An ico file is a container file so all of these images can reside in one file. The browser will pick the one with the best fit. Due to the need to always check for it in a fixed location, the favicon can lead to artificially slow page-load time and unnecessary 404 entries in the server log if it is nonexistent.

PACS - 09/19/15 3 ICOPNGGIF animated GIFs JPEGAPNGSVG Firefox1.0 Yes Google Chrome Yes 4.0 No Internet Explorer No Opera Dropped SafariYes4.0 No4.0No favicon

PACS - 09/19/15 4 favicon BrowserAddress bar Address bar drop down list Links barBookmarksTabs Drag to desktop Firefox : Yes > v13: No Yes Google Chrome No Yes 1.0 Internet Explorer 7.0No Opera : Yes > v14: No No7.0 SafariYesNo YesNo

PACS - 09/19/15 5 favicon And then came mobile devices - Apple iOS, Android, Windows tiles and taskbar - each with different requirements! Apple iPhone and iPad users can turn web pages into icons on their home screen. Such a link appears as a regular iOS native application. When this happens, the device looks for a specific picture.

PACS - 09/19/15 6 favicon apple-touch-icon-57x57.png - non-retina iPhone with iOS6 or prior. apple-touch-icon-60x60.png - non-retina iPhone with iOS7. apple-touch-icon-72x72.png - non-retina iPad with iOS6 or prior. apple-touch-icon-76x76.png - non-retina iPad with iOS7.

PACS - 09/19/15 7 favicon apple-touch-icon-114x114.png - retina iPhone with iOS6 or prior. apple-touch-icon-120x120.png - retina iPhone with iOS7. apple-touch-icon-144x144.png - retina iPad with iOS6 or prior. apple-touch-icon-152x152.png - retina iPad with iOS7.

PACS - 09/19/15 8 favicon apple-touch-icon-180x180.png - iPhone 6 Plus with iOS8. apple-touch-icon.png - "default" requests, as some devices may look for this specific file. apple-touch-icon-precomposed.png - Same as apple-touch-icon.png, expect that it already has rounded corners (but neither drop shadow nor gloss effect).

PACS - 09/19/15 9 favicon All iOS icon declarations come with a size, so the device can choose the icon that fits it best. In practice, iPhone and iPad prior iOS 4.2 just consider the last icon declaration. And pre-2.3 Android does the opposite - such devices take the first declared icon. If you declare the lowest resolution first and highest resolution icon last, pre-4.2 devices get the best resolution and resize it. This values icon quality over bandwidth. But old Android devices will then get the lowest resolution icon. You decide!

PACS - 09/19/15 10 favicon ‘Favicon by RealFaviconGenerator’ is a WordPress plugin to create and install a favicon.

PACS - 09/19/15 11 favicon favicon.ico - 3 images - Used by IE, and also by some other browsers if we are not careful. favicon-16x16.png - most desktop browsers. favicon-32x32.png - Safari on Mac OS. favicon-96x96.png - Google TV.

PACS - 09/19/15 12 favicon android-chrome-36x36.png - Android Chrome M39+ with 0.75 screen density. android-chrome-48x48.png - Android Chrome M39+ with 1.0 screen density. android-chrome-72x72.png - Android Chrome M39+ with 1.5 screen density. android-chrome-96x96.png - Android Chrome M39+ with 2.0 screen density. android-chrome-144x144.png - Android Chrome M39+ with 3.0 screen density. android-chrome-192x192.png - Android Chrome M39+ with 4.0 screen density.

PACS - 09/19/15 13 favicon mstile-70x70.png - Windows 8/10 small / IE11. mstile-144x144.png - Windows 8/10 medium / IE10. mstile-150x150.png - Windows 8/10 medium / IE11. mstile-310x150.png - Windows 8/10 wide / IE11. mstile-310x310.png - Windows 8/10 large / IE11. A new ‘long’ size might be 150x310.

PACS - 09/19/15 14 favicon Internet Explorer 11 uses browserconfig.xml to find the tile pictures and color. If the file is not present, 404 errors will result. #da532c

PACS - 09/19/15 15 favicon manifest.json is the Web application manifest, defined by the W3C. It is used by Android Chrome to declare the "Add to home screen" icon name and other settings.

PACS - 09/19/15 16 favicon { "name": "App Name", "icons": [ { "src": "\/android-chrome-36x36.png", "sizes": "36x36", "type": "image\/png", "density": "0.75" }, { "src": "\/android-chrome-48x48.png", "sizes": "48x48", "type": "image\/png", "density": "1.0" }, … ] }

PACS - 09/19/15 17 favicon Your PHP script could look at the user agent string supplied and tailor the icon declarations to the requesting device. $_SERVER[‘HTTP_USER_AGENT’] - Contents of the User- Agent: header from the current request, if there is one. $browser = get_browser([$user_agent); - Attempts to determine the capabilities of the user's browser, by looking up the browser's information in the browscap.ini file. $browser[‘browser’] will contain a string, e.g. “Firefox” You would then offer only the browser specific icons.

PACS - 09/19/15 18 favicon RealFaviconGenerator.net has a generate feature that will produce all of the required files and additions to your HTML head section. You need a square picture, at least 70x70. They recommend that the picture should be at least 260x260 for optimal results. The web site also has a check feature that will analyze your web page and list diagnostics related to favicons.

PACS - 09/19/15 19 favicon The images are bundled into a ZIP file and the necessary declarations are listed as text to be copied into your section.

PACS - 09/19/15 20 favicon

PACS - 09/19/15 21 favicon