The Nightmare of Favicons
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.