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 1999. 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: <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

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

ICO PNG GIF animated GIFs JPEG APNG SVG

Firefox 1.0 1.0 1.0 Yes Yes 3.0 41.0

Google Chrome Yes Yes 4.0 4.0 4.0 No No

Internet Explorer 5.0 11.0 11.0 No No No No

Opera 7.0 7.0 7.0 7.0 7.0 9.5 Dropped

Safari Yes 4.0 4.0 No 4.0 No No

favicon

PACS - 09/19/15 4

favicon

Browser Address bar

Address bar drop down list

Links bar Bookmarks Tabs Drag to desktop

Firefox 1.0-12.0: Yes> v13: No Yes Yes Yes Yes Yes

Google Chrome No No Yes Yes 1.0 1.0

Internet Explorer 7.0 No 5.0 5.0 7.0 5.0

Opera7.0-12.17:

Yes> v14: No

No 7.0 7.0 7.0 7.0

Safari Yes No No Yes No No

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.

<?xml version="1.0" encoding="utf-8"?><browserconfig> <msapplication> <tile> <square70x70logo src="/mstile-70x70.png"/> <square150x150logo src="/mstile-150x150.png"/> <square310x310logo src="/mstile-310x310.png"/> <wide310x150logo src="/mstile-310x150.png"/> <TileColor>#da532c</TileColor> </tile> </msapplication></browserconfig>

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 <head> section.

PACS - 09/19/15 20

favicon

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"><link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"><link rel="icon" type="image/png" href="/favicon-194x194.png" sizes="194x194"><link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"><link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192"><link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"><link rel="manifest" href="/manifest.json"><meta name="msapplication-TileColor" content="#ff0000"><meta name="msapplication-TileImage" content="/mstile-144x144.png"><meta name="theme-color" content="#a21ef0">

PACS - 09/19/15 21

favicon

https://en.wikipedia.org/wiki/Faviconhttp://www.htmlkit.com/services/favicon/http://www.favicon.com/http://realfavicongenerator.net/