Elegant Themes Blog

Stay up to date with our most recent news and updates

How To Add A Favicon To Your WordPress Website

Posted on April 11 by in Tips & Tricks | 24 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. www.elegantthemes.com/favicon.ico. 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 Favicon.co.uk. 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.

epanel-favicon-upload

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. www.yourwebsite.com/wp-content/themes/twentyfourteen/favicon.ico), 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="http://www.yourwebsite.com/favicon.ico">

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 http://www.yourwebsite.com/favicon.ico. 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 / shutterstock.com

24 Comments

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

    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!

    Regards!

    • 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 :)

      Kevin

      • 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.

        Darlan

        • Yep, using that service as well.
          Very easy und useful.

          Thomas

    • 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.

      http://affinityshop.com.au/ my favicon needs work …. :(

      I might try out some of the suggestions :D

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

    • tne su khbr pdi. nice vali..

  2. 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.

  3. 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. :)

  4. 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.

          Kevin

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

  6. 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.

  7. 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 site.com/favicon.ico? 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?

Leave a Reply

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

Current day month ye@r *

Join 243,989 Happy Customers And Get Access To Our Entire Collection Of 87 Beautiful Themes For The Price Of One

We offer a 30 Day Money Back Guarantee, so joining is risk-free!

Sign Up Today