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.

Various resources over the web are trying to explain the process of (deep) integrating WordPress and bbPress without any issues, but mostly they are broken or outdated. In this guide, we’ll explain the process of integrating the latest stable versions of both WordPress (2.7.1) and bbPress (0.9.0.4) step by step in a comprehensive way.

Step 1: Downloading the Latest Stable Versions

Download the latest stable version of WordPress from WordPress.org and the latest version of bbPress from bbPress.org

Step 2: Extracting the files

Extract the WordPress files into the root directory of your web server (or where you want to install it). Create a new database on your host using your phpMyAdmin or host’s cPanel.

Now, create a folder named forums inside the WordPress directory so that it forms a sub-directory of your WordPress website (for example www.YourDomain.com/forums). Now your FTP directory listing should look somewhat like this:

FTP Structure after creating the Forums Folder

Extract the bbPress files into this forums directory.

Step 3: Installing WordPress and bbPress

Now install WordPress by visiting your website URL in your favorite browser (www.YourDomain.com) and Create a Configuration File using the name of the freshly created database and database username and password. You’ll be done through, quite easily.

To install bbPress as your forums software go to www.YourDomain.com/forums. When the installation page appears click on the Let’s Get Started link to begin with the configuration. Enter the same database name, user name and password as you used for your WordPress install. Don’t check the advanced settings. Just save your database configuration settings.

Step 4: Integrating WordPress into bbPress

The next option is basically where the integration process actually starts. Place a check against the add integration settings. Then place a check against the add cookie integration settings. This enables you to use shared logins.

This is also where the complication comes in, in the integration of WordPress 2.7.1 and bbPress 0.9.0.4. Cookie generation and management mechanism in WordPress 2.7.1 is very different from WordPress 2.5. However bbPress still uses the cookies compatible with previous versions of WordPress. We’ll use a plugin as a work around to downgrade the cookies generated by WordPress to sync with bbPress. Follow the steps below.

Step 5: Filling in the WordPress integration details

In WordPress address, enter http://www.YourDomain.com

In Blog address, enter http://www.YourDomain.com

Now go to https://api.wordpress.org/secret-key/1.1/ to generate WordPress Cookie secret keys. They’ll look somewhat like this:

define('AUTH_KEY', '3{=J|rF]CLK3XNzzKc+*Bn@2yeMh#y{c$PqfAgmW*WgPevIOEAi6Gl{b1');
define('SECURE_AUTH_KEY', '-P`&G!_+5|1uu`>8y9!$f;.T<6-Oa');
define('LOGGED_IN_KEY', '3xIsD$9TmGg;FAu.[V,nqb%lE/`N~)h4rE>cO`]@h vkN?`>fA0w;|FFb|_3NW40');
define('NONCE_KEY', '{qBV?O[wCsW5 Y+1^ ].%Y-Mp[0*m`$A@M3:;OHm=>&R*$I4Zlv7^n*+G`ib.#?a');

In your root directory, open the wp-config.php file. Look for 4 lines starting similarly… Replace them with the generated keys. Perform this step carefully.

Now copy the value of 'AUTH_KEY' that is

3{=J|rF]CLK3XNz<DGr|K>zKc+*Bn@2yeMh#y{c$PqfAgmW*WgPevIOEAi6Gl{b1

(whatever is generated for you) and go back to your browser. Paste it into the WordPress Cookie Secret Key field.

Now go to http://www.YourDomain.com/wp-admin/options.php and look for a field named secret. Copy the value of this field and paste it into the next field of bbPress configuration – WordPress Database Secret. Finally place a check mark against the Add user database integration settings. You don’t need to use the advanced settings. Just Save WordPress Integration Settings and proceed to the next step.

Step 6: Finishing bbPress install with Site Settings

Enter the Site Name and Site Address (mostly, it’ll be automatically guessed for you). Select admin in the username drop-down to map it as the Key Master. Type the name for your first forum and save site settings to finish setting up the forums.

Registration – Setting up User Roles

When a user registers on your bbPress forum, your WordPress blog doesn’t know about it (and vice versa). The user will be created, but WordPress won’t know what user role to apply.

In the “WordPress Integration” section of the “Settings” area in your bbPress admin you will find a “User Role Map” where you can set which roles will be applied to users who register on your forums. Users who register on your WordPress blog will have the appropriate role applied to their account when they first login to bbPress.

Setting Up User Roles When Integrating WordPress With bbPress

If you don’t setup a role map, then this will not work. When you do setup a role map (or change it) any users who are missing either role will be updated, but existing roles will not be affected.

Step 7: Modifying the wp-config.php file

Add these lines of code

define('COOKIE_DOMAIN', '');
define('COOKIEPATH', '/');

Just before this line:

// ** MySQL settings - You can get this info from your web host ** //

This would generally be near the top of the wp-config.php file at around lines 16 to 18.

Step 8: Modifying the bb-config.php file

Create a new blank file path.php and insert the following lines of code into it:

<?php
$p = getcwd();
echo $p;
?>

Upload it into your root directory and access it from your browser at www.YourDomain.com/path.php. It would show you the absolute path to your website and would be something like this: /home/xyz/public_html/sitename/

Copy this path as we will paste this in the bb-config.php file.

In the forums directory, edit the bb-config.php file and insert these lines of code in line 2 immediately after the opening PHP tag ( <?php )

if ( !defined('ABSPATH') & !defined('XMLRPC_REQUEST')) {
define('WP_USE_THEMES', false);
include_once( 'PASTE ABSOLUTE PATH HERE/wp-blog-header.php' );
header("HTTP/1.1 200 OK");
header("Status: 200 All rosy");
}

Then, near the bottom of the file – add these 2 lines of code just before the /* Stop editing */ line

$bb->custom_user_table = 'wp_users';
$bb->custom_user_meta_table = 'wp_usermeta';

Save your bb-config.php file and exit.

Step 9: Installing a magical plugin

Ann Oyama developed a WordPress plugin that enables WordPress to generate cookies that work with bbPress 0.9 so that a single shared sign in can be accomplished between the two! Download this plugin at WordPress.org

Basically the cookies generated by the latest version of WordPress are downgraded to the cookies generated by previous versions of WordPress. Upload the plugin to wp-content\plugins\ and activate it from your WordPress admin dashboard.

After you activate the plugin, you’ll be asked to log in again into your WordPress admin dashboard. Instead of logging in once again – type

www.YourDomain.com/wp-login.php?action=logout

When you’re logged out, clear your browser’s cache and cookies. Restart your browser.

Step 10: There’s no step 10. Bingo!

You’ve successfully deep integrated your WordPress 2.7.1 with bbPress 0.9.0.4. You can now use WordPress template tags in your bbPress theme and style it similar to your WordPress theme… and you’ve a single sign-on shared login set up and running! I hope you find this guide helpful. If you face any problems, feel free to drop us a comment. We’ll try our level best to help you out.

CSSJockey has been doing amazingly well since it has come up online in January this year. And it fills us with a strong sense of pride to announce that we have entered Alexa top million sites in less than 3 months of being up and running. The current Alexa Rank for CSSJockey.com is 99,728 … that implies an 820% growth in 3 months.

With only 18 posts on the blog, and NEWSLive being our only Premium WordPress Theme released till date, we attribue our success to the regular support of our loyal readership base. We’d also like to thank Smashing Magazine and all CSS Galleries for featuring CSSJockey on their website. It sent us a lot of traffic and boosted our readership a great deal.

Although Alexa rank by “Alexa – The Web Information Company” – is not considered a very accurate metric by many but with some recent updates in Alexa ranking algorithm it has certainly become a lot more reliable than it earlier was. And it is certainly not a bad idea if we go by the Alexa rank to measure our reach and popularity until the Google Page Rank update happens.