How to replace my site name text with a logo image?

The title of this post is an oft repeated question I receive in my emails and in the comment section of this site. “How to change my site name to a logo?”.  For someone with few basic skills in html and css , this wont be a big deal. But I am hoping this will help those who want to do this but unable to figure it out. This also works out easy for me , so that I wont have to reply to those mails separately.  I have created a screencast which will show you the entire process.  However I am going to write down the steps involved.

1. Create and save your logo image to the images directory of your template. In this case we name it as logo.png

2. Open the header.php file of the template and find the section where your site name is given. It often looks like given below.

<h1><a href="<?php bloginfo('siteurl');?>/" title="<?php bloginfo('name');?>">
<?php bloginfo('name');?> </a></h1>

3. Change it to the following.

<h1><a href="<?php bloginfo('siteurl');?>/" title="<?php bloginfo('name');?>"> 
<img src="<?php bloginfo('stylesheet_directory');?>/images/logo.png"/> </a></h1>

Watch the screencast

  • thanks for your work and your awesome templates. I always recommend you for any wordpress users. Keep it up 🙂

    • Anonymous

      Thanks buddy. Appreciate it.

      • jat

        can i apply this to the canon theme?

  • cato

    genialllllllllll gracias !!!!!! muy util… !!!

  • Kristin

    i have added the code above in my header php file, and uploaded a logo to images via ftp to Wp admin. but its not showing the logo. could you have a look at : http://www.ep-stockphoto.com/

    • Anonymous

      Are you sure the logo image is uploaded to the images directory of your template? Currently it does not seem to be there. plz check again.

  • Admantri

    help me where can i Crate my Logo for free

  • Edgar A.

    Thanks! works perfectly, I’ll recommend it to my friends!

  • Sal

    Great Theme as always, I am trying to remove the twitter update option from the theme.. is it possible to do so?

  • Nicki

    Hi thanks for the wonderful tutorial! Question – I have a logo image which is a GIF image – is this still ok to use or does it need to be PNG or JPEG? Thanks 🙂

  • Passer

    thanx for the tutorial dude 😀 can u please do a tutorial on how to apply this on Liberation theme? because when i place my logo it goes out of the header bar *the place which holds the menu and the search field* …thanks for all your hard work!

  • I must say that you have great post here that is very informative. Nicely presented information in this post, I prefer to read this kind of stuff. The quality of content is fine and the conclusion is good. Thanks for the post
    Ecommerce website developers

  • I just tried this but the height and width seems to be fixed. For example If I use a logo of 400×200 the banner displayed is cropped at 200×200. Any idea how to change it?

  •  very good post, t hanks for sharing it.

  • darkmuse

    Grreat benefit!! The one really good tutorial which can be used. So cool

    essays uk

  • Great! I was looking for this solution. Since last few days I was thinking about  replace my text logo with my header image.

  • Afaf

    Thanks for your great tutorial

  • Afaf

    Thanks for your great tutorial

  • This is cool. Wish it was available for IE as well. I already try it and it works as well!!!

  • This is cool. Wish it was available for IE as well. I already try it and it works as well!!!

  • Ed

    Excelent…! I just made a test http://www.ssnis.com.ve

  • Ed

    Excelent…! I just made a test http://www.ssnis.com.ve

  • well its good guidance for a beginner to go on with it 

  • Anonymous

    That’s best information for any of the personal site user to use. The holding and it’s way they have been change site name. Better to understanding the perfects works as long to handling it’s.

  • how about change header. I use wordpress to my web here http://ahomeinfo.net/

  • crowd SPRING

     Your post really helped me as i  wanted to do this but unable to figure it out…. entire process is very well expained in easy steps!thanks a lot!

  • Perfect thank you, I had a hell of a time trying to figure that out.

  • Mcxfever

    I really like your post and i definitely
    bookmark your post  Create and save your logo image to the images directory of your template, it is possible for asp.net, Php, CMS like joomla and drupal also.

    http://sonictrades.com/sureshot-intraday-stock-tips/

    http://sonictrades.com/share-tips-intraday-trading-stock-market-nifty-option-tips-free-trial/

  • Mcxfever

    I really like your post and i definitely
    bookmark your post  Create and save your logo image to the images directory of your template, it is possible for asp.net, Php, CMS like joomla and drupal also.

    http://sonictrades.com/sureshot-intraday-stock-tips/

    http://sonictrades.com/share-tips-intraday-trading-stock-market-nifty-option-tips-free-trial/

  • Mcxfever

    I really like your post and i definitely
    bookmark your post  Create and save your logo image to the images directory of your template, it is possible for asp.net, Php, CMS like joomla and drupal also.

    http://sonictrades.com/sureshot-intraday-stock-tips/

    http://sonictrades.com/share-tips-intraday-trading-stock-market-nifty-option-tips-free-trial/

  • really wonderful article to replace site name with logo.

  • really good tutorial which can be used. this very interesting information 

  • Anonymous

    Nice tutorial!
    http://cellcustomize.com

  • I think examples of well-known logotypes (wordmarks) are the striped IBM design, Mobil written in blue with a red “o” and CocaCola written in flowing red script.

  • Thanks for giving this few tips in the blog which are really helpful…

  • Finally a designer that understands that not everyone speaks “developer” and can read minds. Thank you for doing this. You have no idea the amount of “value” you add in helping those that don’t understand how to do this.

  • Wow its cool! thanks for sharing the info. Tribute to you people who give us such valuable information so selflessly.

  • Scrooloose

    This is just what I needed, thanks.

  • Hieutrungduc

    Thank, I am processor develop web and edit web

  •        I am very happy to
    read your articles it’s very useful for me, 

    and I am completely satisfied with your
    website. 

    All comments and articles are very useful
    and very good.

    Your blog is very attention-grabbing. I
    am loving all of the in

     turn you are sharing with each one!…

    Website
    Designing in Indore
        

  • Surya Adi Sapoetra

    finally i got tutorial like this, thanks..

  • Anonymous

    All the dresses might be genuine exciting although using. Ignite work using lively shades. When sporting a good red skit can be suitable compared to red enterprise shorts even in christian louboutin outlet. Believe innovative together with feel entertaining possibly at once maintain it little as, when this outfit would probably head out excessive, it could be bridging this limitations with the business plan.

  • Anonymous

    Great photography with disqus..

  • Anonymous

    Great photography with disqus..

  • Lscalise

    this might be a stupid question. Im new to this but where is the image directory for the template?

  • Amir

    Hi there! I’ve changed the blogname to my logo, but it messed with the search bar and the social logos… my url is: http://www.aswebdesign.net

    what shall I do to fix this? thanks!

  • Nice! I did not know that is even was possible. 

  • Nice! I did not know that is even was possible. 

  • Awais Bashir

    Memphis Personal Trainer
    It really worked for me . I am thankful to you because it is fantastic place . I have got what i wanted here . 

  • Great Post. It really helps.

  • JADV

    Totally amazed, i’m newby so this was extrmely helpful,thanks for share.

  • abc123

  • Management

    thank you veryyyyyyyyyyyyy muchhhhhhhhhhhh for this