Twenty ten favicon — add favicon.ico in twenty ten theme

Twenty ten favicon is not included after installation.

After you installed wordpress 3, you will have default theme, Twenty Ten, which is really awesome i would say.

The only thing which is missing, is you do not have twenty ten favicon after installation, you must add yourself.

Though i reckon if you host your wordpress blog in some blog hosts, like bluehost, you will have bluehost favicon, and i am sure some of you want to change that blue favicon which is belong to bluehost with your own twenty ten favicon.

I use JustHost for this blog and HostGator for some clients, and they do not put this small icon automatically like in bluehost.

Twenty ten favicon which has favicon.ico format file is known to give your blog a brand that your readers will recognise your site easily.

However if you use YSlow to measure your blog speed, you will notice the browser needs a while to look where this file is.

So it is a very good idea if you also compress this icon image first before you upload to your server.

Adding Twenty ten favicon in Twenty ten theme is not different with the other themes.

In my previous entry, about the best SEO wordpress theme, i posted a screenshot that Thesis theme is a flexible theme that will really help to upload this small icon file to your server and display in the browser of your blog address.

It means, by using Thesis theme, you do not need to add any codes, because it has a built in favicon uploader button, which is very handy for non-techie wordpress bloggers.

As mentioned above, to add twenty ten favicon is not difficult.

Basically the process of adding twenty ten favicon, will be like adding in some other themes or HTML static website page.

You can add it dynamically, it means you point to the template directory, where your theme folder stay in webserver, or simply adding static HTML code for the favicon.

However because wordpress is a dynamic php based blogging software, adding static HTML code is not recommended because you will need to edit the file, which is header.php when you move the directory path, you will need to edit it again.

The best method will be, adding twenty ten favicon with dynamic wordpress php code.

Twenty ten favicon tutorial and steps:

This is the screenshot of this tutorial:

twenty ten favicon

twenty ten favicon

As you can see, in the screenshot, i am using Twenty ten as a demo and it has favicon.

The simple tutorial to add twenty ten favicon:

1. Prepare your twenty ten favicon, which has to be in favicon.ico

2. Compress it, see my post, how to compress and optimize  images in wordpress.

3. Login to your cPanel to access your file, and go to the root where you install your wordpress blog (where wp-admin,wp-content folders are, see image below)

twenty ten favicon

Where you have to upload and place twenty ten favicon.

4. Upload this favicon.ico into the path from step 3.

5. Wait for a few minutes, and refresh your blog, or clean browser cache.

You will see your twenty ten favicon. If you still can’t see, either you should wait or try to access your site with another browser.

A video tutorial:

As a reference, I actually already made a video tutorial how to add or change wordpress favicon for a reference as a visual tutorial, using another theme.

I tried the simple tutorial above and it worked nicely, however you can also adding these following codes into your functions.php file (after backing up your files!).

function add_theme_favicon() {
echo '<link rel="shortcut icon" href="' . get_bloginfo('stylesheet_directory') . '/images/favicon.ico" >';
add_action('wp_head', 'add_theme_favicon');

Tutorials above should help you to add twenty ten favicon in Twenty ten theme.

Share the knowledge
Share on Google+0Tweet about this on TwitterShare on Facebook0Pin on Pinterest0Share on Reddit0Email this to someonePrint this page