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

About Me Sample Title

This is a sample text about you. You may login and go to the Dojuniko settings page and edit this text. Here you can display a summary of your website or anything that is interesting to your visitors. You also can disable this section completely. You have full control thru the settings page.