A Favicon is a small square icon associated with a website or a web page. In a browser, it is typically displayed before a web page’s address in the address bar and also before the name of the web page in the list of bookmarks, if you add it your Favorites. So “Favorites Icon” is where the name Favicon comes from. Browsers that have tabbed document interface show a page’s favicon next to the page’s title on the tab as well.

How to create a favicon and Why should you use one

By a small square icon, I mean that a favicon is a really small icon measuring 16×16 pixels. You can also create a 32×32 pixels or 64×64 pixels icon. Creating a larger favicon is only useful if user opens up a folder that is set to display large icons. In all other cases, your Favicon will be scaled down to 16×16 pixels to be displayed in the tabs, favorites menu or the address bar.

Why Should You Use a Favicon?

At CSSJockey, making your web presence outstanding is a key point that is always on our mind. One of the ways to make your website stand out from other pages on the WWW is to use a Favicon that represents your website if it’s opened in a browser or saved in someone’s list of bookmarks. You probably know how cluttered can a person’s list of bookmarks or favorites can be. Having a graphic identity in the form of a Favicon is a great way to catch attention.

In this post, we’ll see how to create a Favicon.ICO file in 2 easy ways:

Create a Favicon.ICO using Photoshop

You can create your Favicon offline using Photoshop. This requires that you add a plugin to your Photoshop that allows it to open and save .ICO files. You can download the .ICO Format plugin for Photoshop from Telegraphics. Extract the contents of the .ZIP file and place the “ICOFormat.8BI” file into \Plug-ins\File Formats directory inside the Adobe Photoshop folder where it is installed.

The plugin reads and writes ICO files in 1, 4 and 8-bit Indexed and 24-bit RGB modes, and also reads and writes 32-bit “XP” icons (with 8-bit alpha channel).

Now we can start with a new 16 x 16 pixels canvas but since its  a very small area it can be a little hard to work with. Instead, we can start with a 64 x 64 canvas (because if you plan to re-size an image later, it’s always good to use even multiples of the original dimensions.)

If you already have a logo, try scaling it down to this canvas size. It’s well and good if it holds.. and you can use it. But if it doesn’t look good and crisp, try creating a simple design that uses colors from your website’s design.

When you’re ready with your Favicon design, Select Image>Image Size menu and enter 16 x 16. NOTE: CS versions of Photoshop will have an option called “resample image” – If you’re using a CS version of Photoshop – Check the Resample Image option and choose “Bicubic Sharper” from the drop-down menu. This technique is for optimizing reduction transformation.

Save your image from the File > Save menu, enter a suitable name and select ICO (Windows Icon) .ico from the Format drop down menu.

Create a Favicon.ico from images in other formats using Online Favicon Generators

If you have your website’s logo or an image that you’d want to use as your Favicon in formats other than .ICO such as PNG, GIF, JPEG, etc. you can still Create a Favicon from those using Free Favicon Generators available online.  Here are a few nifty Favicon generators that I have seen around the internet:

1. Dynamic Drive FavIcon Generator

This FavIcon generator supports GIF, JPG, PNG, and BMP formats and you can even use a gif or png with transparency if you require it. However, the maximum image size that you can upload is 150 KB.

2. HTMLKit FavIcon Generator

With this FavIcon generator you simply select a picture, logo or other graphic (of any size/resolution) for the “Source Image”.

3. Favicon.cc

This is my personal favorite! When you open this website, you’re presented with a grid where you can paint each pixel of the grid using any colors from the palette provided alongside and also preview the result of your creativity LIVE just below the workarea. Besides sketching a FavIcon, you can also import an image in various formats and convert them into a favicon.ico file.  You have an additional option to keep the dimensions of the image you choose, or to shrink the uploaded image to a square icon. There are also user generated favicons in two sections – “Latest Favicons” and “Top Rated Favicons” that you can view or download.

How to use your Favicon

After you’ve created your favicon, it’s time to add it to your website. You can do so by following these steps:

1. Upload the favicon.ico file to the root directory of your website. Visit http://your-website.com/favicon.ico to make sure it is present.

2. If your website is a static website with different HTML pages, insert the below code in the HEAD section of your pages:

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

If your website is based on WordPress and you’re using a theme, you’ll need to modify the above code as follows:

<link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo('wpurl'); ?>/favicon.ico">

