Creating a Favicon
As I have a brand new Semiomantics X0 3.1 script installed on my personal blog I have made a decision to also alter the look of my web site. The site will no longer display the flash slider, which is not smartphone friendly, but instead will display the SlideDeck Pro which is not only clearly visible on any mobile device like an ipad or iphone but also includes touchscreen interaction, cool eh?
One of the features when customising a website is creating a favicon which displays in a brower next to your website name. Both .jpg and .gif formats are accepted these days by most browsers however, to be visible on the IE browser you still need the .ico format.
You can create an image that you wish to display and then use a favicon generator to change the format to .ico or you can now create an image in Photoshop and there save it as .ico after having installed the neccessary plug-in. Both ways work perfectly well.
Creating a favicon image in Photoshop
I started creating my favicon image in Adobe Photoshop CS4, working on a larger canvas than neccessary, 256×256, (this way you can see better exactly what you are doing) and a larger size of the image is always useful to have. The first step was to create the background. A plain colour I prefer as in the end result any intricate background will not show successfully. The next layer was for the text/logo in this case just a simple ‘z’ in the same font as I use on my website.
You will notice that the English font use in my sites header is a thin font and when resized to 16×16, favicon size, the end result is not satisfactory. The font to be used for the purpose of a favicon must be bolder and more solid in order to be clearly visible in a browser when resized. The other font that I use on my website is Georgia, and when this was applied the end result was more pleasing and acceptable. However, still not totally the desired effect I was after.
Back to Photoshop. This time I changed the colour scheme around, light background, dark text. When resized it looks good in the browser. So now the next step is to save the resized 16×16 image as a favicon.ico which I can now do after having installed the photoshop plugin. The very last step is to save my work as a .psd for future reference.
Step 1 of the new look for zonicholas.com accomplished. Next step an apple touch icon. More to come…
