Correct way to place the favicon in Sage 9

sage
1

Hi!
Sorry for the basic question. There is an old thread but I think maybe things have changed.

So, I have a favicon of 16x16. Normally I would put the favicon in the theme root and it worked, but I want to do things as it’s supposed to, as standard as possible. So I guess there are some options:

  • Keep it under resources and WP will automatically take it.
  • declare it under head.
  • Use the WP favicon option (which forces to use 512x512 favicon).

What option do you recommend?

2

The team might kick me out for this, but I use a plugin:

This way the designers or content people can take care of the favicon, and you get all the sizes and devices in the deal.

3 Likes
3

amazing as always! thank you so much

4

I personally just pick it in the Customizer (the third option you mentioned)–don’t know if there are any drawbacks to that approach vs the plugin @MWDelaney linked to. Haven’t spotted any so far.

5

Things have probably gotten better with WordPress’s default icon generation since this post was written but at the moment the default customiser cuts and links four images out of a 512x512 icon: 270x270, 180x180, 192x192, 32x32.

I’ll keep my plugin count down use this method unless anyone knows of a good reason to use the above plugin instead.

6

I just use the default WordPress favicon feature in Customize > Site Identity.

1 Like
7

I don’t use the Plugin, but I do use its web implementation in https://realfavicongenerator.net/ and put it in head section.

Why? It gives me a lot of control of how will it be seen in all situations and even sets the browser color (in android you can theme the browser as well) and the touch bar in case of Safari.

Furthermore, I usually create 2 favicons, one in color and one in grey to easily difference the admin of wordpress from the real site.

8

@mmirus I’m using the customizer way now but I can’t understand how the favicon is displayed on my pages.
I can see the icon on the browser tab but I don’t know were it came from.
There is no trace of it in the network file requested neither in the html output of the pages.
I also tried to search for it in the wordpress codebase but with no luck.

The problem is I’d like to implements also this solution: https://realfavicongenerator.net/

@SergiArias how did you handled this?
putting files in resources/assets/images/favicons/ and using get_stylesheet_directory_uri()?

9

how did you handled this?
putting files in resources/assets/images/favicons/ and using get_stylesheet_directory_uri()?

Just implemented the files from RealFaviconGenerator, just use blade’s @asset() directive like this:

<link rel="apple-touch-icon" sizes="180x180" href="@asset('images/favicons/apple-touch-icon.png')">
1 Like
10

Hi!
I recently did a small guide to myself for future projects. Use it to add the favicon for the site and for the admin backend if you want:

  • generate front favicon with realfavicongenerator.net using @asset('images/favicon/
  • add returned markup in head.blade.php and add the ') at the end of assets
  • add the folder in images/favicon
  • generate admin favicon with realfavicongenerator.net using ’ . asset_path('images/favicon/favicon-admin/
  • add and adapt returned markup to admin.php
    // Custom FAVICON for admin
function cc_admin_add_favicon() {
    // close asset paths with ') . '
    echo
    '...';
}

// Now, just make sure that function runs when you're on the login page and admin pages
add_action('login_head', __NAMESPACE__.'\\cc_admin_add_favicon');
add_action('admin_head', __NAMESPACE__.'\\cc_admin_add_favicon');
3 Likes
11

WordPress core also has a favicon related filter (get_site_icon_url)! Without using this filter the WordPress default favicon may still appear. This is also an issue with the RealFaviconGenerator plugin, see