Meks
Do you know you can try any of our premium WordPress themes for free?Show me the themes
WordPress Favicon – how to create and add one on your site

WordPress Favicon – how to create and add one on your site

8Shares

Struggling on how to create and add a WordPress Favicon? We’ve got you covered, read our guide and you’ll learn in no time!

Many of you asked us how to create and add a WordPress Favicon to your blog or site. This is why I prepared this all-in-one guide to help you each step of the way. How to add or change it, how to create it, why is it essential and more. Just sit back and read through thoroughly.

What is a favicon?

According to Wikipedia and the rest of relevant sources, a favicon or a tiny icon is a piece of the file that contains one (or more) small icons that are associated with a specific site or web page. Hm, ok. But why and what is it for? Well, you know how you open a tab and write some URL-s, and they all appear in separate tabs, and you get all that little images? Those images are favicons, and they serve as an easy reminder of your website. Especially if you have too many tabs open and lose track of what and where you’ve been looking something for.

Top WP Hosting recommended by Meks

Initially, they first became public in 1999. by Microsoft’s release of Internet Explorer 5. In that time, it was used as a bookmarks addition and was right next to the URL in the address bar that was bookmarked. Thus the name favicon – Favorites icon. Due to its popularity and use, it was quickly standardized by the World Wide Web Consortium for better and more quality use. All that for such a tiny thing?

Why do you need a favicon in WordPress (or any other type of site)?

You’re probably wondering „How can something that small be of any importance?“. Well, let me ask you a few questions. Bear with me.

  1. Do you want to build your brand?
  2. Do you want people to know you?
  3. Do you want people to remember you?

Having something that small can help you achieve all these goals I’ve mentioned. Just think of brands like Amazon, Facebook, Github, MailChimp, deviantART and more.. or, just look at this image – how many brands you recognize there:

WordPress favicon examples

Now you get it. These little icons are quite useful whether you’re a company or a person trying to self-brand. Either way, favicons help your blog or site stand out and be remembered. It triggers a visual connection to your business, company or brand. Giving the fact that a favicon is most usually smaller version of your logo or typography, it’s like a stamp of your brand and people will remember it easily.

WordPress Favicon Pinterest visual

How to add a favicon in WordPress

To add a favicon to your WordPress blog or site, you’ll need an image file ready or – if you know how to code – a snippet to implement after the tag. Once you have image ready, this is how you add it. Login to your WordPress site and follow these steps:

  • Go to Administration Screen > Appearance > Customize
  • Click Site Identity
  • Click Select Image below Site Icon, upload the image and click Save

Congratulations, your site is now the proud owner of a favicon! And, without having to mess with code or anything 🙂 And if it still sounds confusing or not quite clear, take a look at our explainer video and how we add one in our Gridlove theme:

But, wait… How do you create WordPress favicon in the first place?

How to create a favicon

So, now that you know all you need on why favicons are important, let me explain to you how to create one. If you’re working for a company and have a web or graphic designer, you’re lucky. Don’t have to do anything yourself, just tell them what you need and they’ll deliver. But, for all of you who don’t work in a company or don’t have a budget for it, these are the ways you can create a favicon by yourselves.

You’ll need some image editing tool and a logo or an image you want to transform into a favicon. Tools like GIMP, Microsoft Paint, Inkscape, Photoshop will do. Open the image editing tool, create a 512×512 pixel file and put a logo or whatever image you want in it. Why in this size? Well, you need a right amount of space to create your design on so that when you scale it, it won’t lose on its quality. Or, you can just use that one, since it is the one recommended by WordPress too.

Wondering what an .ico file format is? It’s an image file format for computer icons in Microsoft Windows. So, not just only for favicon purposes, but also for all that files, folders and program icons we all have in our computers. Back to the favicon.ico creating.

When you’re all finished with the image design, it’s time to convert that image into the favicon.ico file. And for that purpose, I’m recommending these few tools that can help you create a favicon both still or as an animated gif. Just try out and choose the ones you like the most.

FavIcon from Pics

Great tool to create favicons for free! All you need is an image or a logo, and you’re halfway there. This is how you get your own little favicon for WordPress or any other site.

  • Choose an image from your computer
  • Click on the Generate FavIcon.ico button
  • Download FavIcon package

In it, you’ll not only get a favicon.ico file for your WordPress site or blog, but also a .gif version you can use instead. Cool, right?

Favicon.cc

Another cool and free tool that helps you create an 8-bit type of favicon in no time. You can either create a new one from scratch or import image to convert it to .ico file. When uploading, you can choose to keep dimensions or shrink them to the square icon, up to you. And if you’re looking for inspiration, you can always browse among the Latest or the Top Rated Favicons there.

Favicon Generator

Favicon generator is a tool that works in all browsers and for all platforms. And, just like in previous ones, you can use it simply by uploading your image file and let the generator do the rest. What’s great about this specific tool is that you immediately get the preview of your favicon icon. Whether it’s for your smartphone app, or desktop computer or any other form. Also, you can later check how it performs merely by pasting your site URL. Or, if you want to see how your current favicon is optimized, handy trick indeed!

Once you’re happy with the result, you click on the Generate your Favicons and HTML code (for more advanced users) and collect the package. All that’s left to do is install your brand new favicon – done and done!

WordPress Favicon plugins

Just in case you don’t want to deal with the implementation or to change anything by yourself, you can always use some of the plugins explicitly designed for favicons. Here, to recommend a few from the WordPress.org Depository.

Favicon by RealFaviconGenerator

wordpress-favicon-plugin-real-favicon-generator

This plugin works with WordPress versions 3.5 and later. Helps you add a favicon where it’s supposed to be and also generates ones from already uploaded images! And if the name sounds familiar to you, it’s the same guys that are behind the Favicon generator tool.

All In One Favicon

wordpress-favicon-plugin-all-in-one-favicon

An easy plugin that adds favicons to your blog/site and admin pages. Supports all the favicon types: .ico, .gif and .png and Apple Touch icons as well.

Favicon Rotator

wordpress-favicon-plugin-favicon-rotator

A free WordPress plugin that helps you customize your favicon, but can also make it more fun by displaying random images to your visitors – if you upload multiple, to begin with. Nice, yes?

Wrapping up

Hopefully, you now get some more insights and idea of favicon importance and how to add one to your site. Do let us know how it all went and if you had any issues in any of the steps. Furthermore, share with us some other favicon maker tools you use or what’s the easiest way for you to add it.

8Shares

Tags: , ,

Ivana Cirkovic

Ivana is a Digital Marketing, PR and Social Media consultant with over nine years experience in the field. She is also a WordPress enthusiast and an active member of WordPress community who lives online almost 24/7. In love with Twitter, WP, photography and NYC.

Try theme now for free!
  • Access to a copy of the demo website
  • Full access to the theme options
  • No credit card required

* We will send you an occasional newsletter with special offers, news & theme updates but you can unsubscribe at any time.

Meks