No Such Comfort

Would you like to read about the evolution of Favicons?

tl;dr? Here’s a tool that will solve (nearly) everything for you. They also have a tool on that page to check that everything is honky-dory with your favicons.

For my node prototypes, I create explicit static routes for each of the files it generates. Here’s an example.

module.exports = function (app, express) {
// must be hosted in the root directory for maximum compatibility
app.use('/android-chrome-192x192.png', express.static('public/favicon/android-chrome-192x192.png'));
app.use('/android-chrome-512x512.png', express.static('public/favicon/android-chrome-512x512.png'));
app.use('/apple-touch-icon.png', express.static('public/favicon/apple-touch-icon.png'));
app.use('/browserconfig.xml', express.static('public/favicon/browserconfig.xml'));
app.use('/favicon-16x16.png', express.static('public/favicon/favicon-16x16.png'));
app.use('/favicon-32x32.png', express.static('public/favicon/favicon-32x32.png'));
app.use('/favicon.ico', express.static('public/favicon/favicon.ico'));
app.use('/manifest.json', express.static('public/favicon/manifest.json'));
app.use('/mstile-70x70.png', express.static('public/favicon/mstile-70x70.png'));
app.use('/mstile-144x144.png', express.static('public/favicon/mstile-144x144.png'));
app.use('/mstile-150x150.png', express.static('public/favicon/mstile-150x150.png'));
app.use('/mstile-310x150.png', express.static('public/favicon/mstile-310x150.png'));
app.use('/mstile-310x310.png', express.static('public/favicon/mstile-310x310.png'));
app.use('/safari-pinned-tab.svg', express.static('public/favicon/safari-pinned-tab.svg'));
};


For node prototypes using pug as the templating engine, I also create an include to handle the meta tags.

link(rel='apple-touch-icon', sizes='180x180', href='/apple-touch-icon.png')
link(rel='icon', type='image/png', href='/favicon-32x32.png', sizes='32x32')
link(rel='icon', type='image/png', href='/favicon-16x16.png', sizes='16x16')
link(rel='manifest', href='/manifest.json')
link(rel='mask-icon', href='/safari-pinned-tab.svg', color='#ffc40d')
meta(name='theme-color', content='#ffc40d')