NicholasPyers.com

The Home of Nicholas Pyers

  • Home
  • About
    • Reprints
    • Comments and Feedback on Nicholas’ Articles
  • Other
    • Twenty Mac Years
    • Thirty Apple Years
    • Tried Bolo Yet? You Should!
    • User Group Resources by Nicholas Pyers
  • Links

Adding a “Favicon” to your website

Posted by nicholas on March 30, 2003
Posted in: Articles.

Favicon for Apple Computer Australia

Favicon for Apple Computer Australia

With the introduction of Apple new web browser for Mac OS X, Safari, many Macintosh users are for the first time seeing various little icons appearing next to website names in the Address bar while browsing the internet.

There is nothing special or magical about this icon, it is a feature that has been around for a while on PC based web browsers, but unfortunately most Macintosh web browsers haven’t supported this feature until now.

However, anybody can add such an icon to their own website, regardless of the web browser you use to view it.

All that is required for you to add an icon to your own web site is to create a graphic file that conforms to certain specifications, basically creating a Windows Icon (.ico) file called favicon.ico and uploading it to the main directory of your website.

On a Mac the simplest application to create a Windows Icon file with is GraphicConverter, as it has built in support for the .ICO format and that is what we’ll use for this tutorial.

get graphicconverter »

Users of Adobe Photoshop or Photoshop Elements can also create .ICO files, but will need to get a plug-in from Telegraphics to save a .ICO file.

get photoshop plug-in »

ICO files can be found in a number of formats, but the recommended format for use with a website is a 16×16 pixel graphic in 256 colours. However, any of the supported ICO formats will work and which one you use will depend on how your graphic ends looking – I personally use a 64×64, 16 colour icon on NicholasPyers.com and it works fine.

Favicon for NicholasPyers.com

Favicon for NicholasPyers.com

Converting an Existing Graphic

If you have an existing graphic you wish to use, open it up in GraphicConverter.

Then from the “Picture” Menu, select “Size”. Now set both the “Width” and “Height” to 64 pixels. It is also very important that you untick the “Keep Proportions” option. Once this is done, click OK.

GraphicConverter's Size/Scale options

GraphicConverter’s Size/Scale options

Then again, go to the “Picture” Menu but this time choose “Color” and select “Change to 16 Colors (4-Bit).

GraphicConverter's Color Menu

GraphicConverter’s Color Menu

You are now ready to save the graphic as .ICO file.

Creating a New Graphic

If you want to create a new graphic, the simply select the “File” menu and choose “New”. Then set the “Width” and “Height” to 64 pixels and the “Depth to 256 Colors (8-Bit)” and click “New”.

Once the design is completed, you are ready to save the .ICO file.

GraphicConverter's New Image dialog

GraphicConverter’s New Image dialog

Saving the ICO file

Once the design or conversion is done, you need the save the image as a Windows Icon (.ico) file.

Simply go to the “File” menu and select “Save As…”

GraphicConverter's Save As dialog

GraphicConverter’s Save As dialog

Give the image the name of “favicon.ico” in the “Save As” box. Where you save it is up to you, but the Desktop will do for now.

If the “Set Format from Extension” option is ticked, then the “Format” should already be set to “Windows Icon (*.ICO)”. If not, select the “Format” pop-up and select “Windows Icon (*.ICO)”.

GraphicConverter's File Types

GraphicConverter’s File Types

Make sure the “Save web ready (without resources)” option is ticked. To be honest it doesn’t matter that much, but it will make the file smaller (which is good for the web), but you won’t get a nice preview icon in the Finder.

Now, you can click on “Save” and if all went well, the file was saved to your Desktop and you are now ready to upload it to your web server.

If you didn’t set the “Height”, “Width” or “Colours” correctly, then you get an error message. Go back to the Converting Existing Image section and double check everything.

Error saving an ICO file

Error saving an ICO file

Uploading the Image

How you actually upload the image to your web server will depend entirely on how you normally upload your web pages and images. I personally use an email based system, Produced by Nemostar, but most people will use an FTP client such as Transmit or Anarchie or the built-in options included in web design packages like Adobe GoLive or Macromedia Dreamweaver.

nemostar »

However, you upload the image the main thing to get right is the location of the file. That is simply in the root directory of your website, not in a sub-directory.

In 99% of cases, this is sufficient for most web browsers that support the favicon.ico protocol to display it, but occasionally you may need to add a small piece of code to the header in each of your web pages for it to work.

< link rel="SHORTCUT ICON" href="/favicon.ico" >

If you add this code, then upload your modified pages to the web server and you are done.

Now go and test it all out by opening up your page(s) in a web browser that supports favicon.ico. On the Macintosh this includes Apple’s own Safari and the Mozilla based Chimera. Unfortunately current versions of Internet Explorer nor Netscape appear to support it.

Favicon for AUSOM

Favicon for AUSOM

Credits

A copy of this article, with colour images, is available from my website, https://www.nicholaspyers.com.

Interested in reprinting this article? Any non-profit Apple Macintosh User Group (MUG) may re-print, free of charge, any of the articles written by Nicholas Pyers found at https://www.nicholaspyers.com/articles. There are just a couple of conditions, which basically boil down to letting us know – for the full terms and conditions, please visit https://www.nicholaspyers.com/reprints.

Share this:

  • Click to email a link to a friend (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • More
  • Click to print (Opens in new window)
  • Click to share on Tumblr (Opens in new window)
  • Click to share on WhatsApp (Opens in new window)
  • Click to share on Pocket (Opens in new window)
  • Click to share on Pinterest (Opens in new window)
  • Click to share on Skype (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Reddit (Opens in new window)
  • Click to share on Telegram (Opens in new window)

Like this:

Like Loading...

Related

Posts navigation

← Nicholas on 774 ABC Radio
Mike’s Cards →
  • Categories

  • Archives

  • Remember These Posts

    Macworld Expo - San Francisco 2000

    Video for iPods

    Mike's Cards

    Apple Influences

    Disc Stakka

Proudly powered by WordPress Theme: Parament by Automattic.
 

Loading Comments...
 

    %d bloggers like this: