How To Add A Favicon To Your WordPress Website

Posted on April 11, 2014 by in Tips & Tricks | 35 comments

How To Add A Favicon To Your WordPress Website

Favicons, short for favorite icons, are a small but significant part of branding a website. They are used to display a 16×16 or 32×32 pixel image before the page title in your browser. Favicons are also used for bookmarks in browsers and touchscreen devices.

Over the last few years, it has become commonplace for people to browse the internet using multiple tabs. Which is why I believe the favicon has become more important; you need to make your website stand out in a crowded browser.

Favicon Tabs

Favicons help distinguish websites in browsers.

In this article, I would like to show how to create a favicon image and add it to your WordPress website. The whole process should only take you five to ten minutes.

The ICO Image File Format

Favicons were initially introduced with Internet Explorer 5 in 1999. Website owners had to save the file as favicon.ico and place it in the root of their domain e.g. Today, all major browsers support the use of PNG and GIF images for favicons. JPEG images and animated GIFs are also supported by Firefox, Google Chrome, and Opera. Despite this, it is still better to save your favicon image in the ICO file format.

Firstly, PNG and GIF images are not supported by some older browsers. Secondly, modern browsers will always try and look for a favicon.ico file in the root of your domain; even if the favicon has not been declared using a <link> shortcut (more on that later). If a favicon.ico file is not located at the root of your domain, it may return a not found error to the browser.

Another fantastic feature of the ICO image format is the ability to add multiple sizes to the one file. For example, you could save a favicon image with 16×16, 32×32, and 48×48 images. This allows browsers to choose the appropriate one when displaying your favicon.ico. For example, some browsers will use the 16×16 favicon image, however Internet Explorer 10 uses the 32×32 image.

How to Create a Favicon Image

The best way to create a favicon.ico image is to first create a square PNG image. Like PNGs, the ICO file format supports transparency. Therefore, by saving your favicon in the PNG format initially, you can keep transparency in your converted ICO image.

It is important to keep your favicon image simple as it will be displayed in the 16×16 pixel format in most browsers. Use your website’s logo or main symbol if you can. For example, Apple use their iconic symbol of an apple. If your logo does have a symbol, you could use the first letter of your website name.

Elegant Themes Logo

The five point symbol that is used in the Elegant Themes logo was chosen as the Elegant Themes favicon.

Few graphic applications have support for saving images in the ICO file format. There are workarounds to this, however the easiest solution is convert your square image using an online favicon generator.

There are many favicon generators available online, such as Convertico and Unfortunately, most of these do not support alpha transparency. They will therefore replace any transparent areas with a white background.

The solution that I have use for many years comes from Dynamic Drive. In addition to supporting transparency, their favicon generator tool also allows you to merge 32×32 and 48×48 images into your favicon.ico file. All you have to do is ensure the PNG or GIF image that you upload is larger than 48×48 pixels.

Dynamic Drive Favicon Generator

Dynamic Drive supports transparency and 32×32 and 48×48 pixel favicons.

Save the favicon.ico that Dynamic Drive generatrs to your computer. It will look something like this: Elegant Themes Image

How To Add A Favicon To A Website Using Elegant Themes

If you are using an Elegant Theme, then uploading your new favicon image is easy! In the ePanel Theme Options page, look for the Favicon settings box. Here you can input the URL of your favicon image, or click the Upload Image button to upload your favicon.


Once it has been uploaded, click the “Use For Favicon” button to automatically input your favicon URL into the settings box. That’s it, you’re done!

How To Add A Favicon To A Website That Isn’t Using Elegant Themes

If you aren’t using an ET theme, don’t worry, I will still go over how to integrate your favicon images in various situations. Many WordPress themes now come with a favicon uploader that lets you upload your favicon directly through the admin area just like our themes do, so be sure to check your theme options page first.

Theme Favicon Uploader

More and more WordPress themes are coming with a built-in favicon uploader.

If there are no favicon settings in your theme options, then your WordPress theme may come packaged with a favicon image. Many theme developers include an example favicon.ico image in the root of the theme, or in the images folder. If your theme does have a favicon.ico file located within the theme files, your theme will already be configured for favicons.

Therefore, all you have to do is overwrite the existing favicon file in order to display your custom favicon. You can do this using a File Transfer Protocol client such as FileZilla, or through your host’s file manager.

If your WordPress theme has no existing support for favicons, you need to specify where your favicon is located. Thankfully, this only takes a minute to do. All you have to do is insert the following code into the <head> area of your website header (e.g. header.php):

<link rel="icon" type="image/x-icon" href="/favicon.ico">

The type attribute specifies the kind of image that you have used for the favicon. You can see how to define the image attribute below:

  • ICO = image/x-icon
  • PNG = image/png
  • GIF = image/gif
  • JPEG or JPG = image/jpeg

