Jekyll, Gravatars, and Favicons

Sarah Cassady | 19 Jul 2015 | Tags: jekyll, gravatar, ruby, rmagick, rake

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)
      "//www.gravatar.com/avatar/#{hash(input)}?s=#{size}"
    end

    private :hash
    def hash(email)
      gravatar_email = email ? email.downcase.strip : ''
      Digest::MD5.hexdigest(gravatar_email)
    end
  end
end

Liquid::Template.register_filter(Jekyll::ToGravatarFilter)

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

<!-- html -->

<img src="{{ post.author.email | 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 = "http://www.gravatar.com/avatar/#{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
    end

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

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

    [144, 114, 72, 57, 32].each do |size|
      im = Magick::Image::read(origin).first.resize(size, size)
      circle = Magick::Image.new size, size
      gc = Magick::Draw.new
      gc.fill 'black'
      gc.circle 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]
      else
        puts "Generating favicon.ico..."
        im.write "#{asset_path}/favicon.ico"
      end
    end

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

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">

Sarah Cassady

Jekyll, Gravatars, and Favicons

Gravatar plugin

Favicon generation task

Next post

Generating Custom Map Tiles »

Previous post

« Jekyll on Github Pages with Plugins