1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Hard coding favicon on wordpress site

Discussion in 'Web Design' started by Scorpion Ghost, Aug 4, 2015.

  1. Scorpion Ghost

    Scorpion Ghost Senior Member

    Joined:
    Mar 22, 2013
    Messages:
    1,067
    Likes Received:
    250
    Occupation:
    Internet!
    Location:
    On the Interwebz
    Home Page:
    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.
     
    • Thanks Thanks x 1
  2. gb

    gb Regular Member

    Joined:
    Nov 8, 2014
    Messages:
    290
    Likes Received:
    151
    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.
     
    • Thanks Thanks x 1
  3. Scorpion Ghost

    Scorpion Ghost Senior Member

    Joined:
    Mar 22, 2013
    Messages:
    1,067
    Likes Received:
    250
    Occupation:
    Internet!
    Location:
    On the Interwebz
    Home Page:
    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.
     
  4. gb

    gb Regular Member

    Joined:
    Nov 8, 2014
    Messages:
    290
    Likes Received:
    151
    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 Thanks x 2
  5. QueenOfHearts

    QueenOfHearts Registered Member

    Joined:
    Jul 31, 2014
    Messages:
    99
    Likes Received:
    78
    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!
     
    • Thanks Thanks x 1
  6. Scorpion Ghost

    Scorpion Ghost Senior Member

    Joined:
    Mar 22, 2013
    Messages:
    1,067
    Likes Received:
    250
    Occupation:
    Internet!
    Location:
    On the Interwebz
    Home Page:
    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
     
    • Thanks Thanks x 1
  7. Scorpion Ghost

    Scorpion Ghost Senior Member

    Joined:
    Mar 22, 2013
    Messages:
    1,067
    Likes Received:
    250
    Occupation:
    Internet!
    Location:
    On the Interwebz
    Home Page:
    All In One Favicon plugin RIP haha
     
  8. gb

    gb Regular Member

    Joined:
    Nov 8, 2014
    Messages:
    290
    Likes Received:
    151
    Glad I could help :)