FnClick
GET IN TOUCH
WordPress

GIFs as Favicon

This code will make a .gif file as Favicon on the site.

First, convert the gif images to .png images and rename the .png as 0.png, 1.png, and so on. Add all images to the favicon folder and upload them to the required theme folder.

Then add the below code to the functions.php file

function add_site_favicon() {
    if(wp_is_mobile()){
?>
<link rel="icon" type="image/png" href="<?php echo get_template_directory_uri(); ?>/favicon/0.png">
<?php }else{ ?>
<link id="favicon" rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/favicon/0.png" type="image/x-icon">
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var faviconIndex = 0;
        var favicon = document.getElementById('favicon');
        setInterval(function() {
            favicon.href = "<?php echo get_template_directory_uri(); ?>/favicon/" + faviconIndex + ".png";
            faviconIndex++;
            faviconIndex %= 3;
        }, 500);
    }, false);
</script>
<?php
    }
}
add_action('wp_head', 'add_site_favicon' );
add_action('login_head', 'add_site_favicon');
add_action('admin_head', 'add_site_favicon');

Note: Change the faviconIndex number (currently set as 3) to the total number of images you have in the favicon folder. And change the speed of the image change as per required (currently set to 500 i.e 0.5s).

Can also be used on the non-WordPress site.

Add the below code inside the HEAD tag i.e. <head>
<!-- Add code here -->
</head>

<link id="favicon" rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/favicon/0.png" type="image/x-icon">
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var faviconIndex = 0;
        var favicon = document.getElementById('favicon');
        setInterval(function() {
            favicon.href = "ADD_YOUR_URL_PATHS_HERE/favicon/" + faviconIndex + ".png";
            faviconIndex++;
            faviconIndex %= ADD_TOTAL_NUM_OF_.PNG_IMAGES;
        }, ADD_REQ_SPEED_HERE);
    }, false);
</script>