jekyll-favicon-generator
A simple and fast Jekyll plugin to generate favicons from a single source image.
Features
- Generates all favicons for your website using sensible modern defaults:
- favicon.ico for legacy browsers
- 16x16 and 32x32 PNG for IE11 and Safari which don't support SVG favicons
- Optimized SVG (only supported when the source image is also SVG)
- 180x180 apple-touch-icon
- 192x192 and 512x512 Android icons linked from site.webmanifest
- Fully configurable through your _config.yml
- Adds negligible time to your build process by using ruby-vips for image processing
- No additional non-ruby dependencies besides libvips
Installation
Ensure libvips is installed on your system.
-
On Debian/Ubuntu:
$ apt install libvips
-
On MacOS with Homebrew:
$ brew install vips
-
On Windows see the instructions on the libvips website here.
Install the gem and add to the application's Gemfile by executing:
$ bundle add jekyll-favicon-generator
If bundler is not being used to manage dependencies, install the gem by executing:
$ gem install jekyll-favicon-generator
Usage
Default configuration
favicon-generator:
source: nil # by default automatically find favicon.* image in source root
destination: assets/icons # where generated favicons are stored
color: '#000000' # Foreground color; used in site.webmanifest
background: '#ffffff' # Background color; used in site.webmanifest
icons:
- file: favicon.ico # File name for the icon
size: '16,24,32,48' # Sizes to generate; only .ico files can have multiple sizes
ref: nil # Always placed in the site root regardless of the destination option
- file: favicon-16.png
size: 16
ref: link/icon # Referenced from a <link rel="icon"> tag
- file: favicon-32.png
size: 32 # Icons are always square, so only one dimension is necessary
ref: link/icon
- file: favicon.svg
size: nil # Size is ignored for SVG favicons
ref: link/icon
- file: apple-touch-icon.png
size: 180
ref: link/apple-touch-icon # Referenced from a <link rel="apple-touch-icon"> tag
- file: android-chrome-192.png
size: 192
ref: manifest # Referenced from a generated site.webmanifest file
# The webmanifest is automatically linked using a <link rel="manifest"> tag
- file: android-chrome-512.png
size: 512
ref: manifest
Generated tags
To render tags for all the generated icons, use the following Liquid tag:
{% favicons %}
With the default configuration this renders as:
<link rel="icon" href="/assets/icons/favicon-16.png" sizes="16x16">
<link rel="icon" href="/assets/icons/favicon-32.png" sizes="32x32">
<link rel="icon" href="/assets/icons/favicon.svg" sizes="any">
<link rel="apple-touch-icon" href="/assets/icons/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/site.webmanifest">
Development
After checking out the repo, run bin/setup
to install dependencies. Then, run rake spec
to run the tests. You can also run bin/console
for an interactive prompt that will allow you to experiment.
To install this gem onto your local machine, run bundle exec rake install
. To release a new version, update the version number in version.rb
, and then run bundle exec rake release
, which will create a git tag for the version, push git commits and the created tag, and push the .gem
file to rubygems.org.
Contributing
Bug reports and pull requests are welcome on GitHub at https://github.com/staticintlucas/jekyll-favicon-generator. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the code of conduct.
License
The gem is available as open source under the terms of the MIT License.
Code of Conduct
Everyone interacting in the jekyll-favicon-generator
project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the code of conduct.