Hard coding favicon on wordpress site

Scorpion Ghost

Elite Member
Executive VIP
Jr. VIP
Joined
Mar 22, 2013
Messages
9,153
Reaction score
10,492
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:

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

Code:
<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.
 
This is the code I use:

Code:
  <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.
 
This is the code I use:

Code:
  <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.
 
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!
 
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
 
  • Like
Reactions: gb
All In One Favicon plugin RIP haha
 
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 :)
 
Back
Top