Adding a Favicon correctly in WordPress

There are 19 different ways to “load” a favicon. You can put it in the of the site, just like how you would with a static site. I tend to a lot of people recommending of dropping your favicon into the root of your site, for example: https://aaronreimann.com/favicon.ico. But, what if people switch hosting and they only grab the wp-content directory?

I think it is best is to have it integrated into the theme, by using the steps:

1) Grab your PNG/GIF/JPG and go to http://favicon-generator.org/ and upload the file. They will generate a true .ico file at 16px by 16px.

2) Take your PNG at 152×152 and put it in your theme directory, in (for this example) /images. Put your .ico file you just downloaded and put it in the same directory.

3) Drop in this code in your functions.php in your theme.

function twpw_add_favicon() { ?>
    
    

Note: if you are theming and you are wanting to load the favicon from the "Parent Theme" use get_template_directory_uri() instead of get_stylesheet_directory_uri():

get_template_directory_uri();

Load your home page and you should have your favicon in place.

1 Comments

  1. Aaron on February 13, 2016 at 2:08 am

    This is now out of date. WordPress now has this built into the Customizer.

Leave a Comment





This site uses Akismet to reduce spam. Learn how your comment data is processed.