The less-than-random ramblings of Scott Jackson, software architect.

No Such Comfort

The Nightmare of Favicons

Posted by scottj on April 19, 2017 in Uncategorized with No Comments


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')

Leave a Reply

No trackbacks yet.

No post with similar tags yet.

Posts in similar categories

Capricious Whim

“Einstein argued that there must be simplified explanations of nature, because God is not capricious or arbitrary. No such faith comforts the software engineer.” —Fred Brooks