Little custom favicons for your bookmarks bar

[Lantizia]

Hi,

This is my first post but I've used 'convert' for a few small things in the past. This time I'd like to use it in conjunction with...


https://sites.google.com/site/sonthakit ... conchanger

It's basically a little add-on (I'm not the author) that lets you change the favicon that your browser stores (usually 16x16 in PNG format) along with bookmarks. I find this handy when you want to cram more bookmarks on to your bookmarks bar and want to pick something more memorable, like this...



Finding good icons is hard, so I'm using images found on Google Images and converting them with ImageMagick to make them decent.

Example one...
I've got this Google Docs spreadsheet for working out the cost of Pepsi Max cans I give away for free at work and whether it's worth continuing the practice based on the tips I get back! A useful icon for this bookmark is a Pepsi Max can which I produce like this...

Code: Select all

curl -sL pepsi.com/assets/images/nutrition/en-us/pepsi-max-can.jpg | convert - -fuzz 20% -fill none -draw 'color 0,0 floodfill' -trim -background none -resize 16x16 -gravity center -extent 16x16 +repage pepsi-max-can.png

As I understand the above...

Code: Select all

-fuzz 10% -fill none -draw 'color 0,0 floodfill'

Makes it fill transparency at the top most left pixel with a fuzz of 10% (I could add a border to ensure this works but most images have at least a 1 pixel border of the same colour anyway)

Code: Select all

-trim

Crops the image to exclude as much of what is now transparent

Code: Select all

-background none -resize 16x16

Resizes the image to 16x16 but maintaining aspect ratio (so either width or height may be less than 16, but not higher than)

Code: Select all

-gravity center -extent 16x16

Makes the image 16x16 if it isn't already putting the object in the centre

Code: Select all

+repage

I had to add this to avoid PNG offsets for some reason, GIMP kept warning about them.

Example two...
Same command but this time the image is the Amazon Wish List logo... if you bookmark your wish list page you just get the standard Amazon icon which frankly could be anything.

Code: Select all

curl -sL s-media-cache-ak0.pinimg.com/236x/e0/2c/6a/e02c6a50d17c76b7085c3e571bf3d06d.jpg | convert - -fuzz 20% -fill none -draw 'color 0,0 floodfill' -trim -background none -resize 16x16 -gravity center -extent 16x16 +repage amazon-wish-list.png

The question...
Can anyone improve upon this technique?

Also, I find that GIMP doesn't show any partially transparent pixels if the image is 16x16 but does at 32x32 or 64x64.
EDIT: Nevermind, must be a GIMP bug.

Steven

[snibgo]

Thanks for the examples. I guess curl is to download the file? You can do this directly in IM, eg:

Code: Select all

convert http://pepsi.com/assets/images/nutrition/en-us/pepsi-max-can.jpg -fuzz 20% -fill none -draw 'color 0,0 floodfill' -trim -background none -resize 16x16 -gravity center -extent 16x16 +repage p.png

For me, Gimp shows partial transparencies. For p.png, it shows alpha values eg 80% on the bottom row of p.png.

[Lantizia]

Thanks for the examples. I guess curl is to download the file? You can do this directly in IM

Ah I didn't know that, but I use curl as it can follow redirects and do things like NTLM authentication (some of the icons I create are grabbed from this stupid MS Dynamics CRM thing we use at work)

For me, Gimp shows partial transparencies. For p.png, it shows alpha values eg 80% on the bottom row of p.png.

Ah yes on my GIMP (it is 2.8.10, not got around to upgrading my Linux distro yet) it does recognize the proper colour using the Color Picker Tool - but that colour doesn't actually show on the canvas. Must be a GIMP bug I guess, so nothing to worry about with ImageMagick.

[snibgo]

I mentioned IM's ability to download merely for completeness. For me, comms is the slowest and least-reliable link in the chain, so doing it separately is wise.