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.

Web Designs

Fundamentals of a WordPress Theme: Graphic Explanation

WordPress is getting more popular each day but also many people didn’t know how WordPress works in the inside and in this post you’ll see how easy a WordPress theme works. So for bloggers or for anyone who wants to design there own WordPress theme but have no idea how to basically start or don’t know what to do, this is a good start for you to read and see.

Below is graphic explanation of the fundamentals on how a WordPress theme works.

Fundamentals of a WordPress Theme - Graphic Explanation

Source: Yoast

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

Print & Graphic Designs Web Designs

Clients from the Weirderness – A collection of client funny weird stories from Designers


Client: ”Web designer seems like a sweet job.”

Me: ”Yeah, it’s great.”

Client: “You probably love it so much that you would do it even you didn’t get payed!”

Me: “Uhm…”

Client: ”Great! So I don’t have to pay you?”


Client: “This is everything we asked for but not what we wanted.”


Client: ”I decided I want one of the illustrations you already did for my logo and I am going to use it for the background on my checks.”

Me: ”A logo is usually a simple graphic used to represent your business, in your case, the book series and characters.  The illustrations are a bit too detailed for that purpose.  How about I simplify the characters and series title and create a logo?”

Client: ”Why can’t you just shrink the picture down to the size of the check?”

Me: ”The artwork is 12” square and proportionally will not work in a rectangle.”

Client: ”Wait, hold on… you know I don’t understand you when you use those technical terms.”

Me: ”By proportionally I mean…”

Client: ”No not that word, the other one you said.  It won’t work in a what?”

Me: ”Rectangle?”

Client: ”Yes.”

Me: ”Um, a rectangle is the shape of your checkbook.”

Client: ”Oh ok.”


Me: ”When you click on the button it takes you to the Paypal donation page that you set up.”

Client: “What do you mean? I don’t want the donate button to do this, I want it to automatically charge their card. These are seniors they won’t understand this if I don’t. You can’t have them type stuff in.”

Me: “But you wanted to go with Paypal because you couldn’t afford a secured shopping cart website. Either way, at some point they will have to type in their information.”

Client: ”Can’t you just take their credit card information without them knowing? That way they won’t get confused.”


Client: ”I would like to commission you to draw a cover for my bands first album, and it goes on sale in September.”

Me: ”Congratulations, so what would you like for the cover?”

Client: “Something midevily, like a dragon and a woman wizard fighting, but in the night sky, and there like fighting a dwarf in a mech suit, like a Gundam. And make the moon in the sky on fire. That would be cool.”

Me: ”That seems like it would be an eye sore to me…”

Client: ”No, this idea would reflect our music perfectly, we agreed, and it’ll deffinitely get people to buy our stuff.”

Me: ”So what kind of music do you guys do?”

Client: ”Country.”


Client: ”Your rates are too high!  I’ll do the design myself, and then you can do the implementation.”

Me: ”Okay, that’s fine, just send me the files when you’re finished.”

Client: ”Just one question- how many centimeters is a pixel?”


When designing a website for a client, the client initially expressed that he wanted to use Burgundy.

Client: This isn’t right. You know the color blood red?

Me: Yeah, I think I know what you’re talking about.

Client: Yeah, I love blood red. I want the logo to look like that. Do you know what it would look like if you took a paintbrush and dipped it in blood, and smeared it downwards? How the blood would be darkest in the center, and there would be splatters of blood and lighter shades of blood around it?

Me: You want a gradient?

Client: No, I want it to look like the blood of all our victims.

Me: I’m sorry, what?

Client: You know, from all the bugs we’ve terminated.

Me: Oh.


Client: We don’t need you to do our promotional campaigns anymore. We’ve just bought InDesign and someone’s coming in to do a two-hour workshop on how to use it. We’ll be able to handle all the design ourselves from now on. We might give you the odd phone call for a bit of advice here and there — you won’t mind will you?


Client: ”Can you make the ‘About Us’ link say ‘About Us – Everyone welcome’?”

Me: “Sure, but…why?”

Client: ”I’m afraid people might not know they’re allowed to click that link.  They might think it’s private. We need them to know it’s okay for them to go there.”

Me: ”But none of the links on your site are private. Why are you concerned with that specific one?”

Client: “Good point.  You’d better add ‘Everyone welcome’ to all the links on the site.”

[info]If you have some weird moments with your client/s to share please post it here.[/info]

Reference: [icon style=”link” color=”gray”]Clients from Hell[/icon]

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!

Web Designs

An All-in-One Media Player that can play HTML5, YouTube, Vimeo and Flash Media

Here’s an Open Source (GPLv3) All-in-One Media Player that is written in jQuery and can deliver ANY TYPE of Web Media. It can play HTML5, YouTube and Vimeo Videos and Flash Contents. WOW! So if you have too many different types of web media contents that you want for your user to have an access with all of them in one place, this player is definitely for you!

Open Standard Media (OSM) Player


  • 100% Open Source and 100% free!
  • Written in the popular jQuery framework.
  • Dynamic HTML5 content delivery.
  • Audio and Video support with the most popular media formats.
  • Automatic Flash fallback for non-standard media.
  • Easily themable using the incredible ThemeRoller system.
  • Seamless Vimeo and YouTube integration.
  • Playlist support
  • Player to Player communication.

Go directly to the project page. Click here.

This Media Player has just made our life easier! Thanks to Alethia Inc, they’re the ones who have developed this wonderful All-in-One Media Player.