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.

1. As many basic users were not able to figure out how to access the dashboard after activating the plugin and then log out – we added the option to enable or disable a LOGIN Link in the footer of the Coming Soon Page.

For all our basic users out there, I’d like to share a quick-tip :

You can access your WordPress website’s dashboard by visiting:
http://www.your-website.com/wp-admin

This might help you just in case you feel lost, some time.

2. We have made significant changes to the CSS, so now you can display only a Coming Soon message without specifying a heading without breaking the layout of the page (the email subscription form and the footer, more specifically). Also, the style information has been so tailored that it does not conflict with other themes and plugins that you might be using..

3. We have also fixed the issues being created by the date setup and the Count Down Timer – it should work perfectly now.

You can Download Custom Coming Soon Pages Plugin latest version from the WordPress.org Plugin Repository.

We’re absolutely delighted at how well you’ve received this plugin and are constantly supporting us with your inputs so that we can make it even better and serve you better. So please keep your valuable feedback coming! In case you still run into any issues, feel free to post in the Support Forums! We’ll be glad to assist you..

I have released an immediate update to the Custom Coming Soon Pages Plugin – The update introduces another default theme for the Default Coming Soon Page which is quite similar to the original one but without the Count-Down Timer. So all of you who have upcoming projects but are not sure about the launch date – Grab an updated copy of the Plugin from the WordPress Plugin Repository and put it to good use

Wordpress Plugin Coming Soon Without Timer

Download Custom Coming Soon Pages – WordPress Plugin v1.01

* Thanks to our user suayMac for picking this up and suggesting that I add a theme without the CountDown Timer.

Custom Coming Soon Pages WordPress Plugin will enable you to perform upgrades, fix nasty bugs or preview jazzy enhancements to your design live on your WordPress based website or blog without letting your users and normal visitors see crappy error messages or changes to the design until you really want them to.

Screenshots »

Previous Next

More Benefits »

Domain Age is a significant metric that is considered by many Search Engines among other factors while ranking your website. So if you have a unused domain, you can use the Custom Coming Soon Pages Plugin on a fresh WordPress install instead of your web host’s landing page. Restrict your host from pointing your domain to an ad-farm when you can make a mark with a Coming Soon Page customized to project your Brand even before you launch.

Custom Coming Soon Pages Plugin is also capable of displaying a Count Down Timer if you plan to launch on a Specific Date. You can also let your users subscribe to your website so that they can get notified via email whenever you launch. Integrated Twitter and Facebook features lets your visitors follow you on these social networks until you launch.

Features »

1. Controlled Access:
   Only Normal Visitors and Regular Members will see the Custom Coming Soon Page. If the Site Administrators are logged in, they will not see the Custom Coming Soon Page but will be able to view the fully functional blog with the current applied theme and active plugins as well as full access to the WordPress Dashboard.
2. Customizable Content:
   Customize the Title of the Coming Soon page as well as the coming soon message that is displayed from the Plugin Settings in your Dashboard.
3. Customizable Backgrounds:
   Specify any color for the background or use an image of your choice from the Plugin Settings in your WordPress dashboard.
4. Create your own Custom Coming Soon Page templates:
   You can create your own Custom Coming Soon Page templates using xHTML / CSS / PHP and plug them into the plugin for use.
5. Countdown Timer:
   Going to launch your website on a Specific Date? Specify it in the Plugin Settings and Display a cool Count Down Timer on your Custom Coming Soon Page.
6. Know-When-We-Launch:
   Let your users subscribe to your website and get notified via email when you launch.
7. Social Networks:
   Integrated Twitter and Facebook features lets your visitors follow you on these social networks until you launch. Just specify your user ID in the plugin settings in your WordPress Dashboard.

Download Custom Coming Soon Pages WordPress Plugin by CSSJockey now !

Installation »

1. Extract the Plugin Folder from the downloaded ZIP file.
2. Upload cj-coming-soon folder to your /wp-content/plugins/ directory.
3. Activate the plugin from the ‘Plugins’ page in your Dashboard.
4. Configure the plugin from Settings > CJ Coming Soon options page.

Update »

1. Update | Custom Coming Soon Pages Plugin – ver 1.01
2. Update | Custom Coming Soon Pages Plugin – ver 1.03
3. Update | Custom Coming Soon Pages Plugin – ver 1.04
4. Update | Custom Coming Soon Pages Plugin – ver 1.05

Plugin Support »

Report any Bugs or Request more Features at our Support Forums.

I believe you’ll find this plugin useful. Please let me know how do you like it. I’d appreciate your valuable feedback on Custom Coming Soon Page WordPress Plugin so please use the comments form below and keep your inputs coming…

Simple light-box effect with jQuery and CSS