and place it in HEAD section in the header.php file of the theme.

Some people suggest that the following is actually more correct:

You can use both if you want! Clear your browser’s cache, restart the browser and visit your web page. Ideally, you should be able to see your Favicon. However, it must be noted that sometimes the Favicon doesn’t show up immediately. You should try putting a ‘?’ at the end of the URL, which will trick a browser into thinking the page is new and not cached. In some cases the favicon might not show up in Internet Explorer 7. You’d want to add

in the HEAD section to display your Favicon correctly in IE7.

Some Good Looking Favicons and Favicon Galleries

For your viewing pleasure …

1. List of 50 Remarkable Inspirational Favicons – Smashing Magazine
2. 88 Outstanding Favicons
3. Favicon Gallery at FineIcons
4. Favicons at Delta Tango Bravo
5. Fresh Favicon – Inspirational Favicon Gallery

I hope you enjoyed this walk through and if you have something nice to share, please feel free to use the comments form below.

Recently I started hearing from a lot of people complaining about their theme developers using minified CSS in their themes for maximizing performance without any consideration for their ease of use / customization. People keep asking me if there are tools that convert minified CSS back to normal human-readable form and recently someone even asked me to do a job – normalize some minified stylesheets (of course I didn’t do it and rob him off!)

Whether or not developers should minify CSS when giving out themes / websites has been a subject of debate for a long time but why developers choose to minify some parts of their stylesheets has often been overlooked. Performance issues for larger projects, minifying the reset styles (you don’t have to change them anyway!) and non-developer license are just some of the reasons!

Anyway, coming back to the subject of this post – How can you read minified CSS with ease?
(No, we are not going to install any 3rd party software!)

Simply validate the CSS (only the minified part if you have other files attached as well) in question using the W3C’s CSS Validation service!

The output of the validation check is:

1. whether or not, your CSS validates to standards set by W3C.
2. Normal, Properly Formatted and Easily Readable version of your minified / compressed CSS

You need to keep the formatted and decompressed CSS? Just copy it from the validation output and replace your version. Voila!

Is your website compatible with current web standards?

It has been seen that different software applications don’t work on different platforms in a same fashion and this applies to websites more commonly. People use different browsers like Firefox, IE6, IE7, IE8, Safari, Opera and many such as per their convenience. However, the question that boggled the minds of many developers was, Will their website look or work evenly in such browsers? Later, it was proven that developers who relied upon Firefox suddenly found their pages broken in IE6, 7 or other browsers.

One can check their website functionality in different browsers today however it does not guarantee for it to work similarly tomorrow if the code is not xHTML/CSS valid. Generally, different browsers present a website in a different manner. Some browsers show bugs in page, while others may not. It depends upon the competency of a browser and its attribute to reading different scripts in different ways. Microsoft IE6 has been a pain for web-developers however, we cannot overlook the number of users who are still using IE6.

Hence this makes it very important for consumers/businesses, while getting their websites designed or developed, to check the validity of xHTML/CSS and ensure its compatibility with different browsers. Most importantly, keep it updated and maintained with current web standards. Today we have software available to convert an image file or a screen-shot into HTML/CSS code by slicing techniques, which makes it difficult for consumers and other developers to understand that code and reduces its maintenance ability. Thanks to the set standards by W3.org, designers and developers now have a common base to certify their work as most accurate.

This might have left some pondering, what is CSS/xHTML code and what makes it so special. Well, that’s where I come in picture . xHTML/CSS is a code form that has been agreed upon by different designers and developers, globally. Creating websites with clean and clear code is paramount for maintaining and modernizing your websites. Validating code is the simplest way to check whether your website is built in accordance with current web standards or not and many professional web developers are using  markup validation service as a debugging tool to provide better quality.

With the gigantic globalized market online, you would not risk your brand being listed in the Worst-Websites-Of-The-Day. Yet, I am tormented to say that 60% of all the websites are still not validated or up-to-date. I would urge you to have your websites checked for the validation or do it yourself with the following services.

• Validate xHTML
• Validate CSS
• Validate RSS Feed
• Broken Links
• MobileOk Check
  

At last, it goes unsaid I’m always glad to help the community and would love to review your website for free, please leave your website URL in the comments and I will analyze your website as per your business needs and provide you with a consultation of how can you enhance your business through the use to cutting-edge technology and creative design.

