@artbrnv/realfavicongenerator

v1.0.0

Published

a day ago

Zero-dependency favicon toolkit — HTML tags, web manifest, browserconfig, size maps, path helpers, SVG favicon, Apple/Android/Windows tile configs, PWA shortcuts

0High
0Medium
0Low

artbrnv

favicon pwa manifest apple-touch-icon browserconfig web-app-manifest meta-tags zero-dependency

realfavicongenerator

Zero-dependency favicon toolkit for Node.js — HTML tags, web manifest, browserconfig, size maps, path helpers, SVG favicon, Apple/Android/Windows tile configs, PWA shortcuts.

npm install realfavicongenerator

Zero runtime dependencies. Pure JavaScript — works in Node.js, build tools, and server-side rendering.

Quick start

import { buildFaviconTags, renderFaviconHead, buildWebManifest, buildBrowserConfig } from 'realfavicongenerator';

// All <head> tags in one call
const tags = buildFaviconTags({
  basePath:      '/static/favicons',
  appName:       'My App',
  themeColor:    '#1a1a2e',
  tileColor:     '#1a1a2e',
  manifestPath:  '/site.webmanifest',
  appleTouchSizes: [180],
  faviconSizes:    [16, 32],
  includeSvg:    true,
});

// → array of <link> and <meta> tag strings
console.log(tags.join('\n'));

// Or render as a single block with a comment header
const html = renderFaviconHead({ basePath: '/', appName: 'My App', themeColor: '#ffffff' });

HTML tag builders

Individual tags

import {
  buildFaviconTag, buildIcoTag, buildSvgFaviconTag,
  buildAppleTouchIconTag, buildMaskIconTag, buildManifestTag,
  buildThemeColorTag, buildMsTags, buildAppNameTag,
} from 'realfavicongenerator';

buildFaviconTag('/favicon-32x32.png', 32)
// <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

buildIcoTag('/favicon.ico')
// <link rel="shortcut icon" href="/favicon.ico">

buildSvgFaviconTag('/favicon.svg')
// <link rel="icon" type="image/svg+xml" href="/favicon.svg">

buildAppleTouchIconTag('/apple-touch-icon-180x180.png', 180)
// <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">

buildMaskIconTag('/safari-pinned-tab.svg', '#5bbad5')
// <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

buildManifestTag('/site.webmanifest')
// <link rel="manifest" href="/site.webmanifest">

buildThemeColorTag('#ffffff')
// <meta name="theme-color" content="#ffffff">

buildThemeColorTag('#0d0d0d', 'dark')
// <meta name="theme-color" content="#0d0d0d" media="(prefers-color-scheme: dark)">

buildMsTags('#ffffff', '/mstile-144x144.png')
// [<meta name="msapplication-TileColor" ...>, <meta name="msapplication-TileImage" ...>, ...]

buildAppNameTag('My App')
// <meta name="application-name" content="My App">

Apple Web App tags

import { buildAppleWebAppTags, buildAppleSplashTags } from 'realfavicongenerator';

buildAppleWebAppTags({ title: 'My App', statusBarStyle: 'black-translucent', capable: true })
// [
//   <meta name="apple-mobile-web-app-capable" content="yes">,
//   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">,
//   <meta name="apple-mobile-web-app-title" content="My App">,
// ]

// All common iPhone/iPad splash screen tags
const splashTags = buildAppleSplashTags('/static/splash');

Web App Manifest

import { buildWebManifest, buildManifestIcon, buildShortcut, buildManifestScreenshot } from 'realfavicongenerator';

const manifest = buildWebManifest({
  name:            'My Awesome App',
  shortName:       'MyApp',
  description:     'Does awesome things.',
  startUrl:        '/',
  display:         'standalone',
  backgroundColor: '#ffffff',
  themeColor:      '#1a1a2e',
  basePath:        '/static/favicons',
  iconSizes:       [192, 512],
  shortcuts: [
    buildShortcut('New Post', '/posts/new', { description: 'Create a new post', iconSrc: '/icons/new.png' }),
    buildShortcut('Profile',  '/profile'),
  ],
});

// Serialise to disk (Node.js)
import { writeFileSync } from 'fs';
writeFileSync('public/site.webmanifest', JSON.stringify(manifest, null, 2));

Individual icon and screenshot builders:

buildManifestIcon('/android-chrome-192x192.png', 192, { purpose: 'maskable' })
// { src: '/android-chrome-192x192.png', sizes: '192x192', type: 'image/png', purpose: 'maskable' }

buildManifestScreenshot('/screenshots/home.png', 390, 844, { label: 'Home screen', formFactor: 'narrow' })

browserconfig.xml

import { buildBrowserConfig } from 'realfavicongenerator';

const xml = buildBrowserConfig({ tileColor: '#1a1a2e', basePath: '/static/favicons' });
// <?xml version="1.0" encoding="utf-8"?>
// <browserconfig>
//   <msapplication>
//     <tile>
//       <square70x70logo src="/static/favicons/mstile-70x70.png"/>
//       ...
//     </tile>
//   </msapplication>
// </browserconfig>

