Favorite icon not showing in Chrome or Opera or Safari; cannot upload .ico file

kram_1608 · January 2019

I have successfully uploaded a .png file as a site icon via Appearance > Customize > Site Identity ("site icons should be square and at least 512 x 512 pixels"). This correctly displays in IE, Edge, and Firefox.

In Opera and Chrome, the "Be" letters are displayed as a prefix to the site title, there is no site icon except for "Be".

Via BeTheme > Theme Options > General, I have uploaded an Apple touch icon (180 x 180 pixels). Although there is the "Favicon" field (.ico 32 x 32 pixels), .ico files are prohibited from being uploaded as a security risk.

On an iPad, the Apple touch icon does not display in Safari and only a generic icon can be saved as a favorite.

What is the resolution for Chrome, Opera, and Safari with respect to the site / favorite icons that will not display?

Thank you.

Bryan · January 2019

HI,

try using this tool and see what is wrong with the favicon, it should work fine.

https://realfavicongenerator.net/favicon_checker

thanks

kram_1608 · January 2019

Thank you for your prompt reply, very much appreciated.

To follow up, the Apple touch icon did eventually show up, presumably after propagating the servers.

The issue is the inability to upload .ico files (Wordpress/BeTheme prevent upload for security); apparently .ico is needed for Chrome and Opera?

Thank you.

Summary of favicon checker:

Favicon checker
Analysis

iOS Safari

There is an Apple Touch icon
The 180x180 Apple Touch icon is present
There is no Touch icon in the root directory
Android Chrome

The Web App Manifest is declared
There is an icon for Android Chrome
The 192x192 icon for home screen is present
Windows 8 and 10

The Browser Configuration file is present
There is a tile icon for Windows
Mac OS X El Capitan Safari

The mask icon color is declared
The mask icon for Safari pinned tabs is present
Classic, desktop browsers

There is no favicon.ico in the root of your web site
There is an icon for classic browsers
favicon.ico is present
favicon.ico contains the highest resolution icon (48x48)
favicon.ico contains all icons of recommended sizes

Bryan · January 2019

Hi,

wordpress could be blocking this now, which is very silly. The real favicon checker has a plugin. Try using it, it will do all the work for you.

https://wordpress.org/plugins/favicon-by-realfavicongenerator/

Remove the favicon from theme options and wordpress customizer.

thanks

kram_1608 · January 2019

Again, thank you for your reply. I reviewed your recommended favicon plugin, and noted in the support forum a user (after utilizing the plugin) had the same issue:

"I can’t see the favicon on frontend in Chrome or Safari. It works fine in backend though. Firefox and IE works fine on both frontend and backend.
Apple touch icon doesn’t seem to work on my phone when added to home screen on iPhone (iOS 12.0.1).
Have cleaned cache in both Safari and Chrome and tried “private mode”."

The reply:

"This because you have a div in your head, which is a forbidden markup in the header. Chrome is not like the other browsers in this regards, thus the different behavior.
The code you should get rid of is:
<div class="dp_preloader"><div class="dp_loader_icon"> </div></div>
It is probably from another plugin or your theme. Does “DP” ring any bell? It maybe the abbreviation of the plugin name for example."

WordPress is now blocking ".ico" files from upload. There is no issue with "div" as noted above. However, in reviewing the BeTheme header.php files, the following line is coded into the parent file at line 36:
36 <link rel="shortcut icon" href="<?php echo esc_url( mfn_opts_get( 'favicon-img', THEME_URI .'/images/favicon.ico' ) ); ?>" />

Therefore is it a hardcoded BeTheme issue? In example, requiring a "favicon" when ".ico" can no longer be uploaded per WordPress? And Chrome and Opera behave differently; that may explain the matter.

Kindly advise, thank you.

Pablo · January 2019

Hey,

Please send us WordPress dashboard access privately thru the contact form which is on the right side at http://themeforest.net/user/muffingroup#contact and we will check what might be the reason.

Notice!
Please attach a link to this forum discussion.

Thanks

kram_1608 · January 2019

Thank you for the reply. I am running BeTheme 21.0.5, and WP 4.9. Within BeTheme, I am using a child theme and "Profile" (one page theme) .

BeTheme > Theme Option > Global > General > Icon asks for an .ico file of 32 x 32 pixels. Via the dashboard .ico files cannot be uploaded. I uploaded an favicon.ico via cPanel to the media directory, but in viewing the media directory from the dashboard the file is not visible.

Chrome and Opera appear to pull the "Be" logo from the parent theme at Themes/betheme/images/logos, and "Be" is subsequently displayed in the address tab rather than my .png logo which properly displays in Edge, IE, Firefox, Safari.

I am hesitant to open the backend of the site; can you determine why Chrome/Opera are apparently pulling "Be" logos from the parent theme? Or are "Be" logos somewhere in the child theme?

Thank you.

kram_1608 · January 2019

Want to thank everyone and advise I now have the "favicon" properly displaying in Chrome and Opera.

BeTheme > Theme Option > Global > General > Icon asks for an .ico file of 32 x 32 pixels, but since WP seems to block .ico, I uploaded a 32 x 32 pixel .png file.

Once that image propagated, Chrome and Opera properly displayed the favicon .png file in the address bar.

Hope that helps with any future issues; best to all.

Pablo · January 2019

I'm glad that you solved it.

Is there anything else I can help you?

Thanks

Favorite icon not showing in Chrome or Opera or Safari; cannot upload .ico file

Comments