As you already know that I’ve been working on improving the performance of my website and I needed a simple solution to create light-box effect for Live-Chat on this website. I had many options to choose from available jQuery plug-ins however, the idea was to optimize the code with minimal use of heavy third-party scripts and CSS. Moreover, Only thing I needed was a light-box effect without any other functionality.

So I created the light-box effect with a few lines of code using CSS and jQuery.

View Live Demo

Let’s start coding

xHTML Code

Place this code within <body></body> tags where ever you like.

<a id="show-panel" href="#">Show Panel</a>

<div id="lightbox-panel">
<h2>Lightbox Panel</h2>
<p>You can add any valid content here.</p>
<p align="center">
<a id="close-panel" href="#">Close this window</a>
</p>
</div><!-- /lightbox-panel -->

<div id="lightbox"> </div><!-- /lightbox -->

First line of the above code is a link with id “show-panel” which will display the “light-box” and the “lightbox-panel” DIVs, similarly on line 7 we have a link with ID “close-panel” to hide these DIVs. This will be handled by jQuery of course.

#lightbox-panel will hold the content to be dispalyed and #lightbox will add a transparent background behind our content panel. Let’s write some CSS code to stylize these two DIVs before we add the functionality to our links with jQuery.

CSS Code

You can add this code within the document’s <head></head> tag or in any linked style sheet.

* /Lightbox background */
#lightbox {
 display:none;
 background:#000000;
 opacity:0.9;
 filter:alpha(opacity=90);
 position:absolute;
 top:0px;
 left:0px;
 min-width:100%;
 min-height:100%;
 z-index:1000;
}
/* Lightbox panel with some content */
#lightbox-panel {
 display:none;
 position:fixed;
 top:100px;
 left:50%;
 margin-left:-200px;
 width:400px;
 background:#FFFFFF;
 padding:10px 15px 10px 15px;
 border:2px solid #CCCCCC;
 z-index:1001;
}

Note: The z-index value for #lightbox-panel should be greater than z-index value of #lightbox to display it above the transparent background and both should have the property display as none so they should not show up by default or if the users have Javascript disabled in their browsers.

Let’s put some life to our code with jQuery.

jQuery Code

You can add this code within the document’s <head></head> tag and we are done.

<script type="text/javascript" src="PATH_TO/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
 $("a#show-panel").click(function(){
 $("#lightbox, #lightbox-panel").fadeIn(300);
 })
 $("a#close-panel").click(function(){
 $("#lightbox, #lightbox-panel").fadeOut(300);
 })
 })
</script>

Pretty simple, huh!!

Could it get easier than this?

Once you click the link with ID “show-panel” it will display both the DIVs with some nice fade effect and if you click the link with ID “close-panel” it will hide these DIVs.

I hope you enjoyed this little trick to create simple light-box effect with CSS and jQuery and You are most welcome to share your inputs and code in the comments below.

WordPress Plugin - Community Links Feed

Community Links Feed plugin for WordPress allows your blog or website’s community users to submit their favorite links to your website. Upon submission, the community links appear in the Dashboard where the administrator can approve or reject them as appropriate. Once approved, the community links feed appears in a customizable sidebar widget.

You can customize the Community Links Feed widget from the plugin settings page in Dashboard where you can:

1. Change the widget heading
2. Change the widget description
3. Choose whether to include rel=”nofollow” in community feed links submitted by your users
4. Change the length of link title or description

Easy Installation

1. Upload cj-community-links folder to your /wp-content/plugins/ directory.
2. Activate the plugin from the ‘Plugins’ page in WordPress.
3. Add the widget to your sidebar from Appearance->Widgets.
4. Configure the widget from Settings->Community Links.

Screenshots

Theme Settings

Manage Links

The Widget - This will be displayed as per your blog style

Submit Link Panel

Download

Please download the plugin files (cj-community-links.zip — 36 KB) in ZIP format using the button below:

View Live Demo

Help & Support

Please visit our Google Group to report any bugs or request more features.

IMPORTANT: If you are facing blank page issues with this plug-in and have WP-Cache Plug-in installed, try the steps listed here on DailyBlogTips.com . I hope this will help.

I am sure you’ll love Community Links Feed Plugin and find it of great use on your website. Please use the comments form to let me know how do you like it. Your valuable feedback and suggestions are most welcome.

Become a Fan on Facebook

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!

1. Ported xHTML and CSS markup to a newer Framework that I developed.
2. Updated the scripts to minimize the use of jQuery based plug-ins.
3. Optimized the background and other images to load faster.
4. Revamped the home page design to highlight the blog posts better.
5. Home page design now allows more dynamic content to be added for easy navigation and that extra SEO bit.
6. Revamped the Comments style on blog posts.

