Favicon Stopped Working in Chrome

[Paige.Sloan]

Recently, my favicon stopped working in Chrome and IE but it still works in Firefox. I've cleared the cache but it still isn't showing up. Again, it worked fine and than just stopped working one day. Any suggestions?

http://reasonstocomehome.com

[Victor Font]

It may be because you're using a .png instead of an .ico file, which display fine in CHrome and IE. Convert your icon here: http://www.xiconeditor.com/ and try again.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Paige.Sloan]

Would this have caused it to stop working? I just recently stopped showing up in Chrome a few weeks ago.

[ItsPhipps]

Try going into your hosting account and deleting the "favicon.ico" file from your root folder. Or you can replace it with your own.

What's probably happening is that since the .ico file is in your root folder for your host, chrome is probably favoring that over using the .png you insert with <link> in your site.

[Paige.Sloan]

I tried removing the favicon.ico file from my root folder but it hasn't changed. I'm really not very experienced with working with my root folder but how would I add my own back in?

[ItsPhipps]

You just need to upload your favicon.ico file into the same root folder. Your best bet would be to contact support through your host and they can walk you through it.

[coralseait]

Favicon comes up a lot, and we're no longer doing the just replace favicon.ico in the child theme; it's a better and more thorough solution to generate for all devices.

We use http://realfavicongenerator.net/ - no affiliation, but it works well for us. We then use a function similar to:

//* Favicon

// Pre 2.0 Genesis Framework
remove_action('genesis_meta', 'genesis_load_favicon' );

// Post 2.0 Genesis Framework
remove_action( 'wp_head', 'genesis_load_favicon' );

// Post 2.0 usually adds the action to wp_head, but the favicon
// checkers don't validate this, so use the older style add action
// which seems to validate better
add_action( 'genesis_meta', 'trc_custom_favicon' );
function trc_custom_favicon() {
	echo '<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">';
}

Paste the function according to what the tool generates in functions.php and upload all the favicon files to your WP root location.

---

Coral Sea IT

[george32]

I had a similar problem with favicons and this site is my very help http://onlinefavicon.com/ , you can create favicon with drawing tool or generate image upload your jpg file picture or other and make 16x16 or 32x32 ICO file, also you can see gallery with favicons from other users or download the same, and finally they have descriptio how to set up favicon to your site, try it...

[Author]

Posts