wpvidZ

Learn WordPress With Video Tutorials

  • Blog
  • Browse
    • Backup & Restore
    • WordPress Localhost
    • WordPress Hosting
    • WordPress themes
    • Version Updates
    • Plugin Tips
    • Security
    • Tutorials
    • WordPress SEO
    • WP Miscellaneous
    • Sitemap
  • WP 5+ Tutorial
  • Search
wpvidZ Blog Tutorials Twenty ten favicon — add favicon.ico in twenty ten theme

Tutorials

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

Last updated on February 18, 2017
Posted on January 2, 2011

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.

  • Is my site loading fast? I use this shared hosting
  • Try my theme >

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.

add favicon twenty twentyten Wordpress

Latest Posts

  • Twenty Nineteen Theme Full Tutorial – Creating a Website
  • Uninstall W3 Total Cache Plugin – Incredibly Easy!
  • Create WordPress Website 2018 on SiteGround Genesis
  • WordPress Noopener Noreferrer Rel Attribute Quick Fix
  • WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • Twenty Seventeen One Page Parallax Scrolling Website Style
  • How To Add Google Map in WordPress Contact Page
  • WordPress 4.7 Justify Text and Underline
  • Twenty Seventeen Footer “Proudly Powered By WordPress” Text
  • How To Add YouTube Subscribe Button To WordPress Website
← WordPress google ranking plugin — boost blog ranking
→ Missing a temporary folder — uploading image has failed to upload due to an error

Comments

  1. Steve Youngs says

    January 6, 2011 at 6:22 am

    Hi Kimi!

    I use my gravatar as my favicon. Yep, there is a WordPress plugin for that… “Gravatar Favicon” (available via dashboard plugin installer).

    Kind regards,
    Steve

    • Kimi says

      January 6, 2011 at 11:52 am

      Steve,

      Yes, i do agree, most of things can be done with plugins in WordPress this is why i love it!

      But i rather not to install any plugins if the job can be done with adding the favicon manually.

      Plugins which are installed influence our site’s loading because its scripts.

      But plugins can be life saver, i agree 🙂

      Thanks for leaving comment Steve!

      Kimi.

Comment form on this post is closed after 60 days.

Search

Worth Reading

  • WordPress CDN setupWordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • WordPress Google maps in contact pageHow To Add Google Map in WordPress Contact Page
  • The configuration of YouTube Subscribe button in Google Developers web pageHow To Add YouTube Subscribe Button To WordPress Website
  • Adding Social Media Links to WordPress Menu With CSS Classes
  • Unable to create directory wp-content/uploads in WordPress
  • Forward Twitter to Facebook Using App and Feedburner Tutorial
  • Kitchen Sink WordPress - Seem Simple But Important
  • Admin Pointers, Drag and Drop WordPress 3.3 Media Upload Features
  • How to sell ebook in a wordpress blog?
  • Check your site's performance using Google labs Page Speed

Backup & Restore

Backup WordPress Without a Plugin or FTP

Export WordPress Database using phpMyAdmin

BigDump Alternative – When BigDump Failed Importing Large WP Database

At This Place The Current Query Includes More Than 300 Dump Lines

View All..

Live Online Website

View All..

Offline Installation

How to Upload WordPress localhost to live server manually

Steps to Install WordPress on Windows 8 and WAMP 2.4

Install WordPress on Mavericks OS X 2014

Maximum upload file size in WAMP WordPress

View All..


WPvidz Hosting Image

  • About Me
  • Contact
  • Affiliate Disclosure
  • Privacy Policy
  • Term of Use

Copyright© 2023 wpvidz.com SG2021 | sitemap.xml


WPvidz.com is independent from WordPress.org but is proudly powered by WordPress & its block-based editor (Gutenberg)

WpvidZ.com uses cookies" to give you the best browsing experience possible. If you click "I Accept" below then you are consenting to this. For more information about your privacy settings on this website, please visit the Privacy Policy page. I Accept