favicon.ico�

�Favorites icon

https://ruthlessray.wordpress.com/2013/09/02/inventing-favicon-ico/

The Past, Present, and Future of Favicons

TIGER OAKES

tigeroakes.com @Not_Woods

@Not_Woods

@Not_Woods

The Past

@Not_Woods

The Past

@Not_Woods

<link rel="icon" type="image/png" � href="/favicon.png" sizes="16x16">

index.html

The Past

@Not_Woods

<link rel="shortcut icon" type="image/png" � href="/favicon.png" sizes="16x16">

index.html

The Past

@Not_Woods

@Not_Woods

@Not_Woods

@Not_Woods

The Past

@Not_Woods

<link rel="apple-touch-icon"� href="/ios-icon.png" sizes="57x57">

index.html

The Present

THE PRESENT

The Present

@Not_Woods

manifest.webmanifest

The Present

@Not_Woods

{

"short_name": "Web app",

"icons": [

{

"type": "image/png",

"src": "/images/icons-192.png",

"sizes": "192x192"

}

]

}

manifest.webmanifest

The Past

@Not_Woods

<link rel="manifest"� href="/manifest.webmanifest">

index.html

The Present

@Not_Woods

16x16

The Present

@Not_Woods

32x32

16x16

48x48

The Present

@Not_Woods

32x32

16x16

48x48

57x57

The Present

@Not_Woods

32x32

16x16

72x72

114x114

48x48

57x57

128x128

The Present

@Not_Woods

32x32

16x16

72x72

114x114

48x48

57x57

128x128

270x270

558x558

Vector icons

The Future: Vector icons

@Not_Woods

@Not_Woods

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">

<rect width="100" height="100" fill="red" />

</svg>

​

​

favicon.svg

The Future: Vector icons

@Not_Woods

<link rel="icon" type="image/svg+xml" � href="/favicon.svg" sizes="any">

index.html

The Future: Vector icons

@Not_Woods

{

"short_name": "Web app",

"icons": [

{

"type": "image/svg+xml",

"src": "/icon.svg",

"sizes": "any"

}

]

}

manifest.webmanifest

The Future: Vector icons

@Not_Woods

The Future: Vector icons

@Not_Woods

<svg width="100" height="100" � xmlns="http://www.w3.org/2000/svg">

<style>

rect { fill: red; }� </style>���

<rect width="100" height="100" />

</svg>

favicon.svg

The Future: Vector icons

@Not_Woods

<svg width="100" height="100" � xmlns="http://www.w3.org/2000/svg">

<style>

rect { fill: red; }

@media (prefers-color-scheme: dark) {

rect { fill: darkred; }

}

</style>

<rect width="100" height="100" />

</svg>

favicon.svg

The Future: Vector icons

@Not_Woods

@media (prefers-color-scheme: light) {

.icon { fill: yellow; }

}

​

@Not_Woods

@media (prefers-color-scheme: dark) {

.icon { fill: gray; }

}

​

@Not_Woods

@media (prefers-contrast: high) {

.icon { fill: cyan; }

}

​

@Not_Woods

@media (max-width: 48px) {

.icon-caption { display: hidden; }

}

​

The Future: Vector icons

@Not_Woods

<link rel="icon" href="icon-small.svg" sizes="48x48">

<link rel="icon" href="icon-large.svg" sizes="any">

The Future: Vector icons

New icon �formats

Maskable icons

@Not_Woods

The Future: New icon formats

@Not_Woods

The Future: New icon formats

@Not_Woods

Samsung

Pixel

LG

The Future: New icon formats

@Not_Woods

The Future: New icon formats

@Not_Woods

The Future: New icon formats

Samsung

Pixel

LG

@Not_Woods

The Future: New icon formats

Samsung

Pixel

LG

@Not_Woods

/iOS

The Future: New icon formats

Samsung

Pixel

LG

Monochrome icons

@Not_Woods

The Future: New icon formats

@Not_Woods

@Not_Woods

The Future: New icon formats

@Not_Woods

The Future: New icon formats

@Not_Woods

The Future: New icon formats

@Not_Woods

The Future: New icon formats

@Not_Woods

The Future: New icon formats

@Not_Woods

Windows

The Future: New icon formats

@Not_Woods

{

"short_name": "Web app",

"icons": [

{

"type": "image/svg+xml",

"src": "default.svg",

"sizes": "any",

"purpose": "any"

},� ...

�

manifest.webmanifest

The Future: New icon formats

@Not_Woods

...

{

"type": "image/svg+xml",

"src": "maskable.svg",

"sizes": "any",

"purpose": "maskable"

},� ...

manifest.webmanifest

The Future: New icon formats

@Not_Woods

...

{

"type": "image/svg+xml",

"src": "monochrome.svg",

"sizes": "any",

"purpose": "monochrome"

}

]

}

manifest.webmanifest

The Future: New icon formats

@Not_Woods

https://maskable.app

https://monochrome.fyi

https://maskable.app/editor

The Future: New icon formats

https://maskable.app

@Not_Woods

The Future: New icon formats

https://maskable.app/editor

@Not_Woods

The Future: New icon formats

https://monochrome.fyi

@Not_Woods

The Future: New icon formats

Image�Resource

The Future: ImageResource

@Not_Woods

{

…

"icons": [

{

"type": "image/svg+xml",

"src": "/images/icon.svg",

"sizes": "192x192"

}

]

}

manifest.webmanifest

@Not_Woods

navigator.serviceWorker.ready.then(async (swReg) => {

const bgFetch = await swReg.backgroundFetch.fetch(� 'my-fetch', � ['/big-file.mp4'], {

title: 'Large video download',

icons: [{

type: 'image/png',

src: '/video-thumbnail.png',

sizes: '300x300',

}],

downloadTotal: 60 * 1024 * 1024,

}� );

});

script.js

The Future: ImageResource

@Not_Woods

What icons should I use today?

@Not_Woods

<link rel="icon" type="image/svg+xml" � href="/favicon.svg" sizes="any">

index.html

What icons should I use today?

@Not_Woods

<link rel="icon" type="image/svg+xml" � href="/favicon.svg" sizes="any">

<link rel="icon" type="image/png" � href="/big.png" sizes="512x512">

<link rel="icon" type="image/png" � href="/small.png" sizes="48x48">

index.html

What icons should I use today?

@Not_Woods

{

"type": "image/svg+xml",

"src": "default.svg",

"purpose": "any"

}

{

"type": "image/svg+xml",

"src": "maskable.svg",

"purpose": "maskable"

}

{

"type": "image/svg+xml",

"src": "monochrome.svg",

"purpose": "monochrome"

}

manifest.webmanifest

Thanks for listening!

@Not_Woods

tigeroakes.com��maskable.app�monochrome.fyi