Skip to content

Instantly share code, notes, and snippets.

@nateware
Last active April 8, 2024 05:48
Show Gist options
  • Star 51 You must be signed in to star a gist
  • Fork 8 You must be signed in to fork a gist
  • Save nateware/900d2d09f4884ac0c073 to your computer and use it in GitHub Desktop.
Save nateware/900d2d09f4884ac0c073 to your computer and use it in GitHub Desktop.
Imagemagick to create favicon.ico with 16x16 and 32x32 sizes in it
# IE is still braindead so still use favicon.ico
convert -resize x16 -gravity center -crop 16x16+0+0 -flatten -colors 256 input.png output-16x16.ico
convert -resize x32 -gravity center -crop 32x32+0+0 -flatten -colors 256 input.png output-32x32.ico
convert output-16x16.ico output-32x32.ico favicon.ico
# Then, HTML needs to specify size="XxY" as largest size due to browser bugs
<link rel="shortcut icon" href="/favicon.ico" sizes="32x32">
# Create apple ones
convert -resize x152 input.png apple-touch-icon-152x152.png
convert -resize x120 input.png apple-touch-icon-120x120.png
convert -resize x76 input.png apple-touch-icon-76x76.png
convert -resize x60 input.png apple-touch-icon-60x60.png
# HTML for apple
<link rel="apple-touch-icon" sizes="152x152" href="<%= image_path 'apple-touch-icon-152x152.png' %>">
<link rel="apple-touch-icon" sizes="120x120" href="<%= image_path 'apple-touch-icon-120x120.png' %>">
<link rel="apple-touch-icon" sizes="76x76" href="<%= image_path 'apple-touch-icon-76x76png' %>">
<link rel="apple-touch-icon" href="<%= image_path 'apple-touch-icon-60x60.png' %>">
@almost-online
Copy link

<link rel="apple-touch-icon" sizes="76x76" href="<%= image_path 'apple-touch-icon-76x76png' %>">
apple-touch-icon-76x76pngapple-touch-icon-76x76.png

@vlad88sv
Copy link

For convenience:
size=128 && convert -resize x"$size" -gravity center -crop "$size"x"$size"+0+0 -flatten -colors 256 input.png output-"$size"x"$size".png

@gunar
Copy link

gunar commented Jun 2, 2020

Makes for a nice bash function to be added to our ~/.bashrc:

function favicon() {
  convert -resize x16 -gravity center -crop 16x16+0+0 -flatten -colors 256 input.png output-16x16.ico
  convert -resize x32 -gravity center -crop 32x32+0+0 -flatten -colors 256 input.png output-32x32.ico
  convert output-16x16.ico output-32x32.ico favicon.ico
  convert -resize x152 input.png apple-touch-icon-152x152.png
  convert -resize x120 input.png apple-touch-icon-120x120.png
  convert -resize x76  input.png apple-touch-icon-76x76.png
  convert -resize x60  input.png apple-touch-icon-60x60.png
  xclip -selection clipboard <<EOF
<link rel="shortcut icon" href="/favicon.ico" sizes="32x32"/>
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"/>
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"/>
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"/>
<link rel="apple-touch-icon" href="/apple-touch-icon-60x60.png"/>
EOF
  echo "HTML copied to the clipboard!"
}

@MewX
Copy link

MewX commented Sep 20, 2020

Alpha channel is lost after this conversion though.

@hackerb9
Copy link

The ImageMagick documentation suggests using this:

convert image.png -alpha off -resize 256x256 \
          -define icon:auto-resize="256,128,96,64,48,32,16" \
          favicon.ico

If you remove -alpha off you will not lose transparency, @MewX. I do not know why they added that, but I presume some old browsers would show all the different resolutions as a stack.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment