Tutorials Web Designs

How to Create your Own Customized Favicon using Photoshop

Before we begin, I’ll tell you first the origin of the favicon…

What is a Favicon?

A favicon or also known as “Favorites Icon” is a small graphic that is associated with a web page or a whole website. Sometimes favicon is also known as a shortcut icon, website icon, URL icon or a bookmark icon. It is normally sized at 16×16, 32×32 or 64×64 pixel square icon. Most site favicons are designed as a small rendition of their logo or other branding mechanism. They are seen on tab bars, bookmarks or favorites menu/manager or even on your RSS feeds like Google Reader and others.

Origin of Favicon

Favicon was first developed in Internet Explorer or IE browsers, where-in they call bookmarked websites as favorites and favicon was the icon that was displayed in the favorites menu.

Example of a Favicon Image

Favicon from popular websites

Favicon of Google, Bing, Yahoo, Microsoft, Apple and Amazon

How to create your own customized favorites icon?

Here’s a step-by-step guide on how you’ll create your own favicon using Adobe Photoshop.

1.) Create a blank pixel square icon image (Ex. 64 x 64 pixels)

  • Open Adobe Photoshop
  • Go to File » New or press Ctrl + N
  • Change Preset to Web
  • Set the Width and Height to 64 pixels
  • Then click OK

2.) Create your desired design

  • Use your logo or any branding you think that may best describe your content or website like what I did to mine.
  • Example design: (derived from my logo)

3.) When done with the design, Save it as a .ICO, .PNG or .GIF (Just choose one)

Note: When saving, internet browsers only accept three types of file. The .ICO is the format compatible with all browsers from old to new. Next to that are the .PNG and .GIF formats but sometimes it has compatibility issue with older browsers especially with Internet Explorer or IE Browsers.

  • To save as .ICO
    • First you need to download the ICO (Windows Icon) file format plugin for Photoshop
      – Download ICO File Format Plugin for Photoshop by
      – Instructions on How to Install
    • After installing, you need to close your Photoshop application, then open it again for it to take effect and for the option on saving .ICO format would appear on the Save As menu
    • After restarting Photoshop, open your favicon design file
    • Go to File » Save As and then change Format to “ICO (Windows Icon) (*.ICO;*.CUR)
    • Then locate where you want to save it
    • File Name should be favicon.ico
    • Press Save
  • To save as .PNG
    • Go to File » Save for Web & Devices
    • Set Preset to PNG-24
    • Press Save
    • Locate where you want to save it
    • File Name should be favicon.png
    • Press Save again
  • To save as .GIF
    • Go to File » Save for Web & Devices
    • Set Preset to GIF 128 Dithered
    • Press Save
    • Locate where you want to save it
    • File Name should be favicon.gif
    • Press Save again

4.) Setup favicon on your webpage or website

Note: There are two ways you can setup your favicon to display on your website/webpage, Globally or Per Page.

Globally – Would only need to set it once and your favicon will be displayed across all your webpages.

Per Page – Would need to be declared per page but the advantage of this is that you can customize your favicon on a per page basis.

  • Setting your Favicon Globally (For .ICO format only.)
    • Upload your favicon.ico via FTP to the root directory
      – Depends on your web hosting, but these are the common root directory public_html or www folder
      – Once uploaded, your favicon will be shown across all your web pages
  • Setting your Favicon Per Page (For .ICO, .PNG and .GIF formats.)
    • Upload your favicon to your desired location
      – You can put it anywhere you like, for example under /images folder or anywhere you want
    • Put these codes inside <head> </head>
      – You’ll only need to follow one example depends with file format you chose

Example .ICO format (favicon.ico was uploaded under /images folder)
– Cross browser compatible; Internet Explorer, Chrome, Firefox, Safari, Opera and other Internet Browsers


<link rel=”shortcut icon” href=”http://www.yourdomain/images/favicon.ico” />



Example .PNG format (favicon.png was uploaded under /images folder)
– Not supported on Internet Explorer or IE Browsers



<link rel=”icon” type=”image/png” href=”” />



Example .GIF format (favicon.gif was uploaded under /images folder)
– Not supported on Internet Explorer or IE Browsers



<link rel=”icon” type=”image/gif” href=”” />



You can use both ways, Globally and Per Page especially if you want your other web pages or sub-directories to have a different favicon than the one used globally.

Before reloading your page, clear your browser cache for you to see your new customized favicon.


If you have questions feel free to ask or comment below.

Tutorials Web Designs

A new way of creating websites for iPad

With the launch of iPad, website developers are now facing a number of complex problems that are intimately associated with the layout of a website. However, you need to have a fair level of authority on CSS if you wish to ride past these trivial issues easily. This is the reason why not every experienced web developer is up against arms against iPad. Actually managing CSS3 is not much of a challenge unless you are a novice in this field. However, the platform is certainly new and therefore, you need to tread on cautiously.

There are a number of issues that you need to give utmost attention and some of them are described in details below:

iPad Safari
iPad Portrait and Landscape view using Safari

Hover Effect and Links

As you all know, iPad comes with touch screen and therefore, it is quite clear that you need to employ a different technique this time around. You need to be a little particular while placing images in a website. Try to avoid text links rather; you should use large images, as it will add to the tactile nature of iPad, which will in turn make your website all the more interesting and engaging. But you should not try the old hover technique with the CSS3 because it will not have the same magical effect on iPad. You should not forget the fact that jQuery is not ideal for i-devices.

Use of Some CSS Properties

You can give a fresh look to your website by using these properties:

”Position: fixed”: This property will not work in Mobile Safari but still it is good enough to jazz the appearance of your website in iPad. By using this property, you will be able to position things more efficiently and effectively.

Think About Orientation

iPad gets accolades from varies sources for its amazing landscape and portrait modes but they are not CSS friendly at all. Therefore, it is quite evident that you need to do something proactively to make your website look equally good in iPad in any of these modes. The only way, you will be able to deal with this intricate issue is by creating two different CSS files : portrait.css and landscape.css . This is what you have to do:

<link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”>
<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”>”

Do not Use Frame

You should not put your online reputation at stake by developing your website in frame. Frame will come with a number of issues that includes content overflow, unruly webpage etc.

As iPad web development is relatively a newfound area of work, you might face a number of issues that you have not experienced before. Therefore, you need to be prepared to face new challenges.

Source: Quality Web Programming

The Web Tutorials

5 steps on how to make your video searchable on Google

A short video by Nelson Lee, Product Manager at Google on How you can set you video to get searched at Google. Since many are uploading videos everyday it’s really hard to compete but with the right steps and info, you can be sure that you’re video will come up soon on Google’s Search Engine.

This is a recap on what’s on the video:

If you want your video to be searchable on Google, you need to create a Video Sitemap

Here are the 5 easy steps on creating a Video Sitemap…
  1. Title
  2. Brief Description of your Video (must be a relevant description of your video)
  3. Play page URL (where direct users can play and watch the video)
  4. Thumbnail URL (a small image or a preview of the video)
  5. Raw video file location (the link where the video is stored)

So once you have this info ready sign-in or sign-up to Google Web Master Tools.

Submitting a Video Sitemap means Google can better discover your videos and make them easy to find in search results.

To learn more about Video Sitemaps, visit

Happy Learning!

The Web Tutorials

Free Alternative Project Management System to Basecamp using Joomla and ProjectFork

Basecamp ushered in an era of simplistic, no-frills project management brought on by saturation of complicated project management software like Microsoft Project. Since then, many SaaS (Software-as-a-Service) project managers popped up in competition with Basecamp and it’s model.

Another era began roughly around the same time. The era of Open-Source CMS software such as Joomla! and mass adoption by large and small businesses alike. More and more business are moving to Joomla! for its low associated cost and access to many powerful extensions. One such Joomla! extension is Projectfork, a free Open-Source project management solution.

Who can use Projectfork?

