Wednesday, June 28, 2017
728x90 V3

How to Add a Favicon to WordPress site

Favicon? What the hell is favicon people? Well, favicon is a tiny picture that appear’s next to your website title in the browser, in tab. Is favicon important? Yes it is, because visitors will recognize your site by that favicon, they will know that they search exactly your site, favicon makes your e-brand.Users usually have many tabs open in their browser window’s. This hides your website’s title as the number of tabs increase. The favicon helps user’s identify your website and quickly switch to the tab they want, in this situation, your site. In this short but important tutorial i will show you how to add custom favicon and build brand of your blog or site! Follow me step by step!

How to create a favicon

Favicon is a simple square image, it’s 32×32 pixles or 16×16 pixels. You can make favicon in Image Editors like Photoshop, illustrator etc. , make your favicon in 150×150 pixels dimensions then resize it to 32×32 or 16×16 pixels because it’s hard to work  on 12×12 or 32×32 board. Save your file as .PNG. It’s important to note that older versions of Internet Explorer do not display .png favicons, you must have .ico image files. To make sure that your favicon will show up in all browsers convert 16×16  image to .ico file by using online a tool favicon generator.

Screenshot_6

Add image to FTP

Now when you got .ico file you need to add a image to your sites FTP directory by using filezilla or cPanel. Just upload .ico file to your wordpress directory (ex. www.ditution.com/favicon.ico ).

Screenshot_5

Adding code

Now you must edit code, in header.php file add these lines:

<link rel=”icon” href=”http://www.ditution.com/favicon.ico” type=”image/x-icon” />
2
<link rel=”shortcut icon” href=”http://www.ditution.com/favicon.ico” type=”image/x-icon” />
Just replace the ditution.com with your site’s URL and you can save files and enjoy in your new favicon. It’s easy and it’s simple!

Another way

What if your theme does not have header.php file, well that’s not a problem, there is a plugin that will do this job for you! Install and activate Install Header and Footers . After activating go to Settings > Insert Headers and Footers and paste the code provided above in the header section and save your settings. That will be it, you will have your custom favicon!

If you don’t want to upload images to your FTP just install All in One Favicon plugin and enjoy!

I hope that this tutorial helped you, stay tutioned! 🙂

About Dimitrije Zivadinovic (Di)

Dimitrije Zivadinovic (Di)
Hey there, I'm Dimitrije Zivadinovic and this is my blog! I am a blogger, and.. No i am just a blogger, i know something about blogging platforms and i wanted to share my knowledge with you. If you have anything to ask me, feel free to hit me up via social media or leave a comment down bellow!

Check Also

How to improve the security of your WordPress site

Well guys a lot of you ask me, “how can i protect my site”, “how ...

Leave a Reply

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