Tuesday, March 06, 2012

How to Make a Favicon. No Codes, No Technobabble.


I've recently put the photo of an apple from my garden as the favicon for this blog.
Favicon is a small icon next to the web address of your site or blog. Web platforms have their own brand favicons by default. To make your site stand out it makes sense to have your own custom favicon.
On the web, there are many different recipes on how to make a favicon and where to place it. They often involve editing HTML and other technical stuff, which puts off many users.
Another stumbling block is making a perfectly square image, a requirement for favicons.
If you work on a Mac and use Blogger (blogspot) it is easy to make a favicon without going into technicalities.


Here is the description:

1. iPhoto - Edit - Constrain - Square
- Choose or design the image for your favicon. 
- Import to iPhoto.
- Select the image and click Edit. When editing tool bar opens click on Crop. 
- Click on Constrain bar and choose Square from the drop-dwon menu. Move and resize the cropping square to have a close crop of the favicon image. 
- Click Apply.
- Check that the size of the image is below 100 kb: iPhoto>Photos>Show Extended Photo Info.  
If the image is still too big in size, reduce it in Preview>File>Save as... There is a slider to reduce the image quality. As you reduce it the size of the file also reduces. Preview dialogue shows the size. As it is a very small icon, the main consideration is to make it stand out, be recognizable, rather than maintaining the high definition of the image.


2. Blogger - Layout - Favicon - Edit - Choose Image - Open - Save Arrangement

- In Blogger Dashboard, click on Layout.
- In the Favicon window, click on Edit and the uploading dialogue opens.
- When you click on Choose image, in the sidebar under Media, click on Photos, choose iPhoto and click on Flagged. Click on your favicon image and click Open. 
Alternatively, drag the image from iPhoto to the Desktop and upload it from the Desktop.

It may take some time before favicon shows in different browsers. But it works.


No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...

Copyright

© 2006-2010, 2010-2017 Alexander Anichkin, All Rights Reserved.
All content is original and was created by me, the author and publisher of I Work in Pages.
Quotations and images are attributed where applicable.
No republication without express prior permission.
Blog template by Blogger with customisation by the publisher.