Categories
Blog

How to Change Favicon in Genesis WordPress Theme

I have noticed a plenty of blogger using Genesis Theme and did not changed favicon in Genesis. There are a number of methods which can be used to change favicon in Genesis WordPress theme. Here is genesis icon is looks like.

genesis default icon

And it is necessary to change default favicon in genesis with your custom favicon. It will increase your branding. Here I will show you three methods to change favicon in genesis WordPress theme.

Change Favicon in Genesis WordPress Theme Using FTP

This method is for those who know how to use FTP. First of all make your custom favicon and convert it to .ico file. It is recommended your favicon size could be 16×16.

Convert your logo or favicon online

After conversion give it name favicon.ico.Β Now access your FTP account and upload your favicon.ico file to public_html >> wp-content >> themes >> genesis >> images

Now repeat the same process to public_html >> wp-content >> themes >> YOUR CHILD THEME >> images

If you ask to overwrite the file then grant overwrite or replace old favicon file.

Change Favicon in Genesis WordPress Theme Manually

This method is for those who are not familiar with FTP. But this will require a little attention. Because you have to add some PHP codes in theme file.

See Also:Β Add Twitter Follow Widget

First of all upload your favicon.ico file to anywhere you want. In my case I have upload it in my upload folder. Now copy the code into a note pad and replace YOUR LINK with your favicon icon link.

 

[box color=”white” icon=”support”]

/** Load custom favicon to header */

add_filter( ‘genesis_pre_load_favicon’, ‘custom_favicon_filter’ );

function custom_favicon_filter( $favicon_url ) {

return ‘YOUR LINK‘;

}

[/box]

It will looks like below code after editing.

[box color=”white” icon=”support”]

/** Load custom favicon to header */

add_filter( ‘genesis_pre_load_favicon’, ‘custom_favicon_filter’ );

function custom_favicon_filter( $favicon_url ) {

return ‘http://howtowords.com/wp-content/uploads/htw/favicon.ico‘;

}

[/box]

 

Change Favicon in Genesis

 

Now after editing copy the entire edited code and paste it to your functions.php file of your child theme.

Follow the track path.

  • Login in to dashboard
  • Click on Appearance then click on Editor
  • Now open up functions.php file
  • Paste the code at the end.
  • Save the file that’s it.

Change Favicon in Genesis WordPress Theme Using Plugin

If you are unable to follow above methods to Change Favicon in Genesis WordPress Theme, then I recommend using a plugin to upload your favicon. But this will require your plugin always remains active. If you deactivate this plugin after upload then your default genesis favicon will reappear again.

Download Genesis Favicon Uploader Plugin

If you are facing any trouble to change favicon in genesis WordPress theme then feel free to ask in comments.

 

 

By Mobashhir

I am founder, designer and author of How To Words. I am SEO expert. My areas of interest are blogging, web designing, web development, online marketing, techology reviews and social media.

31 replies on “How to Change Favicon in Genesis WordPress Theme”

Awesome Article Mubashir!
The best part is you have given 3 methods of doing so πŸ™‚
I am going with the FTP method πŸ˜€
Thanks!

Still using Blogger Platform. Planning to change the platform and moves to WP. This post will be beneficial for me when I move to wordPress. I will bookmark this post. So that It will be easy for me to at that time.

Sriram.
I have also edited my theme file. Because it will not harm your blog. And in this way there is no need to activate favicon uploader plugin every time .

Hi
Well to say frankly i have started my blog on wordpress just few days back want to add favicon image i will follow this tutorial Thanks Got this post at right time πŸ™‚

Hi Mubashir,

Thanks for sharing the methods buddy πŸ˜‰ Changing the favicon can be key in changing your brand, that is for sure.

Ryan

Hello Mubashir! How are you today? I that great and awesome time, especially it is helpful for me. I plan to put the Favicon for my blog but I have not time to research about this. But now you gave it to me directly. Very thanks~

Most folks find it very difficult changing their Genesis theme favicon, thanks for sharing this post, though it would’ve made my life a bit easier if it had been written some years back all the same i will share them with anyone who is looking to change his Genesis theme favicon.

nice Post Mubashir,
I have seen lots of blogs that are using the default genesis favicon and I often wonder if they are just lazy to change the favicon or they dont just know how to do it.
For those that dont know how to do it, I know they will surely find this post helpfu;.

Hi joseph,

Sometime when i am browsing using Firefox, this browser did not show icons for many of blogs. Even sometime most popular websites seems favicon-less. May be most people are mainly using Firefox browser so that they are unaware about their favicon.

Hello Mubashir,
You have indeed break it down for anybody to understand and i must say that i truly did understand what you just said.
I am not using Genesis theme but i am sure it will be useful to all that uses genesis, so i’ll share it across. Thanks!

Hi Mubashir,

I did not know Genesis uses Function to render favicons. Your post will help anybody having Genesis.

In my case, I look for the file of default favicon and replace that file with my favicon file with same name. This simply does all the work for me. I’ll never need that default favicon file, so replacing it with my file is pretty safe! But with your explanation, I learned some more! Thanks.

Hi Mubashir,
I’m going to take the ftp method for now.Plugin for everything is not a good idea because loadtime. πŸ˜‰

Thanks for the tip! I altered the function that returns the favicon link to the following:

return get_stylesheet_directory_uri() . ‘/images/favicon.ico’;

So this theme can be installed on any website without any hard-coded domains in the code.

Hi, i just want to know, how i can float left of my blog image at my homepage? i have tried in my genesis theme settings but not working both right or left.
please check my site homepage and guide me.
http://wpuidev.com/blog

Dear Ali,

Thanks for comment.

I just check your website. Its working fine now. I saw your homepage is displaying post images on left on your homepage.

Thanks Mubashar for reply, you checked very late, now i resolve this by changing my theme. and now its working fine.

Leave a Reply

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