• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
Ricardo Bueno

Ricardo Bueno

Online Marketing Strategies for Real Estate

  • About
  • Blog
    • Free Updates
  • Speaking
    • Testimonials
  • Contact

May 12, 2010   |   by Ricardo Bueno   |   Get free new post updates HERE.

How to Add A Custom Favicon to Your WordPress Blog

site faviconA favicon is a small graphic/image that is associated with a page or a website. Most website favicons are designed as a smaller image of the site’s logo or other branding. The name favicon (pronounced: fah-vih-kahn) came from Internet Explorer which calls it’s bookmarked sites “favorites” and the favicon icon was displayed in the favorites menu.

Today’s Tutorial – How to Add a Custom Favicon to Your WordPress Blog

First Step: Generate your own custom favicon image.

The most common sizes for favicon images are: 16×16, 32×32, 48×48, 64×64, 128×128. If you can’t design the images and resize them yourself in photoshop, don’t worry, there are services on the web that allow you to upload and resize the images. One service I like is: http://www.genfavicon.com

Second Step: Insert your new image into your website.

First, add the image to your Media Library. It’ll render an image url for your favicon. Copy that url as you will be inserting it into the header.php code of your wordpress site. Locate your header.php folder and edit the file in the following manner:

<link rel=”shortcut icon” href= “favicon.ico” >

Note: replace “favicon.ico” with your new image url.

Then, you’ll want to save your header.php file and do a hard refresh on your browser. At this point you should be able to see your favicon next to your url as in the sample image above.

 

About Ricardo Bueno

I specialize in marketing and technology for the real estate industry. Currently: Marketing Technology Director at West (a Williston Financial Group company) West. Previously: National Trainer at W&R Studios.

Get more from me on and .

Reader Interactions

Comments

  1. Steve Scheer says

    May 12, 2010 at 4:01 pm

    Nice instructions on favicons. While I have one, someone put it there for me way back when, and I have been wanting to update it. I'll be using your instructions to get that done. Great to finally meet you last month.

    Reply
  2. Ricardo Bueno says

    May 12, 2010 at 4:04 pm

    Hi Steve, pleasure to meet you as well.

    The image generator above is pretty easy to use (you'll just have to edit the image if you don't have one designed already. The favicon generator above will resize it to the appropriate height/width for you. From there, the rest is pretty easy, just a matter of locating the code hi-lighted above in your header.php file.

    Glad it helps now go pass it along 🙂

    Reply
  3. Steve Scheer says

    May 12, 2010 at 10:01 pm

    Nice instructions on favicons. While I have one, someone put it there for me way back when, and I have been wanting to update it. I'll be using your instructions to get that done. Great to finally meet you last month.

    Reply
  4. Ricardo Bueno says

    May 12, 2010 at 10:04 pm

    Hi Steve, pleasure to meet you as well.

    The image generator above is pretty easy to use (you'll just have to edit the image if you don't have one designed already. The favicon generator above will resize it to the appropriate height/width for you. From there, the rest is pretty easy, just a matter of locating the code hi-lighted above in your header.php file.

    Glad it helps now go pass it along 🙂

    Reply
  5. Sukhraj Beasla says

    August 13, 2010 at 2:20 am

    Guess what? I noticed your favicon and all the changes you made recently! Way cool! I'm going to be making one soon. 🙂 By that way, I was going to ask you how to make one but glad you already addressed this.

    Reply
  6. Asian Tv says

    May 21, 2011 at 5:39 am

    Awesome! works like magic, its currently working well on my site using
    your updated code but it seems to only work in Firefox and not in IE.
    How wonderful it would be to see an update to this tutorial that also
    works in IE. In any case, I pass the full credit to you for sharing
    this. All the best.

    Reply
  7. Clay Tate says

    September 19, 2012 at 8:40 am

    Ok, this might be a stupid question, but I’m a newbie. I have created my favicon, but I don’t know where I find the header.php folder to insert it. I looked in the Genesis folder on my hardrive, and found header.php, but when I opened it it said I should make all modifications in my child theme (agentpress). Help?

    Reply
    • Ricardo Bueno says

      September 20, 2012 at 12:09 pm

      Hey Clay, not a dumb question at all… I don’t think AgentPress has a header.php folder. Your best bet is to log into your site via FTP, go to WP Contents >> Themes >> AgentPress >> click on Images. In there, you’ll want to replace the favicon.jpg image that’s there (the default Genesis favicon) with your own image – you’ll want to title it the same.

      Let me know if that makes sense…

      Reply
  8. Sachin says

    January 26, 2013 at 9:21 am

    wow thanks for this information 🙂

    Reply
  9. Mohidul Islam says

    January 31, 2015 at 8:07 am

    Nice Tutorial.

    Reply

Leave a Reply Cancel reply

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

Primary Sidebar

Recommended Resources:

OptinMonster

Synthesis Managed WordPress Hosting

StudioPress Premium WordPress Themes: Winning Agent Pro Theme

Footer

Sign up to get regular podcast episodes, how-to articles, webinar updates & more.

Navigation

  • Home
  • Blog
  • Podcast
  • Speaking
  • Contact

Useful Links

  • Terms & Conditions
  • Privacy Policy
  • Help & Support
  • Facebook
  • Instagram
  • LinkedIn
  • Twitter

© 2021 RICARDO BUENO. All rights reserved.