Since Projectfork is Open-Source and users are free to modify the code and language, any type of company can use Projectfork and customize the experience for their customers and employees. Projectfork is perfect for web design firms, software development companies, real estate companies, retail stores, and just about any company needing simple project management and time tracking.
Projectfork is even being used on an internal site from!

Projectfork Highlights

Project Manager Features:
Projectfork has all the features that have become standards in project management software such as Projects, Milestones, Tasks, Time Tracking, Calendar, Message Board, File Manager, User Profiles, and User Groups.

No Limitations:
One of the biggest advantages of hosting your own project manager is the fact that your server space is the only limitation on files and also that you have full access to data and aren’t limited in any way by the number of users, projects, etc.

Custom Access Levels:
Projectfork gives you the option of using permissions based on Joomla’s core users groups (Public, Registered, Author, Editor, Publisher, Manager, Administrator and Super Administrator), but you’ll probably want to dig into User Groups for creating custom access and permissions for groups of users you create.

Joomla! Integration:
Already have your users in Joomla? Want VirtueMart shoppers to easily be added to projects? How about JomSocial users being able to see their project activity in their social profile? This is all possible since Projectfork is a Joomla! component.

It’s Completely Free!:
The main Projectfork component is completely free to use and modify under the GPL Open-Source license.

Projectfork Requirements

Let’s answer a few questions to figure out how we’ll need to setup Projectfork

How will I be using a project manager?:
I own a web design firm and will be creating different projects for each different job I get.

What types of people will be accessing it?:
I want to retain global control over everything. I will add a project manager from my company that can do anything for a particular project. I will then add contractors that will have a good bit of access, but won’t be managers. Lastly, I will add stakeholders from the client company that have limited access.

What will these people be doing?:
The project manager will be adding contractors and clients, and have the ability to add,edit and delete anything. The contractors will be able to upload and delete files, complete tasks and communicate with the clients. The clients will only be able to view and comment on everything, as well as upload files, but not delete them.

Will this project manager appear to be an intranet or integrated into a site?:
I’d like for the project managers to appear stand-alone, as an intranet. All users except myself will login directly into the intranet and not see the normal site. I’ll also want to check in on progress from my iPhone.

Extending Projectfork

Projectfork comes with a complete extendable framework much like Joomla’s, with themes and extensions.

Projectfork Themes & Extensions »
There are a bunch of official Projectfork themes and extensions available on

AThomp Technologies »
Projectfork 3rd party developers are starting to pop up. AThomp Tech offers some very cool extensions.

For my Design Firm Project Manager I’ve selected the following:

Projectfork Component »
The main project management component that comes with most of the features I need out of the box. The Projectfork core component is completely free and GPL licensed.

Carbon »
Premium theme: A slick theme that transforms Projectfork into a tactile User Interface in the web browser or on the iPhone.

Activity Stream »
Premium extension: An updated list of activity from project members across all areas of Projectfork. This activity stream can also feed into Community Builder or JomSocial via plugins.

Status »
Premium extension: A way to update your status and view your team’s status. The status is also fed into the Activity Stream.

TIP: You can grab all the premium Projectfork themes and extensions in the Projectfork Bundle, which is currently 99 bucks for 1 year of access and new releases.

Setting Up and installing My Intranet

Joomla! CMS
Joomla! is required. Projectfork currently supports version Joomla! 1.5, and 1.6 support is in the works.

Projectfork installs via Joomla’s normal installer, then goes through an automated setup process upon first visit. I can choose whether to install sample data or not, I’m going to do a clean install this time.

Projectfork Installation Screenshot

Projectfork Themes & Extensions
Projectfork has its own installer for themes and extensions after that point. Each extension type has its own Config page, from which extensions are installed and enabled.

Creating a Project with Projectfork

Now to the fun part. We’ll go through all the different steps in setting up my project workspace.

Create a Project
Creating a project is simple. All that’s required is a project title, but I can also add a description, deadline, choose whether the project is public and if people can request to join (I’ll leave both turned off), upload a company logo, and even add members to the project (I’ll do this in the next step though).