I have also added more custom admin options to the dashboard to make it easier to control the website without having to edit any files manually. I am loving the new look and feel of the website but I am keen to know how do you feel about it.

Take a look around the website and feel free to provide your valuable feedback using the comments form below

We don’t have any specific positions we’re actively trying to fill, but that could change quickly! Either way, we know that you don’t build an exceptional team by only hiring in spurts. We’re always looking for great people to connect with and discuss opportunities.

Are you an awesome Web Designer or Developer?
Send us your CV / Portfolio at jobs [at] cssjockey.com

What are we looking for?

In Designers:

The candidate must be a highly self-motivated team player and a quick learner who is capable of working efficiently in strict time constraints, independently and as a part of a team. Adobe Photoshop will be the primary design tool, though knowledge of Illustrator or Fireworks would be a great asset and add weight to your eligibility for the post.
We are looking for the following key skills in a designer…

1. Must understand the basics of layers, positioning, blending and grouping
2. Must be familiar with color modes, blending modes and effects
3. Must be an expert with pen, selection and other tools
4. Must know and be able to use Photoshop Filters and Actions
5. Must have a good sense of color schemes and placement of web elements

Most important of all, the designer must be able to *get* the client’s requirements and work accordingly.

In Developers:

The candidate must be able to write W3C valid, table-less xHTML and CSS mark up. The candidate should be able to write xHTML code using both Strict and Transitional mark up. Additional requirements for developers are strong programming skills in PHP and knowledge of popular Content Management Systems (CMS) like WordPress, Joomla, Drupal, PostNuke, Magento and OSCommerce. The candidate should be able to work efficiently in strict time constraints and in accordance with the guidelines from clients.

Branding with your Web Presence

Over the past few years, Internet has evolved as a gigantic bazaar. Everybody here has some sort of business, whether it’s big or small. Be it buying or selling goods or services, or merely sharing information/knowledge, everybody is into marketing something. It’s not just another lounge it’s much more than a silicon city. In pursuance of his or her business, everyone works under the umbrella called Brand. I’m sure the term brand doesn’t sound alien to you. Unless you’ve been hiding under a rock, you would have at least had a single encounter with a brand in your lifetime. Simply put, a brand is a specific name, symbol, logo, design, or a combination just like a stamp, a trademark or in our case, a website.

In spite of this, what makes it so special is what it carries as companion. It is not merely the name of the business or solitary behind a brand, it is a backpack of promises to the consumer and the sum of its potential experiences and perceptions. These are the main elements that go in the making of a brand and this is what we call Branding. Branding is the process or set of steps undertaken in order to make consumers dream, think, eat, sleep, and most of all, believe in a brand.

So much said, it must be clear that branding is of major significance to any business/solitary, who is involved with making a presence, whether it’s online, or offline. Having a brand is like standing out in the crowd and, what makes a brand outstanding is, its branding techniques. There are numerous branding approaches to choose. However, if you are here to make an online presence, there’s one means that encompass mostly all approaches effectively giving your brand an enormous exposure.

If your guess is a Website, give yourself a tap on your back, you deserve it! That’s right it’s your website that can help you strengthen your brand in all aspects while reaching out to millions and millions of users across the globe. I’m sure you don’t really need an explanation on how can a website help you in branding. Yet, the question that everybody needs to be engrossed in is, why it is so crucial for your business/personal website to be outstanding and what all it needs to be composed of to be counted upon as your brand or you.

Why Should Your Website be Outstanding?

Let me ask you a simple question, why do you have a name or, why does anybody have a name? To be known, called with, or just have an identity. So if your name is your identity, what is your surname? It’s the representation of your society, family, culture and foremost, your parents, your makers, or may be even more. Now how many people do you know, who have their first name John? I bet, a lot, just like, there’s a person, with the name starting or ending with Ram, under every brick, in India. No offense intended, please. Nevertheless, there’s only one John Travolta, the world knows mostly.

Now let’s assume, there happens to be another person who has the exact same name and if the infamous John Travolta appears on a movie, you can tell the difference. Of course, yes! Despite, may we ask, why? Because, he is a brand of his work, his skill, his industry. Similarly, your product may be the same as another company’s/person’s, and so can be your website’s design, content, logo, or even the visual effects, but there’s no guarantee that a user will remember you over your look-alike or competitor, for the simple reason, that your brand failed to mark an impression on his/her mind. Eventually, you end up losing your business.

I hope this clears the ambiguity that websites don’t need a lot of investment as part of your marketing/branding strategy. So, if you’re in the process making a website for yourself/business, I hope you have considered this carefully for your brand. In my upcoming posts, I will try to cover more aspects of branding approaches online.

At last, like I always say, feel free to contact me for any queries or any way that I may be helpful for you.