Search My Network

Thursday, June 29, 2017

Logo & Photo Favicons

 Ever see those websites with no actual icon?  An icon helps you easily identify a website.  It doesn't need to be a logo, but something you might associate with that website.  A professional might use their own photo.

the icons of each tab in this cropped and reduced size screen grab still accentuate the brand with visual cues.

I've been trying to update all of my websites with favicons.  I can easily reduce the very best images in Photoshop at tiny icon sizes (16 x 16 and 32 x 32 pixels) using 'BiCubic Sharper' (which is best for image size reductions and will maintain enough of the integrity of the image to be usable... usually).

Then, I save the tiny images as web media in 24-bit PNGs (portable network graphics format) with alpha (transparency) on.

If you don't reduce the size of your image in a professional image manipulation package such as Photoshop, just try to use a square image format so that the resulting reduced size image maintains the same proportions.

Faviconvert.com website converts a square logo or photo into a favicon.
Faviconvert.com will convert a square sized logo, graphic or photo images into icons that you can use for people to favorite your website. just follow the directions on the site to implement the resulting icon.

Then upload the 16 x 16 pixel, 32 x 32 pixel, or square sized pixel sized images up to my Faviconvert.com site.  It will do the rest of the conversion process for you.  I am still trying to address a bug on that site, but it works well and produces a few icons in different formats that you can use on your website as a favorites icon (favicon for short, of course).
 
The end result is an icon and an animated graphic that you can use as an icon to help associate your site with, and make it stand out as a finished product.

When you are done, the resulting favicon package will be presented and you will be able to download the icons in a compressed and packaged zip file.  The website will even give you instructions on how to implement the icons on your website.

Usually, people just drop the favicon.ico icon file into the root directory of the website, but there are other options, such as using an optimized graphic image, or using the animated version, that will require you to add a bit of code to your site pages.  If you are using a CMS, you will probably only have to enter your preferred image option code once.

No comments:

Post a Comment