WPdiscounts
Search
Top Searches:aMember Pro, WP eStore, WP Photo Seller,...
Skip to content
    • Home
    • about WPdiscounts
      • privacy policy
      • terms of service & disclosure
    • cashback disclaimer
    • cashback form
      • Thank You!
    • check out the best stores to buy the coolest premium WordPress plugins and themes at user friendly prices!
    • Contact Us
      • Submit WordPress Deal
      • Thank You!
    • coupons
      • Affiliate Link Manager discount
      • WP Affiliate Platform discount
      • WP eMember discount
      • WP eStore discount
      • WP Lightbox Ultimate discount
      • WP PDF Stamper discount
      • WP Photo Seller discount
    • out
    • testimonials
    • the blog

How to install favicons and mobile icons on your WordPress site

Favicons are those cute 16 x 16 pixels images that make your site easily identifiable when multiple browser tabs are open. More and more WordPress sites are using favicons are as a tool to establish visual identity at first glance. It’s definitely one great way to enforce brand consistency and make sure that your pages or posts stand out from the crowd.

Getting favicons set up should be a priority for every WordPress site owner. The good news is that it takes just a few minutes of your time (sometimes even less), and you don’t even need to hire a graphic designer or spend money to get it done. This post not only points out the importance of favicons for your burgeoning brand, but also lays out elaborate steps that you can follow to get pretty favicons and beautiful mobile icons set up for your site.

Favicons – a little background check

Favicons were first introduced with Microsoft’s Internet Explorer 5 browser back in 1999. To make it work, website owners were required to strictly save the file as favicon.ico, and then put it in the root folder of their domain (e.g. wpdiscounts.com/favicon.ico). Fast forward to today and all major browsers (including Safari, Chrome, Mozilla Firefox, Opera, etc) support favicons in diverse file formats such as PNG, GIF, and JPEG. However, we still recommend that you save your favicons in the standard ICO file format.


Here’s why?

Some of the older browsers do not support GIF or PNG images. Furthermore, browsers have been conditioned to always look for the favicon.ico file inside the root folder of your domain. If this file is not located in the root of your domain, it might return a ‘not found error’ to the browser.

Another key reason why you should stick to the ICO file format is that because it gives you the ability to use multiple file sizes for one image. For instance, you may save your favicon image with 16 x 16, 32 x 32, and 48 x 48 pixel images. This gives browsers a little bit of flexibility to choose the most appropriate favicon. As it happens, different browsers have different preferred sizes.

Note: You don’t really have to follow this old method (placing your favicon in root) today. As you’ll see below, there are easier and more straightforward ways to go about it.


Installing a favicon

There are various methods in which you can install favicons for your WordPress sites. To make it all easy for you to understand, we have basically simplified it all to two options: The hard way, and the easy way. If you want to do a little bit of background learning on how favicons work, read on both options. However, if you just want to get it done and enjoy the results, you can jump over to option 2.

OPTION 1 – THE HARD WAY

Create a favicon image

You may choose to use your site logo as the favicon icon for your site (this works better when you have a simple logo with very limited details). Alternatively, you can find a suitable image and save it as a square PNG file using Photoshop, GIMP, or any other image manipulation program at your disposal. Favicon images work better when they have a transparent background. Just like the ICO file format, PNG supports transparency. However, you’re free to use an image with a background color of your choice and work with any common file format (including JPEG and GIF formats).

Note: if the image you want to use for your favicon is rectangular, make sure to crop it so that it has square dimensions.

Add the favicon to your WordPress theme

Most WordPress themes have a favicon uploading functionality within their customization options. First things first, go to your theme options and customization sections to check whether your theme has a favicon uploader like the one shown on the right.

If one is available, you should simply upload the file you created above, and you’ll be ready to go.

Manually add your favicon

Even if your theme isn’t packaged with this functionality, many other WordPress themes come with a pre-installed favicon that you can just simply replace. This placeholder favicon is usually placed as a favicon.ico file inside the root of the theme or within the images folder. All you need to do is overwrite this file in order to show your custom favicon. Check to see if your site already displays a template favicon that you didn’t install yourself.

If your site has no current support for favicons, you’ll need to upload one and write some code to specify where it’s located. Sounds like much? No worries – it just takes a minute of your time. All you’ve got to do is insert the code below into the <head> section of your website header (i.e. the header.php file).

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

The type field is used to specify your image file format. You have the following options based on the file format of the favicon you uploaded.

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

If you upload the favicon to the root of your domain, then you’d tweak the code a bit so that it looks like this:

<link rel=”icon” type=”image/x-icon” href=”http://www.yourwebsite.com/favicon.ico”>

