Show & tell - 16 pixels of pain

16 pixels of painOR

How I learned to stop worrying and love the favicon

But we do look at the details. Details that provide benefit to the user.

A big picture…

CONTENT

DEV

DESIGN

Huge inventories / A single comma

Complex systems / Every KB of code

Global styling / …

The favicon

A princely 16px x 16px

If you wanted to push the limits you could go ‘hi-res’ for Vista at 32 x 32

A long, long time ago…

Introduced by Microsoft back in 1999 for our old buddy IE5. Back then a favicon did one thing and one thing only.

<link rel="shortcut icon" href="/path/to/favicon.ico">

http://www.yoursite.co.ukY

No more one-size-fits-all…

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="http://your-domain.com/apple-touch-icon-57x57.png" />








<link rel="icon" type="image/png" href="http://your-domain.com/favicon-196x196.png" sizes="196x196" />




<link rel="icon" type="image/png" href="http://your-domain.com/favicon-128.png" sizes="128x128" />

<meta name="application-name" content="Your Home Page Title"/>

<meta name="msapplication-TileColor" content="#FFFFFF" />

<meta name="msapplication-TileImage" content="http://your-domain.com/mstile-144x144.png" />

<meta name="msapplication-square70x70logo" content="http://your-domain.com/mstile-70x70.png" />


<meta name="msapplication-wide310x150logo" content="http://your-domain.com/mstile-310x150.png" />


The full house

So many devices, so many resolutions. So much… stuff

Stat check

We don’t need all that junk. So we checked the stats…

40% of our external visits on mobile devices are via iPhone 27% mobile visits are on an iPad

The remaining 35% is a mishmash of Android devices, mainly Samsung devices.

45%

Chrome

27%

Safari

14%

IE

9.5%

Firefox

DEVICES

BROWSERS

<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" sizes="192x192" type="image/png" href="android-chrome-192x192.png">

<link rel="manifest" href="/images/favicon/manifest.json">

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

<meta name="msapplication-config" content="/images/favicon/browserconfig.xml">

<meta name="msapplication-TileImage" content="mstile-144x144.png">

<meta name="msapplication-TileColor" content="#004489">

Lean & mean

Using only what we actually need.

We did some thorough testing

Phil’s PCGives results not

seen on any other PC on the planet

Minimal colour palette

Simple, bold design

Details that will scale elegantly

Ingredients of a good favicon

Oh...

We learnt that the University logo looks a bit pants at 16 x 16

Probably should do some thinking about that.

Where next?

Design

Show & tell - 16 pixels of pain