Jekyll, Gravatars, and Favicons

The ubiquitous Gravatar is still a popular choice for syncing your avatar across your online identities. A simple rake task can generate all your favicons with it too.

Rolling your own Gravatar plugin in Jekyll is an easy way of pulling in avatars for the site author or blog contributors.

And for a personal blog, your Gravatar is convenient material for a favicon if you don’t already associate yourself with a mark.

Gravatar plugin

# _plugins/to_gravatar.rb

require 'digest/md5'

module Jekyll
  module ToGravatarFilter
    def to_gravatar(input, size=100)

    private :hash
    def hash(email)
      gravatar_email = email ? email.downcase.strip : ''


Use the to_gravatar method in your Jekyll templates with an optional size value.

<!-- html -->

<img src="{{ | to_gravatar:50 }}" />

Favicon generation task

The rake task uses similar motifs as the plugin above. Although this ruby script example is for Jekyll, it is framework agnostic; all it does is generate files and puts them where you need them. Just define your variables at the top.

Due to the nature of favicons, we won’t be able to apply CSS to the square Gravatar image in order to achieve alternative image shapes (such as border-radius:50%; for a circular shape), so this example uses RMagick to generate circular images with transparent mattes.

Add a new task to your Rakefile to automate favicon generation.

# Rakefile

require 'yaml'
require 'digest/md5'
require 'RMagick'

namespace :assets do
  desc "Generate favicons using your Gravatar"
  task :favicons do
    config = YAML.load_file('_config.yml')
    gravatar_email = config['author']['email']
    asset_path = 'public'
    name_pre = "apple-touch-icon-%dx%d-precomposed.png"

    puts "Assembling Gravatar URL..."
    gravatar_hash = Digest::MD5.hexdigest(gravatar_email)
    gravatar_url = "{gravatar_hash}?s=144"

    origin = "origin.png"
    File.delete origin if File.exist? origin

    puts "Fetching Gravatar image..."
    open(origin, 'wb') do |file|
      file << open(gravatar_url).read

    FileList["*apple-touch-ico*.png"].each do |img|
      File.delete img

    FileList["*favicon.ico"].each do |img|
      File.delete img

    [144, 114, 72, 57, 32].each do |size|
      im = Magick::Image::read(origin).first.resize(size, size)
      circle = size, size
      gc =
      gc.fill 'black' size/2, size/2, size/2, 1
      gc.draw circle
      mask = circle.blur_image(0,1).negate
      mask.matte = false
      im.matte = true
      im.composite!(mask, Magick::CenterGravity, Magick::CopyOpacityCompositeOp)
      if size > 32
        puts "Generating #{name_pre} icon..." % [size, size]
        im.write "#{asset_path}/" + name_pre % [size, size]
        puts "Generating favicon.ico..."
        im.write "#{asset_path}/favicon.ico"

    puts "Cleaning up..."
    File.delete origin

Generate your favicons. Run this task whenever you change your Gravatar.

$ rake assets:favicons

Include the favicon references in your site <head>. Once set, this section does not require modification after subsequent generation of new favicons.

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ site.baseurl }}/public/apple-touch-icon-144x144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="{{ site.baseurl }}/public/apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="{{ site.baseurl }}/public/apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="{{ site.baseurl }}/public/apple-touch-icon-57x57-precomposed.png">
<link rel="shortcut icon" href="{{ site.baseurl }}/public/favicon.ico">