Skip to content

sebastian-software/effective-favicon

Folders and files

NameName
Last commit message
Last commit date

Latest commit

4dc6855 · Aug 2, 2024

History

47 Commits
Aug 2, 2024
Aug 2, 2024
Jul 13, 2023
Jul 13, 2023
Aug 1, 2024
Jul 13, 2023
Aug 2, 2024
Aug 2, 2024
Jul 31, 2024
Aug 2, 2024
Jul 13, 2023

Repository files navigation

Effective Favicon Generator

A compact tool for generating a comprehensive set of modern favicons. Simply provide a folder containing SVG files (a single SVG file is also acceptable), and the generator will automatically produce the recommended favicon variants based on How to Favicon in 2024: Six files that fit most needs.

Usage

effective-favicon <directory>

The command expects one or more SVG files within the specified directory. It generates various output files using the same base name with different postfixes and extensions. For example:

Given one source file e.g.:

awesome-company.svg

these assets are created dynamically in the same folder:

  • Optimized SVG Icon: awesome-company-opt.svg - an optimized version of the source SVG.
  • Classic Favicon: awesome-company.ico - includes 16px and 32px icons.
  • Apple Touch Icon: awesome-company-180.png
  • Web Manifest Icons:
    • awesome-company-192.png
    • awesome-company-512.png
  • ReactComponent: AwesomeCompany.tsx - for registering all created assets

Command Line Interface

effective-favicon <fileOrFolder> [options]

Arguments

  • <fileOrFolder>: The file or folder to process (required).

Options

  • --png-quality <quality>: Set PNG quality. Default is 95.
  • --manifest-icon-sizes <sizes>: Set manifest icon sizes (comma-separated). Default is "192,512".
  • --apple-icon-sizes <sizes>: Set Apple icon sizes (comma-separated). Default is "152,167,180".
  • --fav-icon-sizes <sizes>: Set favicon sizes (comma-separated). Default is "16,32".

Examples

Basic Usage

Process a file or folder with default settings:

effective-favicon myFolder

Custom PNG Quality

Specify custom PNG quality:

effective-favicon myFolder --png-quality 70-80

Custom Icon Sizes

Specify custom icon sizes:

effective-favicon myFolder --manifest-icon-sizes 144,256 --apple-icon-sizes 120,144,180 --fav-icon-sizes 16,48

Help

For more information, use the help flag:

effective-favicon --help

This will display detailed usage information and available options.

Tech Stack

  • sharp: Image resizing and conversion. Sharp is a high-performance image processing library that allows for fast and efficient image manipulation.
  • svgo: SVG optimization. SVGO is a Node.js-based tool for optimizing SVG vector graphics files, reducing their size without compromising quality.

License

Apache License; Version 2.0, January 2004

Copyright

Logo of Sebastian Software GmbH, Mainz, Germany

Copyright 2023-2024
Sebastian Software GmbH