Code for converting favicons

Published on February 21, 2014

Often times whenever I start a project, I always end up looking for an old code or script for favicons. To save myself time, I wrote a Gist about it.

I’m a UI designer who loves working in the command line. It’s just so damn fast and automated especially if you have tmux set up. So I guess this article is meant for people who have similar dev workflow.

Requirements

  • $ brew install imagemagick

Creating the base icon and generating different sizes

Whenever I create a favicon in Photoshop, I usually save it as a 128x128 PNG image named favicon.png. I’ll place it in a directory along with this convert.sh shell file.

convert favicon.png -resize 16x16 favicon.ico;
convert favicon.png -resize 16x16 favicon_16x16.png;
convert favicon.png -resize 32x32 favicon_32x32.png;
convert favicon.png -resize 64x64 favicon_64x64.png;
convert favicon.png -resize 128x128 favicon_128x128.png;
echo "conversion complete";

I then run $ sh convert.sh which generates different favicon sizes. And Tada! No more manual resizing in Photoshop!

HTML code

Now open your index.html or whatever file you have your <head> tags in, then slap this thing in there:

<link rel="icon" href="/favicon_16x16.png" sizes="16x16" type="image/png">
<link rel="icon" href="/favicon_32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/favicon_64x64.png" sizes="64x64" type="image/png">
<link rel="icon" href="/favicon_128x128.png" sizes="128x128" type="image/png">

If you’re a vim user, clone Ultisnips to your local bundle repo in pathogen or vundle and create a snippet that would trigger the code above. You have no idea how much time you’ve saved :) supercharged workflow ftw!

Well that’s it and hope it helps. Lemme know if there’s a faster way to do this.