2 Easy Methods on How to add an favicon in WordPress
Wordpress became familiar in the family of blogging and now everyone seems to catch-on something adding some widget or Icon in any website that is hosted on Wordpress. Here we are to discuss on how to add on Favicon or
Bookmark Icon, Website Icon et al in an easy and simple way.
Step 1 :-
How to Add Favicon via ROOT Directory :-
It is simple called as one of the mostly used process to add an favicon. In Wordpress a single URL as yourWEBSITE/favicon.ico
Actual size of an favicon should be of 16x16 pixels and aside if you can create icons of size 16px to 64px which will be used further for bookmarks, desktop icons et all.
1. With a transparent background create an PNG favicon.
2. Post creating an PNG file just convert it to ICO file with ConvertICO.com
3. After finishing above 2 steps, upload .ico file to root directory of your website ex - public_html or www/
4. Check manually whether favicon.ico is being visible or not.
Step 2 :-
Link Tag to Favicon :-
This process of linking tag to favicon is highly recommended as it finishes with uploading favicon.ico file which is in format of PNG, GIF and various icon models.
1. Once your done just with 1:1 resolution create your icon and save it to a directory file where you can directly access. In general save it into Images folder of the theme like " /public_html/wp-content/themes/yourcurrenttheme/images/favicon.png"
2. Next go to header.php file in your theme which also includes <head>
3. </head> before this add below mentioned code to get your favicon displayed
/* ICO File - Root Directory */
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
/* PNG File - Root Directory */
<link rel="shortcut icon" href="/favicon.png" type="image/png" />
/* GIF File - Root Directory */
<link rel="shortcut icon" href="/favicon.gif" type="image/gif" />
/* ICO File - WordPress Theme Image Directory */
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>images/favicon.ico" type="image/x-icon" />
/* PNG File - WordPress Theme Image Directory */
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>images/favicon.png" type="image/png" />
/* GIF File - WordPress Theme Image Directory */
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>images/favicon.gif" type="image/gif" />
Post Author - Lalith (How-To)
0 Comments
Post a Comment