GithubHelp home page GithubHelp logo

serve-dynamic-favicon's Introduction

serve-dynamic-favicon

NPM NPM

PLEASE NOTE THIS IS IN ALPHA

Node.js middleware for serving a favicon that is generated on the fly. Using the first letter of the the <title> tag overlayed a background color fetched from the <meta name="theme-color" content="#007BB6"> you'll reduce the cognitive load when switching between browser tabs. You may specify any url you want for where the metadata will be fetched from, or you can pass the letter and theme-color and save the initial request. This is very useful for when you're running expressjs or BrowserSync servers.

Install

npm install serve-dynamic-favicon --production --no-optional

API

favicon(url:string || options:object)

Create new middleware to serve a favicon generated from metadata fetched from the given url to a fetchable html document. Pass an object with options to switch the middleware from auto mode to manual mode. Manual mode require you to at least specify themeColor. symbol is optional, omitting it will render a solid color without any foreground text as logo.

Options

themeColor

The backdrop color to the generated icon. Any css color value, with or without alpha, is supported.

symbol

The text letter, usually the first character found in the <title> tag when url is defined.

symbolColor

Optionally set the color of symbol. Defaults to #ffffff.

Examples

Typically this middleware will come very early in your stack (maybe even first) to avoid processing any other middleware if we already know the request is for /favicon.ico.

express

var express = require('express');
var favicon = require('serve-dynamic-favicon');

var app = express();
app.use(favicon('https://github.com'));

// Add your routes here, etc.

app.listen(3000);

connect

var connect = require('connect');
var favicon = require('serve-dynamic-favicon');

var app = connect();
app.use(favicon('https://github.com'));

// Add your middleware here, etc.

app.listen(3000);

vanilla http server

This middleware can be used anywhere, even outside express/connect. It takes req, res, and callback.

var http = require('http');
var favicon = require('serve-dynamic-favicon');
var finalhandler = require('finalhandler');

var _favicon = favicon();

var server = http.createServer(function onRequest(req, res) {
  var done = finalhandler(req, res);

  _favicon(req, res, function onNext(err) {
    if (err) return done(err);

    // continue to process the request here, etc.

    res.statusCode = 404;
    res.end('oops');
  });
});

server.listen(3000);

License

MIT

serve-dynamic-favicon's People

Contributors

stipsan avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.