Share this post

First of all, what is a favicon?

favicon
ˈfavɪkɒn,ˈfeɪvɪkɒn/Submit
noun

an icon associated with a particular website, typically displayed in the address bar of a browser accessing the site or next to the site name in a user’s list of bookmarks.

What is the issue I am experiencing?

I have noticed on a WordPress website I am developing that the old favicon browser image has returned. Yes returned.

The new favicon was showing properly but now – months later – the old one has suddenly reappeared!

Therefore I am going to use FEEL4 to lead me down a path to find the answers I need to fix the issue.

FEEL4 PATH

FOCUS

I am focusing on making sure all major browsers show my website’s newest favicon and I want fix this within the next hour.

ENERGIZE

I feel energized to get this done because I love solving weird tech issues like this.

ENGAGE & LEARN

I am engaging and learning things via the following actions:

1. I am engaging with checking the following:

– checking I have flushed all cache from any cache plugins I am using on the website.

– checking the wp-admin backend of the WordPress settings for the theme I am using where it allows you to set a favicon. To see if I have the wrong favicon!

– checking different browsers to see if they show the wrong favicon, I have learnt Edge doesn’t show a favicon and Firefox is showing the wrong one too.

– checking the ftp directory folders for any old favicons, I have learnt there are none.

– adding a new set of favicons to my ftp home directory by using this favicon generator to be doubly certain all is correct.

– checking for faults using this tool >>>

2. I am engaging with clearing the cache from all of my browsers and restarting them.

2.1 I have learnt that using this tool really did work. But you must make sure you select this tab [VIEW TAB] when generating your new favicon as it provides essential code to force your browser to refresh cache. Placing the favicon related code in the website-wide header is crucial too.

2.2 I learnt that Chrome is a real pain and you need to keep trying obvious things to delete its cache (even if you have already tried them). For example, clear the cookies in the browser history settings from the beginning of time. Close your browser down and then turn off your computer. Then visit your website favicon using this url “http://websiteaddress/favicon.ico” (replace the “websiteaddress” part with your domain) and using that url refresh the browser by holding keys “Ctrl” and “R”. Then close the browser again. You may even have to shutdown again and leave the computer off for 5 minutes. It is called the Technical Hokey Cokey

3. I am engaging with seeing all browsers now showing the correct favicon version.

Final Notes…

It pays to be really methodical with all this. Just one image in the wrong place, cache not being cleared in both the website and the browser and the new favicon will not show.

If this path helped you please share this post on your social networks and comment below.

*NEW NOTE 24 JULY 2018 – Incredible, the next day my favicon on the Chrome browser was back to the old one!

I engaged with another search for a favicon related WordPress Plugin and found THIS ONE [CLICK TO VIEW]. It worked! One of the key differences to what I had previously done was to add a .gif image of my favicon – I created one using this online tool and then uploaded it to the plugin .gif favicon field. Not sure why that effected things but the point is, all browsers are definitely showing the correct favicon. Showing in both the front and backend of the WordPress website.

PLUGIN DIRECT DOWNLOAD

Comments

OneComments

  • Christian

    Someone asked if I left in place the first load of favicons I uploaded to ftp as well as using the favicon plugin. The answer is YES, the more chances browsers will find the website favicon the better.

Leave a Comments

Scroll Up