• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Tips and Tricks HQ

  • Home
  • Blog
  • Projects
    • All Projects
    • Simple WP Shopping Cart
    • WP Express Checkout Plugin
    • WP Download Monitor
    • WP Security and Firewall Plugin
    • WP eStore Plugin
    • WP Affiliate Platform
    • WP eMember
    • WP Lightbox Ultimate
    • WP Photo Seller
  • Products
    • All Products
    • Checkout
  • Support
    • Support Portal
    • Customer Only Forum
    • WP eStore Documentation
    • WP Affiliate Software Documentation
    • WP eMember Documentation
  • Contact

How to Create and Display Favicon to Make Your Site Stand Out in The Pile of Bookmarks

You are here: Home / Web Development / Blog Setup / How to Create and Display Favicon to Make Your Site Stand Out in The Pile of Bookmarks

Last updated: January 24, 2009





Favicons are a great way to make your site stand out from the crowd. It is also very easy to implement too. In this post I have explained how you can easily make a favicon and use it on your site.

What is Favicon?

Favicon is short for favorites icon. This is the icon that shows up on the left side of the browser’s address bar. Favicon is also known as bookmark icon, website icon, url icon or shortcut icon. Size of a favicon is 16×16 pixels.

favicon_icon_example3

How to Make a Favicon Easily in Photoshop

  1. In Photoshop open a new file (make sure the image size is 16 x 16 Pixels).
  2. Design your favicon. You can either start from scratch, use a picture, or a section of a picture.
    Note: The image size is rather small so I advise not to use a picture with a lot of graphic content.
  3. Save the favicon you created as ‘favicon.ico’ (you can save the image as .png or .jpg and then rename it to .ico)

You can even use MS Paint to make favicons too… all you have to make sure is that the image size is 16×16 pixels and the filename is ‘favicon.ico’.



How to Use Favicon on Your Site?

Adding a favicon to your site is really easy:

Method1

Upload the ‘favicon.ico’ file to the root of your webpage (‘public_html’ directory), eg. http://www.yoursite.com/favicon.ico and you are done.

Method2

In this method you will use a rel=”shortcut icon” tag to add the favicon to your site.

1. Upload the ‘favicon.ico’ file to the desired location on your web host.

2. In the <head> of your html add the following line of code:

[lang=’html’] [/lang]

For a wordpress blog just open the ‘Header.php’ file and add the following given you uploaded the ‘favicon.ico’ file to that location.

[lang=’html’]

Related Posts

  • How do I Start a Blog and Make Money Online?
  • How to Create WordPress blog posts and pages (Video Tutorial)
  • How to Install WordPress on Your Domain
  • Top 15 Search Engine Optimization (SEO) Techniques I Forget to Do

Blog Setup Blog Setup,  Web Development,  web masters,  Wordpress

Reader Interactions

Comments (7 responses)

  1. Noa Noa says:
    October 25, 2011 at 5:02 pm

    You don’t need Photoshop to create the ico file. Instead just go here – its free

    http://www.favicon.cc/

  2. Rapid Prototyping says:
    August 19, 2010 at 1:26 am

    I must admit that I am really not of an expert in photo shopping and I have had my own issues (not medical or anything like that) trying to learn it. But it seems that tips and tricks showed me exactly the way in order to get a favicon using the Adobe Photoshop. However I did have some issues at first but after some effort I got it right and now my website looks absolutely stunning and remarkable!

  3. Bluffy says:
    July 22, 2009 at 7:24 am

    Very well explained post thanks.
    very much needed by a newbie like me
    thanks

  4. lol money says:
    May 20, 2009 at 1:20 am

    Very informative post! Normally I don’t comment on blogs but this post deserves it 😀

  5. Jason says:
    April 22, 2009 at 2:27 am

    In searching for sites related to work from home and specifically online jobs, your site came up. 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Featured & Popular Articles

Video Answers to Top WordPress QuestionsWordPress Optimization Tips and Tricks for Better Performance and SpeedEssential WordPress Security Tips - Is Your Blog Protected?WordPress Simple PayPal Shopping Cart PluginTop 15 Search Engine Optimization (SEO) Techniques I Forget to DoList of the Best and Must Use WordPress PluginsHow do I Start a Blog and Make Money Online?Good Domain Name Picking Tips for Your Blog SetupFind Out Which WordPress Web Hosting Company Offers the Cheapest and Reliable Web Hosting Solution

Featured WordPress Plugins

wordpress estore plugin
wordpress membership plugin
WP Express Checkout Plugin
WordPress Lightbox Ultimate Plugin
WordPress photo seller plugin
wordpress affiliate plugin

Recent Posts

  • Accept Donations via PayPal from Your WordPress Site Easil [...]
  • Buy Now Button Graphics for eCommerce Websites [...]
  • Subscription Button Graphics for eCommerce Websites [...]
  • Adding PayPal Payment Buttons to Your WordPress Sidebar Ea [...]
  • PayPal QR Codes [...]

Comment & Socialize

  • @Rodrigo Souza, Thank you f ...
    - admin
  • The example for 'slm_add_ed ...
    - Rodrigo Souza
  • @Ron, All the valid transac ...
    - admin
  • Hello, when people have sel ...
    - Ron
  • We have hte following featu ...
    - admin

Check out our solutions

View our WordPress plugin collection and start using them on your site.

Our WordPress Solutions

Footer

Company

  • About
  • Privacy Policy
  • Terms and Conditions
  • Affiliate Login

Top WordPress Plugins

  • Simple Shopping Cart
  • PayPal Donations
  • WP Express Checkout
  • WP eStore
  • WP eMember

Blogging Tips

  • How to Start a Blog
  • Selecting a Good Domain
  • Cheap WP Hosting
  • WP Video Tutorials
  • Simple SEO Tips

Search


Keep In Touch

Copyright © 2023 | Tips and Tricks HQ