The Garden Route » Favicon

Apple Touch Icon for Monkey Valley

Bianca Gubalke — Tue, 22 Nov 2011 15:59:11 +0000

Apple Touch Icon for Monkey Valley

And here’s my last touch: the Apple Touch Icon for Monkey Valley Resort – in synch with the branded monkey on a golden triangle. This is the big version to let you see some of the details…

Apple Touch Icon for Monkey Valley

The sizes we will need once we are ready to use the Apple Touch Icon for Monkey Valley Resort will be 116 px and 57 px versions – as per the two pictures you see below. Obviously, I have them without the typical “Apple shadow” and that’s what we would load later… but here we get a good idea of how it would display.

What counts is that even at that small size, 57 x 57 px, it’s recognizeable. I know it works as I have designed the favicon (that’s 16 x 16 px…) and even at that minute dimension one can recognize it in the browser bar.

Icon Design

So here we have perfect synergy: you will see this exact sculpture in bronze when arriving at Monkey Valley Resort in Noordhoek, South Africa… nestled on the slopes of a steep and triangular Chapman’s Peak rising high above it… in the real world so to speak – you can’t miss it!

For me as an artist and web designer it was just obvious and logic to create an online version based on these immediate impressions. It was quite an evolution… as Logo and Icon Design always are! In the end, simplicity wins!

How to create a Favicon with Photoshop

Yorgo Nestoridis — Wed, 09 Mar 2011 12:40:12 +0000

Create .ICO Files (Favicons) with Photoshop

The favicon or icon is part of the customization of a website. The favicons show namely in the browser tabs. Nowadays most browsers will also show .gif and .png icons; the .ico format is preferred by Internet Explorer.

A quick and easy way to create a Favicon is by using the online tool put at disposal by favicon.com. A better result can be achieved by editing the favicon in Photoshop; however Photoshop does not support the .ICO format in its native version. A plug-in can remedy.

Download and install the Plug-in

To start with, download the free Plug-in from Telegraphics.

Paste the plug-in file (ICOFormat.8bi, or ICOFormat64.8bi for the 64 bit version) in your Photoshop: …Program Files/Adobe/Photoshop/Plug-ins/File Formats.

re-start Photoshop.

Parameters you must respect

The .ico file format will only be available in Photoshop if you respect the following:

Maximum file size 256 x 256 pixels
RGB, Bitmap, gray-scale or Indexed mode
Maximum 8 bits per channel

To save an image as .ico, use “save as” and select from the drop-down the ICO format.

How to Create an Icon or Favicon in Photoshop

Favicons are small icons, very small icons, since they measure only 16 x 16 pixels. Designing an Icon is a challenge since its display should be meaningful. To work more comfortably with your photoshop, start your design with a larger square canvas, a multiple of 16 pixels, for example 64 pixels, 128px or 256 pixels.

For the purpose of this exercise I will use a 128 px x 128 px canvas with the following presets:

You may save these settings as Preset for further use.

Best results are achieved if you keep your design simple and rich in contrast.

1. Open a new file with the above presets:

2. Fill with your background color (or pattern)

3. Add content

Best result with vector graphics, custom shapes, good fonts and such likes; just create a new layer and add …

4. Resize

Resize to 16px x 16px and resample selecting ‘Bicubic Sharper’:

We get now:

5. Save as .ICO

Now “Save as” (don’t use “Save for Web and Devices”) and select the ICO format. Rename the image to favicon.ico:

6. Embed your new Favicon

Most browsers will find your favicon.ico automatically if you just load it into your website’s root folder (where the index.html is located), others are looking for a direct link to the favicon. To help these last browsers just add the following lines to your header (between the … tags):

Load your favicon to the root folder of your domain and make sure it’s called ‘favicon.ico’.

That’s it.

Create a Favicon with Photoshop

Yorgo Nestoridis — Mon, 15 Feb 2010 14:30:58 +0000

[ hide ]

Create a Favicon with Photoshop

While you are working on your image or brand, you may want to create your custom favicon which will display in your visitors browser tabs as a small image.

Here is how to create your favicon.

Create your Favicon

Before you start, you need to add a plug-in to your Photoshop to allow saving your image in .ico format.

1. Download the plug-in from here.

2. Unzip and extract the files.

3. Load the file ICOFormat.8bi into your Photoshop plug-ins folder. (This is typically in drive C under Programm Files – Adobe – Photoshop CS4 – Plug-ins)

4. Fire up your Photoshop and create a new image with size 64×64 pixels (the icon will be saved as 16×16 pixels but it’s easier to create on a bigger format).

Favicon Design 64×64

Favicon Design 64x64

Favicon Icon 16×16

Favicon Icon 16x16

When resizing the image from 64 pixels to 16 pixels, resample the image with ‘Bicubic Sharper’.

5. ‘Save as’ and select the .ico format.

6. Place the image as ‘favicon.ico’ into the root folder of your domain and add the link to the header script of your site.

Done.

Join our call tonight at YorgoTalk for further tips.

Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics.

If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.

This page is wiki editable click here to edit this page.

The Garden Route » Favicon

Apple Touch Icon for Monkey Valley

Apple Touch Icon for Monkey Valley

Apple Touch Icon for Monkey Valley

Icon Design

How to create a Favicon with Photoshop

Create .ICO Files (Favicons) with Photoshop

Download and install the Plug-in

Parameters you must respect

How to Create an Icon or Favicon in Photoshop

Create a Favicon with Photoshop

Contents

Create your Favicon