Hard coding favicon on wordpress site

[Scorpion Ghost]

For some time I've been using the All in one Favicon plugin on my site for inserting the favicon. As we all know, plugins can be problematic, and so everything that can be inserted directly in the code should be.

Now, I successfully inserted a favicon into my site in the header using this code:

<link rel="shortcut icon" href="http://digesale.com/wp-content/uploads/2015/05/favicon1.ico" />

But in this thread, which is 3 years old - https://wordpress.org/support/topic/how-to-add-favicon?replies=7 - the guy says the following:

"If you want to be cross-browser precise, also use

<link rel="icon" href="<?php bloginfo('siteurl'); ?>/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="<?php bloginfo('siteurl'); ?>/favicon.ico" type="image/x-icon" />

"

Now I'm unsure, is what I inserted enough, or should I insert what that guy said?

Thank you.

 

[gb]

This is the code I use:

  <link rel="apple-touch-icon" sizes="57x57" href="/images/favicons/apple-touch-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/images/favicons/apple-touch-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/images/favicons/apple-touch-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/images/favicons/apple-touch-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/images/favicons/apple-touch-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/images/favicons/apple-touch-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/images/favicons/apple-touch-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/images/favicons/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/favicons/apple-touch-icon-180x180.png">
  <link rel="icon" type="image/png" href="/images/favicons/favicon-32x32.png"sizes="32x32" >
  <link rel="icon" type="image/png" href="/images/favicons/android-chrome-192x192.png"sizes="192x192" >
  <link rel="icon" type="image/png" href="/images/favicons/favicon-96x96.png"sizes="96x96" >
  <link rel="icon" type="image/png" href="/images/favicons/favicon-16x16.png"sizes="16x16" >

This way my icon is optimized and working on all devices.

 

[Scorpion Ghost]

This is the code I use:

  <link rel="apple-touch-icon" sizes="57x57" href="/images/favicons/apple-touch-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/images/favicons/apple-touch-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/images/favicons/apple-touch-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/images/favicons/apple-touch-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/images/favicons/apple-touch-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/images/favicons/apple-touch-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/images/favicons/apple-touch-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/images/favicons/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/favicons/apple-touch-icon-180x180.png">
  <link rel="icon" type="image/png" href="/images/favicons/favicon-32x32.png"sizes="32x32" >
  <link rel="icon" type="image/png" href="/images/favicons/android-chrome-192x192.png"sizes="192x192" >
  <link rel="icon" type="image/png" href="/images/favicons/favicon-96x96.png"sizes="96x96" >
  <link rel="icon" type="image/png" href="/images/favicons/favicon-16x16.png"sizes="16x16" >

This way my icon is optimized and working on all devices.

Wow, really?

Is it okay if I use the same favicon image for all of them? I don't wanna sit and make 10 different images for this. It's a bitch enough making 1 favicon ico image.

 

[gb]

Wow, really?

Is it okay if I use the same favicon image for all of them? I don't wanna sit and make 10 different images for this. It's a bitch enough making 1 favicon ico image.

Yeah. Try using a generator like this - should make the entire process a lot easier. For more info on favicons, etc. check out this article.

 

[QueenOfHearts]

Yeah. Try using a generator like this - should make the entire process a lot easier. For more info on favicons, etc. check out this article.

Thanks for that link. I was never aware different browsers required different favicons to be more efficient. Didn't come to my mind at all since it's so small. My theme has a place where I actually upload the favicon. But I'm gonna dig in the hood and see if this is actually cross browser efficient.

Thanks for the tip and OP for making me aware this!

 

[Scorpion Ghost]

You're welcome QueenOfHearts.

Thanks a Lot gbgbgb. You really handled this situation. I implemented it as you said on my site. Feels good

In fact, I'll go implement the same thing on my other wordpress site now too XD

 

[Scorpion Ghost]

All In One Favicon plugin RIP haha

 

[gb]

You're welcome QueenOfHearts.

Thanks a Lot gbgbgb. You really handled this situation. I implemented it as you said on my site. Feels good

In fact, I'll go implement the same thing on my other wordpress site now too XD

Glad I could help