How To Create Web Icons For Your Facebook Fan Page iFrame Tabs

With the new addition of the Facebook Fan Page iFrame tabs, a whole new world of customization and “brand ownership” has opened up to businesses.

Not only are brands able to build highly customizable Facebook tabs out of pure HTML, javascript, and CSS, but you can now brand your tab with a cool little web icon.

With the old FBML apps for your Facebook page, you were restricted to that dull, boring web icon for your custom tab.  This is the small, gray icon that showed up underneath your Facebook page logo in the tab navigation section.

But with iFrame tabs, you can fully customize your tab’s web icon so your Facebook Fan Page starts to take on more of a “website” navigational feel, and gives you – the brand – the ability to fully own and customize your Facebook pages.

The way you add a customize web icon to your Facebook iFrame tab is as follows:

1) Login to Facebook

2) go to your iFrame app (located in your Facebook developers section)

3) click “edit settings”

4) in the middle of the next section you’ll see the “icon” and the “logo” – the “icon is the image that controls what shows up in navigation section on your Facebook Fan Page.

Here’s an example of a Facebook page where I customized each iFrame tab currently running:

custom iframe tab web icons1


The only criteria for your Facebook iFrame tab icon is that it needs to be 16×16 pixels in size.

As you can see above in the image, I set a custom web icon that relates to the content located on each of those custom iframe tabs.

This will help you personalize your Facebook Fan Page and build your own unique brand on Facebook.

Don’t underestimate the power of having a web icon for each of your Facebook page iFrame apps.

Leave a Reply

Your email address will not be published. Required fields are marked *