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.
$ 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!
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.