I know the competition still remains tough, but this tool makes it a lot easy to handle. I’m talking about the Google Insights. A great tool to give you an insight knowledge about who is looking for what; where; how much and when. Its like having your market researchers spread across the world on the click on a button! Well that’s Google!! Simplifying things and making your life easy.

With this tool you can know all about a specific keyword, or a set of keywords by graphing the information based on web, images, news or products. You can also get the data within specified time frame and categories. That’s not all! It gives you the requested information for the related keywords also.

Well that’s a brief about this exciting tool. I’m sure you’ve already started trying your hands on it. But hang on! Allow me to highlight just a few more features of this tool.

• Get the data with region, time range and category filters.
• Analyze search keyword favored across regions, categories, and time frames.
• Get related news headlines.
• Get results in clear graph and map presentation.
• Export and download data in .CSV format.

Rest, I’ll leave them for you to find out!! Just make sure you share the findings with me too..

Click here to know more about this tool and Stay tuned for more..

Best CMS, Ever!

If you think WordPress is yet another blogging platform, take a quick look at other pages of CSSJockey (right from the homepage). Do you really think we could do this with  “Just-Another-Blogging-Software”? Absolutely not!!

Custom Pages, Custom Widgets, Photo Galleries, Portfolio, eCommerce! What, out of these, and even more hasn’t been set up using WordPress.

Only recently, I updated my portfolio with more websites that I had finished, which were not under non-disclosure policy. After adding these projects in my portfolio, I realized that in accomplishing 90% of my work, WordPress plays the role of a CMS. With all the work done so far I am amazed by just how much of its capability I have discovered and how much of it is still unknown to me. Here are a few things that my clients ask when I recommend using WordPress, even for static websites, and what I’ve to say to back my recommendation.

Is it easy to use?

It is The Most Robust and Feature-Filled Platform, which is not only easy to use, but also, very much user friendly. So far all my clients are really happy with the decision to use WordPress as a backend. Moreover, WordPress.tv has made our lives much easier. I refer my clients to this website to learn the features and backend functionality while I am busy creating the best solutions for their requirements.

I need a blog as well…

I guess everyone has realized the value of blogging for their personal and professional web presence by now and most of my clients ask for a blogging platform with a unique and custom website design. It’s really easy to create a few custom pages within WordPress, rather than, creating a WordPress theme that matches the website design. And its really easy to embed WordPress features on these static web pages.

What about Search Engine Optimization?

I am pretty sure you are not new to this term and would want your website to be listed in top search results. With WordPress, you can use plugins like All in One SEO Pack, just to name some, that does most of the work without user intervention. SEO is a wide topic and there’s a lot that needs to be done to achieve good search engine rankings. However, a WordPress installation with a few plugins can help you get there without much hard work. You might want to check a few posts I have written on search engine optimization.

What all WordPress can do?

Honestly, I can’t deny that after using WordPress I haven’t even cared to search for any other CMS. WordPress is an amazing platform which can be customized to create Personal websites, Portfolio, e-Commerce, Galleries and Photo Blogs, Magazine or News websites, Article Libraries and a lot more. If you are comfortable with custom functions and template tags you can actually do wonders with just a single custom WordPress theme.

I don’t know programming?

While creating websites for my clients, I make sure they don’t have to spend their valuable time learning xHTML/CSS to update their websites. I have taken WordPress customization to next level where it provides a separate section in admin area to update the front end of our custom themes. It also has WYSIWYG capabilities where you can update and stylize the content which is not a part of WordPress post or page.

Moreover, these custom functions don’t save any data in core WordPress database tables (wp_options) so there’s no chance it won’t work with any other plugins and features.

Here’s a screenshot of Custom Theme Options I provide to make my client’s life a bit easier.

Click to Enlarge

That’s not all, to add a few more features in the list…

• WordPress is Free and Opensource
• WordPress is easy to install and upgrade
• WordPress is standard compliant
• WordPress is Popular (CNET, Ford, ZDNET and various other popular sites has used WordPress as a CMS)
• Free support from a vibrant and amazing community of developers and contributors
• Huge amount of documentation is available
• Plugins are available for almost everything you can think of

I bet no other CMS can compete with this master piece. If you are using WordPress as CMS please drop your website links in comments. Don’t try to spam as a very powerful spam protection plugin (Akismet) comes with its default installation