Email text

Please enter YOUR Email address to receive updates. Ensure you add to your safe list.

iTunes Vouchers

Tuesday 22 November 2011

Creating Consistent Images/Icons

When you want to use a logo somewhere (iSignature, documents, websites, button...), there is no problem if it is a one off. You simply find the logo you are looking for and adapt it to your needs. The problem really comes when you want multiple logos but you also want them to have a similar look and feel. They will be different sizes, different file types and a lot of work for you to make it look good. The workaround is to use a process where you add them all at the same time.


This started as an idea for creating uniform buttons for Filemaker databases but, its application is actually much wider.


Start by making a list of all the logos/icons you want. Create a folder on your PC named Icons (or of course, anything else you fancy, as long as you can find it).


Now open a browser window (hopefully you already have Firefox, as this is so easy to use)*, and go click here, then, once you are on the site, click on click here to load button. Restart Firefox and you will have an in your tool bar. Now open each of the websites where you want to use their logo (from the list you created). You will notice that each tab also has a little icon for the site (known as a Favicon).


The following steps need to be repeated for each site:


Select the tab

Click on the  and select save icon

Rename the file something you can remember (the default is favicon and save it to the Icons folder you created earlier


Once you have done this your Icons folder will be filled with all the favicons of the sites where you want to use the image, with an appropriate name.


The next stage is to get these favicons into a format that you want to use. The format depends on exactly how you are using them, as does the size. As examples, a jpg file for the twitter would look like this, and a jpg file for the Facebook logo would look like this  . You can convert the favicons to JPEG, BMP, TIFF, GIF, PNG file types.


The next, and final, part to the exercise is to translate the favicons into a consistent image format that you can use throughout any given project. I suggest that you choose one logo to work on to get the look and feel as you require, and then repeat the identical operation for all the others. Doing this sausage machine factory style, one after the other, will not take long at all. The way to do this does not even involve downloading any software, and it does not cost you anything either.


Go to and carry out the following steps for each logo/image, after you have established the size and file type (use JPEG if you are in any doubt) that you need for your particular application:


Click on Browse and locate, on your computer the favicon you wish to convert.

Set the conversion options (file type and size)

Click on Download Converted File; the file name will automatically be the same as you had set for the favicon (hence the importance of using an appropriate name).


Once this is done, you have all the images you need.


Obviously, the use of the system is not to violate copyright but, to enhance the display of your site/iSignature/database/document.


*If you do not already use Firefox, you can download it for free here.

No comments:

Post a Comment

Your comment will be checked for appropriateness before it is visible to everybody.

Please ensure that you subscribe to comments so that you will be notified of the posting.

This additional step is to protect everyone from people who seem to have nothing better to do than post inappropriate comments (as in spam).