Once you’ve done this, simply refresh your browser tab to see if the favicon you just added reflects. If not, try a different browser either on your PC or mobile phone. If it still doesn’t show, you probably did something wrong and need to work with the easy way out explained a few paragraphs below.

What’s wrong with doing it manually?

If you love to make tweaks on your WordPress site, you’ll probably enjoy using this method to install favicons. But there’s just one thing wrong with it – it might not create a responsive favicon. That is, your favicon will only show on web browsers, but might not be available as a mobile icon on Android, iOS or Windows smartphones.


OPTION 2 – THE EASY WAY

If you don’t want to go through the hustle of adding code to get your favicon showing, there’s an easy way out, and it involves using a reliable, effective plugin. Philippe Bernard, the founder of RealFaviconGenerator plugin, says that most favicons don’t look great, and they aren’t mobile friendly by default. Philippe’s popular plugin makes it possible for site owners to create excellent PC favicons, as well as decent mobile icons.

Here’s how to go about it

a) Create a square image that’s at least 260 x 260 pixels in size. You might make it 520 x 520 pixels if you want. The important thing is that it should meet the minimum size requirement, and should be square as well.

b) Install and activate the RealFaviconGenerator plugin to your WordPress site.

c) You should be able to access this plugin from Settings in your WordPress dashboard (Settings>favicon). Alternatively, you can just directly navigate to Appearance>favicon.

 

d) Upload your favicon image to see a screen that allows you to edit how your image looks as a mobile icon on Android and iOS.

You might notice that transparent images usually don’t look so great on iOS devices. If you deem it necessary, add a background to your favicon. The plugin’s favicon editor allows you to choose a background color and preview how your favicon will look like. Better yet, you can specify different colors and settings for different devices. That means that you can independently optimize the appearance of your favicon on iOS devices, Windows devices, Android, Chrome, etc. Feel free to play with the settings and options on this screen to see what works best for your favicon.

e) Once you have got everything configured to your preferences, simply click on the ‘Generate your Favicons and HTML code’ button located somewhere near the bottom of your screen. This essentially does the hard work on your behalf and generates the HTML code that’s added to the header of your site so that your favicons show on PC and mobile devices. RealFaviconGenerator will give you a notification that the favicon has been installed, and shows you a preview of how it looks on iOS, PC, Windows, Android Chrome, Safari, etc.

What we love about this plugin is that it’s easy to use, and does a great job creating lovely favicons and mobile icons for your WordPress site.

In addition to RealFaviconGenerator, other cool favicon and mobile icon generating plugins for WordPress include Heroic Favicon Generator, All in One favicon, Favicon Rotator, MultiCons, and CBnet.


Conclusion

Just like with many other tasks, WordPress makes adding favicons a piece of cake. Better yet, you don’t need to pay a designer to do anything for you, and most of the cool favicon generator plugins available are 100% free. So there’s no reason why you shouldn’t take advantage of this important tool to boost the visual identity of your website. It just takes a little bit of your time, get it done!

PUBLISHED ON: March 5, 2017
LAST UPDATED ON: March 28, 2017
POSTED UNDER: Tutorials

Related articles

how icons can improve the user experience
How Social Media Reviews Impact Brand Reputation
The Secret to WordPress Website Migration
Get More Clients with an Efficient WordPress Online Scheduling System
Improve Conversion Rates with Effective Design Elements

written by: Renee

Renee is a student from Europe with a passion for blogging. She writes about WordPress and she's also a passionate web designer. Besides WordPress she loves to read, shop, play tennis and indulge her passion for dark chocolate. She also enjoys chilling with her friends, listening to music, and playing computer games.

Disclosure: This post may contain affiliate links, meaning that if you click on one of the links and purchase an item, we may receive a commission (at no additional cost to you). All opinions however are our own and we do not accept payments for positive reviews.

2 COMMENTS

Favor
6 years ago

One more reccomended solution http://onlinefavicon.com
fantastic online tool for creating favicons

Reply
Renee
6 years ago

thanks for your addition!

Reply

Comments are closed.

featured articles

  • WordPress Cyber Monday Deals 2020 (and Black Friday Discounts!)
  • WordPress Cyber Monday Deals and Discounts for 2017
  • The best WordPress Christmas 2020 deals and New Year 2021 discounts
  • How to install favicons and mobile icons on your WordPress site
  • How Social Media Reviews Impact Brand Reputation
  • The best WordPress Christmas 2017 deals and New Year 2018 discounts

FEATURED DEALS

  • aMember Pro discount code
  • PremiumPress discount coupon
  • WP Affiliate Platform discount
  • Pinpoint Booking System coupon code

Keep in touch

© Copyright 2012-2023 WPdiscounts.com - All rights reserved. Logos copyrights or trademarks are owned by their respective companies and organizations.