Select Project Workspace
IMPORTANT: To add users to a project, create groups, tasks, or any project related info you must have a project selected in the Project Workspace dropdown

Add or Import Users
I can either add completely new users to my Joomla! installation or import users that are already in the system. My clients are new, so I’ll need to add them. My project managers and contractors have worked for me before, so I’ll import them.

Adding Custom User Groups & Permissions
Now for the real power of Projectfork. Custom ACL:
I don’t want my clients, contractors, or project managers accessing any other part of my Joomla! site, so I want to keep them all as regular Registered users in Joomla! To give them specific permissions in Projectfork I’ll create 3 User Groups for them. When creating a new group, I just check the different sections and then the privileges the group gets. I can also add members to groups at this point.

1. Project Managers: I want this group to be able to do everything, so for each section I use the hand ‘Select All’ checkbox. I then add my 1 project manager user.

2. Contractors: Contractors get lots of privileges, but not all, so I check off all the things I want them to be able to do like ‘Upload Files’ and ‘Edit Files’. I have 2 contractors so I add them now.

Projectfork Installation Screenshot 2

3. Clients: I only want my clients to be able to view information, download things and comment, so I check off permission like ‘Download files’ and ‘Write comments’

Add Project Information
Now that I’m all setup, I can go through each section and add Milestones, Tasks, Files, Events, etc.

Menu Link
For Projectfork to be visible from the public frontend of Joomla!, a menu item must be added, linking to Projectfork. You can name the menu item anything, I’ve named mine “Project Manager”.

Projectfork Installation Screenshot 2

Hide Joomla! Template
Found in the Config, this option hides the surrounding Joomla! template for all Projectfork pages, thus giving it the fullscreen appearance of an intranet. This option only works on the public frontend.

Projectfork Hide joomla

TIP: Insert a Joomla login module into Projectfork
Since I’m hiding the Joomla! template, I need a way for my project members to login. Conveniently, I can use any Joomla! module inside Projectfork by editing the desired module (like mod_login) and changing the position to a panel position inside my Projectfork theme (typically pf_theme_sidebar or pf_controlpanel_left)

Here’s the final outcome:

Projectfork Final

Projectfork Alternate Setup

If I had chosen to display Projectfork within my site, I’d have used the Default theme it comes with, and not have chosen the ‘Hide Joomla template’ option. With Joomla’s default template it would have looked like this:

Projectfork Final


Many of those same users that were attracted to the simple features of Basecamp and the ease of launching an implementation are now frustrated with the rising monthly costs, limitation of features and lack of access to the data. In this respect Projectfork has become more useful for many previous Basecamp users.

Suddenly companies with limited budgets and the need for custom feature sets can obtain a rich, interactive website with Joomla! and an equally powerful project manager with Projectfork. Even if you aren’t currently using Joomla! for you website, you can validate giving it a try entirely for Projectfork to create a Do-it-yourself project manager.

Source: SpeckyBoy

Out of Nowhere Tutorials

Turning your Hoodie into a Laptop Bag

This is a very nice and creative way on how you’ll can make your hoodie/sweater into a laptop bag.

Source: The Trendy Girl

Technology Tutorials

How to automatically shutdown your PC using the Command Prompt

Many of us, have already experienced this, that we had to leave our computers but there are some running programs or task that still need to run and finish, maybe its your Anti-Virus running, you’re Downloading something or Defragmenting or any task your doing with PC wherein you can’t just leave the computer running all day while you’re out so you have to wait for that task or program to finish, or maybe some of us will just leave the computer running all day, even if you already know that the program or task that you’re running we’ll be done in an hour… and that sucks. Too much electricity was wasted.

Though many 3rd Party Programs offer scheduled shutdowns but not all, what i’ll be teaching here is how to automatically set your computer to shutdown without using any 3rd Party Programs, you’ll just need Windows Command Prompt (every Windows PC has it) and your set to go.

1. Accessing the Command Prompt:

