Simple Ideas To Learn How To Code
Add A Favicon to Your WordPress Blog
Wordpress

Add A Favicon to Your WordPress Blog

A favicon is the tiny icon that appears in the tab next to your domain name. The favicon is the 16 x 16 pixels small icon what we generally see in our browser tabs and it is possible to add favicon to any web page, but the methods would vary. Do you know how to add a wordpress favicon? Don’t worry, let me explain the processes and its importance.

Websites are intended to add value to the visitors and build trust to the brand. So, it will be possible by only focusing on branding. A favicon is the foremost thing about branding to establish own specific logo and  we generally use a part of our logo or a separate icon for that. So, the visitors could acknowledge a website just seeing the tab. That’s why I think it’s really necessary in order to take your brand to top.

How to Create a Fav Icon?

There are several ways to create favicons, but in general, you would need to have a graphics program that can create a JPEG, GIF or PNG file that is at least 512 wide pixels by 512 pixels tall. Here are some general guidelines for making a favicon:

  • WordPress asks that the file be at least 512 pixels wide by 512 pixels tall
  • Keep the image to 72 DPI
  • Keep the numbers of the colors to a minimum
  • Keep the file size small

There are many free favicon creation programs on the web such as favicon. These programs provide a one-stop service for creating the graphic so that you can use it for your website.

How to add fav icon on your WordPress website?

Adding favicon using header.php

Login to the wordpress admin area, www.yourwebsite.com/wp-admin. And, goto Appearance > Editor and select the file ‘header.php’ from the list.

How to add fav icon on your WordPress website

If you have decided to use ICO, you should add this code to your theme header.php before closing </head>:

<link rel="shortcut icon" type="image/x-icon" href="http://www.yoursite.com/favicon.ico" />

Make sure you have replaced the url with your favicon.ico url quoted in href attribute. If you have uploaded the file to the root folder, the url would be http://www.yoursite.com/favicon.ico.

If you have decided to use JPEG or PNG, these codes would work on header.php before </head>:

<link rel="icon" type="image/png" href="http://www.yoursite.com/favicon.jpg" />

OR,

<link rel="icon" type="image/png" href="http://www.yoursite.com/favicon.png" />

Again, don’t forget to replace with your file url.

If you have decided to use an animated favicon, you should use these two lines in header.php before </head>:

<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico" />
<link rel="icon" type="image/gif" href="http://www.yoursite.com/favicon.gif" />

Here you will need two lines, one for ico and another for gif. Because many of the browsers don’t support gif. So they would use ico instead. And the supported browsers will use animated gif as specified. Once again, don’t forget to replace with your own file urls.

Adding favicon using Functions.php

Favicon can be handled just adding in a function. Copy the code as specified and place on your theme functions.php:

function my_favicon() {
echo '<link rel="shortcut icon" type="image/x-icon" href="http://www.yoursite.com/favicon.ico" />';
}
add_action('wp_head', 'my_favicon');

You have to replace with your web url after the href attribute.

Leave a Reply

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