Favicons – short term for “Favorite Icon” – is the small icon that appears near the browser URL, often showing a company’s logo or other images. For example, Google.com has a “g” as the favicon.
Most of the time, if you use WordPress or Joomla or other Content Management Systems, they will have a default favicon, not the one you may want to to use.
Using Photoshop or other photo editing software to create a favicon, which is usually of the size of 16x16px (or maximum 32x32px), may be often difficult. There are much easier way to do this without any photo editing software like Photoshop. I am going to show you an easier way to create a favicon for your blog or website.
Things You Need Before You Proceed
-
- An image of your website logo or whatever else you want to appear in the favicon. Square size image will be best for this purpose, for e.g. 100x100px (for example, for sarayoo.info, I have just the “S” as the favicon).
- Internet connection and a web browser with the facility to upload image
Creating Favicon Using Favicon.cc
There are various websites that offers free tools to create favicon. Favicon.cc is one of them and is a really easy way to create a favicon.
Step 1:
Type “favicon.cc” (without quotes) in your browser. Once the page is loaded, upload the image you created by clicking Import Image button
Step 2:
You will see your image appear in the frame. Make the changes you want. Note that each square you see in the frame is each pixel.
Step 3:
Download and save the favicon on your computer
Step 4:
Upload this favicon to your domain, directly in the web root folder (/public_html/favicon.ico)
Step 5:
Insert the following code to index.php inside the <head> </head> HTML tags
<link rel = “shortcut icon” href = “/favicon.ico” >
Step 6:
Test the favicon by typing www.yourdomain/favicon.ico
Creating Favicon Using Dynamic Drive Online Tool
Step 1:
Click on this link, once the page is loaded, upload the image you created by clicking Choose File button under “Image to create icon from:”
Step 2:
Click Create Icon button. This online tool will create your favicon and show you a sample of how it appears in the browser
Step 3:
Click Download Favicon button and save the favion on your computer
Step 4:
Upload this favicon to your domain, directly in the web root folder (/public_html/favicon.ico)
Step 5:
Insert the following code to index.php inside the <head> </head> HTML tags
<link rel = “shortcut icon” href = “/favicon.ico” >
Step 6:
Test the favicon by typing www.yourdomain/favicon.ico
Sometimes it may take a while for favicon to show up in the browser. You can clear your Internet History or Refresh the page to see if the changes are applied.
Do you find this information useful? Share it with your friends by on Facebook, Google+, Twitter or other Social Media. You can also follow me on Twitter @sarayoo.info or Google+ or Like me on my Facebook or on my LinkedIn for more updates, technology tips and tricks, iPhone, iPad, other iOS devices tips, iOS App Deals, Blogging tips, etc. Please leave your comments in the comment section or contact me if you have any other questions.