Running the Command Prompt from Start Search
Running the Command Prompt from Start Search

There are many ways to access the Command Prompt so for those who don’t know how to access it, here are some ways you can do to open the Command Prompt.

  • You open the command prompt by going to Start Menu > All Programs > Accessories and there just look for the Command Prompt below Accessories.
  • Another option is to open Run… and then type cmd, press Enter, then the Command Prompt we’ll open.
  • Last option is to run it from the Start Search (Only Vista and Windows 7 has it) just type on the Start Search, cmd then press Enter and you’ll see the Command Prompt running in no time. (This is my usual technique in accessing almost every program i want to run.)

2. What to Type on the Command Prompt?

  • Type shutdown /t number-in-seconds /s
  • the number-in-seconds will be replaced on how long you want the shutdown to take place, but you have to convert it in seconds. so if you want to 1 Hour before the automatic or scheduled shutdown takes place you have to replace in the number-in-seconds, 3600
  • Since 3600 / 60 = 60 and 1 minute = 60 seconds that’s why 3600
  • So for 30 minutes = 1800
  • 2 hours = 7200, 3 hours = 10800 and so on and so fourth (I hope you already understand it)
  • To have a better view i’ve attached a Screenshot, wherein it shows that i want my computer to shutdown in 10 minutes so i replaced the number-in-seconds to 600, since there are 600 seconds in 10 minutes.
Shutting down your PC automatically using the Command Prompt
Shutting down your PC automatically using the Command Prompt

After entering the values on the Command Prompt, a System Prompt will show saying that your computer will shutdown in whatever values you have set in there. Just like on the Screenshot above.

Please be aware that once it is activated it can’t be changed or turned off unless you manually restart your PC or Shut it down, then everything that you’ve have set will be gone and be back to normal.

Tutorials Web Designs

CSS 2 & 3 Cheat Sheets – Making Designer’s Life Easy

For Web Designers & some Developers, having a Cheat Sheet a really big help and what we have here is a very good-looking and easy to navigate CSS Cheat Sheet. You can print it and put it on you wall JPG & PDF downloads are available below.

[image size=”medium” align=”right” lightbox=”true” icon=”zoom”][/image]

JPG Format

PDF Format

Created by GoSquared and here’s some insights from the makers of how they have come up of this cool cheat sheet.

“We created the original CSS Help Sheet because we spent ages staring at ugly cheat sheets while designing beautiful sites. So we thought we’d make a Help Sheet that didn’t hurt the eyes of anyone who tried to use it. The past year, we’ve found ourselves using more and more CSS3 methods, and there was never much in the way of help out there until we decided to create a Help Sheet specifically for CSS3.

We’ve kept CSS2 and CSS3 on separate Help Sheets for now as not everything in CSS3 is finalised, or works in all browsers (cough, IE).

We hope you enjoy using them, and that they help you create even more memorable, usable, and stylish websites.”

Thank you GoSquared for this wonderful Cheat Sheet!

The Web Tutorials

Ways on examing Short URLs before visiting them

Nowadays, ever since Twitter and other social networking sites become popular and with some of them has a limit on how you can Tweet or post a message, Shortening URLs have became the solutions for your link to fit on your post. But with this rampantly used you can never know what’s the real URL of the link you are clicking to since it has been shortened already unless you go to the link first and see it for yourself, where in sometimes it only leads you to anything not related or worse that it might lead you on downloading a Virus, Spyware or Adware. So beware before clicking to those shortened URLs.

Sample of Shortened URLs:

All of these links are links to my other articles on my blog. So all links are safe 🙂


So the solution is to expand the URL first before visiting them. Here are a couple of websites that offers those services and don’t worry since it FREE! All you have to do is copy and paste the link on the text box provided and press expand and you’ll see what’s the real link and a small screen shot of the website you want to visit.

Sample Shortened link I’ll be using on my examples below: (A link to

You might want to test this shortened link or my other samples given to see how it works.

SCREENSHOTS: Screen Screen Shot

So if you want to browse with confidence and security you should use these sites