View
183
Download
0
Category
Preview:
Citation preview
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="apple-touch-icon-precomposed" sizes="114x114" href="http://your-domain.com/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://your-domain.com/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://your-domain.com/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="http://your-domain.com/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="http://your-domain.com/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="http://your-domain.com/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="http://your-domain.com/apple-touch-icon-152x152.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-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="http://your-domain.com/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="http://your-domain.com/favicon-16x16.png" sizes="16x16" />
<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-square150x150logo" content="http://your-domain.com/mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="http://your-domain.com/mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="http://your-domain.com/mstile-310x310.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?
Recommended