Blogger Tips and Design Portfolio from Lightway Web Services, Inc.
HomeBlogger TipsDesign TipsWeb HostingDomain Name RegistrationDesign PortfolioAbout This BlogContact

Wednesday, March 28, 2012

Creating a Favicon

On all web browsers, next to the website address, there is a spot for a small icon. Some websites will have custom icons, while others will have none.  These custom icons are known as favicon. They are used for display next to the web address, and will also be displayed in the bookmark listing with all browsers. This icon can be a nice "add-on" for any website.

Create Favicon


Steps for Creating a Favicon

1. To create a favicon, open up any graphics editor such as Macromedia Fireworks, Photoshop Elements, etc. Favicon icons are square and should have a resolution 16x16, 32x32 or 64x64 so the template you start with should be one of those sizes. Resolution can also be 128x128, but the file limit size for a favicon is 1MB.

2. Once the design is completed, the image will need to be saved as "favicon.ico".  The "ico" stands for the icon file type.  If the graphics program cannot save the image as an ICO image, save the file as either GIF or JPG. Once the file has been save, you will need to locate the file, and rename the file to "favicon.ico".

Rename Favicon to favicon.ico



3a. To use the custom favicon with Blogger, go to the Layout menu option, and there is a box at the top of the template labeled "Favicon". Click on "edit" and the pop-up window will open.  Click "Browse" and locate your icon image file that was just created. Click "Save" to save the icon file in the Blogger layout.

3b. To use the custom favicon with a custom website, the favicon.ico file will need to be uploaded to the root directory on the website's web server using an FTP program.

4. Your custom favicon should show up immediately in your browser window after you reload your blog or custom website. If it does not show up, try refreshing your browser's cache and that should do the trick.
Posted by Brian Kraft at 8:50 AM
Labels: BlogTips, DesignTips

No comments:

Post a Comment

Newer Post Older Post Home
Subscribe to: Post Comments (Atom)

Popular Posts

  • Custom Navigation Tabs for Blogger Menu
  • Using the "Float" Command in CSS
  • Adding the Facebook Social Plugin
  • Adjusting Blog Widths
  • Using a Custom Domain or Subdomain for Blogger address
  • Creating the Blog Header
  • Ever Care Pool and Spa
  • Creating a Favicon
  • Oxnard Lemon Company
  • Coastal California Blueberry Farms, LLC.

Facebook

Followers

Subscribe To Blog

Posts
Atom
Posts
Comments
Atom
Comments