RightNow Web Design » web server http://rightnowwebdesign.com/blog Our Clients Finish First Wed, 15 Feb 2012 16:33:47 +0000 en hourly 1 http://wordpress.org/?v=3.1 5 Steps to Your Very Own Favicon http://rightnowwebdesign.com/blog/graphics/5-steps-to-your-very-own-favicon/ http://rightnowwebdesign.com/blog/graphics/5-steps-to-your-very-own-favicon/#comments Tue, 20 Dec 2011 08:42:20 +0000 admin http://rightnowwebdesign.com/index.php?option=com_wordpress&p=30&Itemid=7 Continue reading →]]> What is a Favicon?
A favicon also known as a favorite icon is a very small icon attached to a website. Often times a websites favicon is represented by their logo. Favicons are most widely accepted in the ico format. However, some web browsers will accept png, gif and jpg formats as well. At present Firefox and Opera accepts these additional formats.

Now that we’ve covered some basic information let’s get right into creating one for your website!

Tools You’ll Need

Image Editing Software

  • Photoshop (Paid)
  • Gimp (Free)
  • Paint Shop Pro (Paid)

Icon Editor

  • IcoFX (Free)
  • InFran View (Free)

Your Logo!

 

Step 1:

Open up your logo in one of the image editing programs. Edit the logo to your liking. Be sure to be aware of the detail you choose to use because the maximum size for your favicon is 16 X 16 and no more than 1046 bytes. You can use up to 256 colors. However, this is not recommended due to the maximum size allowed for your favicon.

Step 2:

Resize your new logo to 16 x 16 pixels in a jpg or gif format. This may also be a good time to name it ‚Favicon.

Step 3:

Open your saved image in one of the icon editor programs. Ensure that visually it meets your expectation. Now save the image with the ‚.Windows Icon‚format. Your favicon should now be saved as favicon.

Step 4:

Upload your new favicon to your web server. Most people upload to the root of their site. You can also choose to save it in a folder on your web server. Make note of where you saved your favicon.

Step 5:

Now you need to add a bit of code to each of your web pages to ensure your favicon shows up. If you use a main template for your website you only need to add it there. Here is the code you need to add. Take note to include the full path in the ‚portion of the code if you uploaded your favicon to a folder on your web server.

*If you uploaded to the root of your web server:

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

*If you’ve uploaded to a folder on your web server:

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

WALLA – You know have a favicon for your website!

]]> http://rightnowwebdesign.com/blog/graphics/5-steps-to-your-very-own-favicon/feed/ 0