The Past, Present, and Future of Favicons

on YouTube ↗23m

" summary

Claims that favicons began as a late-night IE5 hack and now require dozens of sizes are backed by specifics: legacy 16x16 tabs through 270x270 tiles to recommended 48x48 and 512x512 PNG fallbacks. Modern approach favors svg favicons (Chrome 80, Firefox support) plus web app manifest fields for maskable and monochrome icons. Two PWA tools—maskable.app and monochrome.fyi—exist, built as offline PWAs with canvas and vanilla JS, and they preview, edit and export working icons for Firefox for Android and Play Store packaging.

AI-written summary · about

" chapters (14)

1. 0:00Start
2. 0:55Internet Explorer 4
3. 2:52The History
4. 4:35First Iphone
5. 5:30Progressive Web App
6. 6:27How Many Sizes of Favicons Are There
7. 7:55Vector Icons
8. 9:20Media Queries
9. 10:41Maskable Icons
10. 12:06Monochrome Icons
11. 15:27The Future of Icons inside Your Javascript
12. 16:19The Future Favicons
13. 18:18Favicon or Favicon
14. 20:53Tools That You Used for Generating Favicons

" related talks

• 44mIcons and How They Are PreparedPetr Zhemchugov · HolyJS 2024 Spring
• 56mIcons and the Web: Symbols of the Modern AgeTim G. Thomas · NDC London 2019
• 31mHandling Images on the WebMarco Otte-Witte · EmberConf 2021
• 39mThe Death of Icon Fonts Component Based SVG Icon SystemsKristie Giles · UtahJS Conf 2017
• 47mThe Icon Design ProcessJon Hicks · beyond tellerrand Berlin 2014
• 48mAdaptive Icons: Case Studies & Principles of DesignMichael Cook · Android Summit 2017
• 46mLets Design an Icon SetSteve Schoger · SmashingConf New York 2022
• 36mVFWTF?Bianca Berning · beyond tellerrand Düsseldorf 2021