If you are placing the favicon.ico file in the root of your theme folder (e.g., you would use:

<link rel="icon" type="image/x-icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico">

If you place the favicon.ico within your theme images folder, you would use:

<link rel="icon" type="image/x-icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/favicon.ico">

Use this code if you upload the favicon.ico image to the root of your domain:

<link rel="icon" type="image/x-icon" href="">

Once you have integrated your favicon on your website, you should see it in the browser tab at the top of the page. If it is not displaying, visit the URL of the favicon image and refresh the page. You may find that it will show correctly when you view your website after doing that. If not, the favicon image location is probably incorrect.

There may be a temptation to just upload a favicon.ico to the root of your domain and not go through the hassle of defining it through your WordPress theme. This is fine for most browsers, however some browsers do not search for a favicon image at As such, you need to define it.

I hope you have found this tutorial useful. If so, I encourage you to subscribe to the Elegant Themes Blog for future updates. πŸ™‚

Article thumbnail image by davooda /


  1. Hey Kevin, let me add to this article this excellent site for creating a unique favicon:

    How that site can help? He creates custom favicon for all devices, not only the .ico file! Look they introduction:

    “Generate the favicon pictures and HTML code that work on all major browsers and platforms

    As a web designer or developer, you are creating your brand new web project. It is beautiful and was designed for PC, smartphones, tablets…

    If your site looks great on most platforms, why is your favicon a small picture that only works on desktop? Your web site design is responsive, so should be your favicon.

    Instead of giving you a single favicon.ico file, RealFaviconGenerator generates all the pictures and HTML code you need to get a cool, mobile- and tablet-ready favicon.”

    I created favicons in this site for all my WordPress Sites and they work very well on mobile devices as well!


    • Kevin Muldoon

      Thanks for the suggestion Darlan. That looks like a fantastic little service. I just tried it out. I love how it creates the larger icons for Windows 8 devices.

      Great find πŸ™‚


      • That service is currently in beta but in fact works very well. I don’t have an Android or Windows Phone to test but in iOS when I add one of my sites to the screen as a favorite the icon looks great!

        I really like that.


    • Thank’s, Darlan!
      Really nice site, I’ll give it a try

    • Thanx Darlan! Great tool.

    • Thanks darlin’ πŸ˜‰

      Ahh the ET community is alive and well. Thanks for sharing all the great resources everybody. my favicon needs work …. πŸ™

      I might try out some of the suggestions πŸ˜€

      Thanks Kev … you are a powerhouse of information.
      My heartbleeds from an overload of technology!

  2. Nice little tips for WordPress based favicon making.

    • tne su khbr pdi. nice vali..

  3. Thanks for the information was trying to figure out how to go about creating a favicon. Really like your articles and information stream and how to do things with WordPress and of course Elegant Themes.

  4. Good tips, Kevin. One question – Do I need to do anything differently for the mobile version of the website?

    • Kevin Muldoon

      No. Mobile browsers utilize favicons in the same way. πŸ™‚

  5. I never knew there was so much to know about favicons πŸ™‚

    • Kevin Muldoon

      I can’t believe the number of size options Favicomatic offers. That’s ridiculous!

      • Hi Kevin!
        What do you mean by “ridiculous”?
        Do you think the options are a little… too much?
        Sincerely interested in your opinion, since i’m the guy who made favicomatic πŸ™‚

        (@Dan, thanks for sharing!)

        • Kevin Muldoon

          Hi Peqpe,

          Sorry, I didn’t mean that in a negative way πŸ™‚

          I meant that there sheer number of options on offer was so much more than what I expected. No other favicon service offers that.


  6. Hello, it is important for seo favicon?, congratulations for article

    • Kevin Muldoon

      No. It’s more for branding πŸ™‚

  7. Hi Kevin,
    Well, I used the same site not for favicon making but for optimizing my images. Will surely give this a try to set a favicon.

  8. The real favicon generator site is the way to go, but I’m not sure of the details. After I download the generated favicons, do I create a file favicon.ico, put the images into that folder and have it as A folder is needed?

    Then there’s the code to copy and download to put into the header…This is where I need help. If I’m using DIVI or another theme, how do I do this? With just one image, it’s easy – just add the link in appearance. Do I now have to add all those lines of code that point to the images in favicon.ico to every page, and where and how?

  9. Great post, tks for sharing.
    I added favicon following these steps and it worked really well.
    A couple of minutes later, i went to Pinterest to validate Rich Pins and the favicon was missing there. After that, the favicon, that was perfectly working before on the website, disappeared (not sure if it’s Rich Pins Validator’s fault, but it doesn’t seem coincidence, as it happened right after).
    Any idea how could i fix it?
    Tks in advance!

  10. YES!! Thank you so much for posting this. I have such a hard time with changing things on my site, but your instructions made it so easy. I’ve tried to put a favicon on my site before, and never had success, but this time I did! Thanks again!!

  11. Hmmm. Can’t get it to work. Created a 32×32 .ICO file and uploaded it through the epanel and it’s a no go. Any ideas of how I’m messing it up?

  12. Thank’s a lot Kevin for your tips, always insightfull informations. And thank you to Elegant Theme for your blog about wordpress and your things. I have all your topics in my favorite and it’s the first place i look when i need help ! πŸ™‚

  13. Is there any reason that the Favicon uploader may not work. It works on most of my Divi Theme installs, but on a couple it does not. These were already existing websites that had the genesis theme installed. I switched all sites over to divi, I then deleted the genesis theme’s because the favicon was not appearing, still does not work.

    Any suggestions? Thanks – Love your product!

  14. Thanks a lot!!! πŸ™‚

  15. The easiest way I found is, go to Dashboard->Appearance->Customize->Site Identity

    No need to create a separate fevicon image. Just upload the image of any size and it will be done

    • Great hindsightβ€”the site identity feature was added in WordPress 4.3, long after this article was published. But perhaps an opportunity for Kevin to edit the complicated procedure for non-Elegant Themes to reflect the new, much simpler, built-in method.

    • OH MY GOSH!!!!!!!!!!! I have been trying to fix my favicon forever under Divi / Theme Options, but it would not update.

      Going to the Dashboard, like Abhishek suggested worked perfectly! I had forgotten I had used that before.

      Thank you, Abhishek!

437,821 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest