create-favicon
Advanced tools
Creates a minimal set of favicons that are compatible with most environments, based on this article by Evil Martians.
Source image must be at least 512x512, preferably a square SVG.
The generated files are:
Outputs the HTML needed to link these files up on success. Available as a CLI tool and as an API.
## Install globally and run
npm install -g create-favicon
create-favicon <path-to-image> [output-dir]
## Run straight from npm (separate flags with --)
npm create favicon <path-to-image> [output-dir]
npm create favicon <path-to-image> [output-dir] -- --overwrite
## Or use npx (separate flags with --)
npx create-favicon <path-to-image> [output-dir]
npx create-favicon <path-to-image> [output-dir] -- --no-warn
<path-to-image> Source image
[output-dir] Output directory (default: ./favicons)
--overwrite Overwrite existing files (default: false)
--base-path <path> Base path for printed HTML and web manifest (default: /)
--no-warn Disable warnings (default: false)
--no-manifest Skip outputting a webmanifest (default: false)
-h, --help Display this message
-v, --version Display version number
import {createFavicon} from 'create-favicon'
// Outputs the files to the current working directory + /favicons,
// and returns the HTML to be inserted into the <head> of your HTML document
const {html} = await createFavicon({sourceFile: '/path/to/some/file.svg'})
// You can also specify the output directory:
const {html} = await createFavicon({
sourceFile: '/path/to/some/file.svg',
outputDir: '/path/to/output/dir',
})
// If your files are not going to be placed at the root of your domain,
// you will have to specify a custom base path:
const {html} = await createFavicon({
sourceFile: '/path/to/some/file.svg',
basePath: '/my/app',
})
// If you want to overwrite existing files, pass the `overwrite` option:
const {html} = await createFavicon({
sourceFile: '/path/to/some/file.svg',
overwrite: true,
})
// Warnings can be silenced by passing `false` to the `warn` option:
const {html} = await createFavicon({
sourceFile: '/path/to/some/file.svg',
warn: false,
})
// Manifest generation can be disabled:
const {html} = await createFavicon({
sourceFile: '/path/to/some/file.svg',
manifest: false,
})
// The favicon generator can also take a URL as input:
const {html} = await createFavicon({sourceFile: 'https://example.com/sourceLogo.svg'})
// For advanced HTTP cases (need to configure proxies, redirects etc),
// pull the image down yourself and pass it to the generator as a buffer:
const myImage = await someFetcher({
url: 'https://example.com/sourceLogo.svg',
}).then((res) => res.buffer())
const {html} = await createFavicon({sourceFile: myImage})
MIT © Espen Hovlandsdal
FAQs
Create modern favicon variations from source image
We found that create-favicon demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub postponed a new billing model for self-hosted Actions after developer pushback, but moved forward with hosted runner price cuts on January 1.
Research
Destructive malware is rising across open source registries, using delays and kill switches to wipe code, break builds, and disrupt CI/CD.
Security News
Socket CTO Ahmad Nassri shares practical AI coding techniques, tools, and team workflows, plus what still feels noisy and why shipping remains human-led.