import { writeFileSync } from 'fs';
writeFileSync('public/browserconfig.xml', xml);

Size maps & filename helpers

import {
  ICO_SIZES, FAVICON_SIZES, APPLE_TOUCH_SIZES, ANDROID_SIZES, WINDOWS_TILE_SIZES,
  faviconFilename, appleTouchFilename, androidFilename, mstileFilename, faviconPath,
} from 'realfavicongenerator';

ICO_SIZES            // [16, 32, 48]
FAVICON_SIZES        // [16, 32, 96, 192]
APPLE_TOUCH_SIZES    // [57, 60, 72, 76, 114, 120, 144, 152, 167, 180]
ANDROID_SIZES        // [36, 48, 72, 96, 144, 192, 256, 384, 512]

faviconFilename(32)                          // 'favicon-32x32.png'
faviconFilename(32, 'png', 'apple')          // 'apple-touch-icon-32x32.png'
appleTouchFilename(180)                      // 'apple-touch-icon-180x180.png'
androidFilename(512)                         // 'android-chrome-512x512.png'
mstileFilename(150)                          // 'mstile-150x150.png'
faviconPath('favicon-32x32.png', '/static')  // '/static/favicon-32x32.png'

Full favicon file set

import { buildFaviconFileSet } from 'realfavicongenerator';

const set = buildFaviconFileSet({ basePath: '/static/favicons' });
// {
//   count: 19,
//   basePath: '/static/favicons',
//   files: [
//     { filename: 'favicon.ico',        format: 'ico', platform: 'generic', ... },
//     { filename: 'favicon.svg',        format: 'svg', platform: 'generic', ... },
//     { filename: 'favicon-16x16.png',  format: 'png', sizes: [16], ...         },
//     { filename: 'android-chrome-192x192.png', ...                             },
//     { filename: 'site.webmanifest',   format: 'json', platform: 'pwa', ...    },
//     { filename: 'browserconfig.xml',  format: 'xml',  platform: 'windows',... },
//     ...
//   ]
// }

// Use to feed any image-generation pipeline:
for (const f of set.files.filter(f => f.format === 'png')) {
  console.log(`generate: ${f.path}  (${f.sizes.join(', ')}px)`);
}

Theme config

import { buildThemeConfig } from 'realfavicongenerator';

const theme = buildThemeConfig({
  themeColor:      '#1a1a2e',
  darkThemeColor:  '#0d0d0d',
  backgroundColor: '#ffffff',
  tileColor:       '#1a1a2e',
  maskIconColor:   '#5bbad5',
});

Open Graph & Twitter tags

import { buildOgImageTags, buildTwitterImageTags } from 'realfavicongenerator';

buildOgImageTags('https://example.com/og-image.png', { width: 1200, height: 630, alt: 'My App' })
// [
//   <meta property="og:image" content="...">,
//   <meta property="og:image:width" content="1200">,
//   <meta property="og:image:height" content="630">,
//   <meta property="og:image:type" content="image/png">,
//   <meta property="og:image:alt" content="My App">,
// ]

buildTwitterImageTags('https://example.com/og-image.png', { card: 'summary_large_image', alt: 'My App' })

Utilities

import { parseSize, sizeString, isHexColor, normaliseColor, isSvgFavicon, deduplicateTags, filterTags, renderHeadBlock } from 'realfavicongenerator';

parseSize('192x192')          // { width: 192, height: 192 }
sizeString(192, 192)          // '192x192'
isHexColor('#1a1a2e')         // true
normaliseColor('#fff')        // '#ffffff'
isSvgFavicon('/favicon.svg')  // true

// Deduplicate and filter tag lists
const allTags = [...buildFaviconTags(), ...buildFaviconTags()];
deduplicateTags(allTags)           // removes duplicates
filterTags(allTags, 'icon')        // only <link rel="icon"> tags
filterTags(allTags, 'theme-color') // only theme-color meta tags

// Wrap in a comment block
renderHeadBlock(buildFaviconTags({ basePath: '/' }), { comment: 'Favicons' })
// <!-- Favicons -->
// <link rel="shortcut icon" href="/favicon.ico">
// ...

ICO config

import { buildIcoConfig, ICO_SIZES } from 'realfavicongenerator';

buildIcoConfig(ICO_SIZES, { basePath: '/static' })
// {
//   sizes: [16, 32, 48],
//   sources: [
//     { size: 16, filename: 'favicon-16x16.png', path: '/static/favicon-16x16.png' },
//     { size: 32, filename: 'favicon-32x32.png', path: '/static/favicon-32x32.png' },
//     { size: 48, filename: 'favicon-48x48.png', path: '/static/favicon-48x48.png' },
//   ]
// }

CommonJS

const {
  buildFaviconTags, buildWebManifest, buildBrowserConfig,
  FAVICON_SIZES, ANDROID_SIZES, buildThemeConfig,
} = require('realfavicongenerator');

License

MIT