Tagged: , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • June 19, 2016 at 2:54 pm #650422
    Doron

    hi
    i want people using safari in mac will see my favicon when they are adding my website to their safari favorites
    i’m specifically talking about those kind of safari favorite icons in this link
    https://dl.dropboxusercontent.com/u/12324495/safari-sample/Screen%20Shot%202016-06-19%20at%202.53.12%20PM.png

    ..if I understand correctly (?) I can achieve this by adding the following code to my homepage
    <link rel=”shortcut icon” href=”/path/to/my/icon/192X192.ico”>
    <link rel=”apple-touch-icon-precomposed” href=”/path/to/my/icon.png”>

    ..whats the right way to do this? ..is there a better way than using code block element?

    June 19, 2016 at 7:16 pm #650458
    Vinay

    Hey Doron,

    Favicons can be unloaded from Enfold > Theme optison > Favicon

    Let us know if you have any questions.

    Best regards,
    Vinay

    June 19, 2016 at 7:27 pm #650465
    Doron

    I know that and already used it successfully
    But it’s only good for normal favicon
    Not for the kind of icons in safari favorites that I showed you in the screenshot
    It seems that they need to be defined differently
    Here’s the link to the screenshot again
    https://dl.dropboxusercontent.com/u/12324495/safari-sample/Screen%20Shot%202016-06-19%20at%202.53.12%20PM.png

    June 19, 2016 at 9:52 pm #650502
    Vinay

    Hi,

    Please try adding this at the very end of your themes / child themes functions.php file:

    function blog_favicon() {
echo ' 	<link rel=”shortcut icon” href=”/path/to/my/icon/192X192.ico”>
 	<link rel=”apple-touch-icon-precomposed” href=”/path/to/my/icon.png”>';
}
add_action('wp_head', 'blog_favicon');

    Best regards,
    Vinay

    June 20, 2016 at 9:15 am #650692
    Doron

    o.k
    I added the code to the function.php
    and it seems to add the code to the page source code
    ..but it doesn’t seem to have any effect on safari browser when you add the site to your favorites
    maybe the code still missing something?

    June 21, 2016 at 10:28 am #651373
    Vinay

    Hi,

    I don’t use safari but according to their documentation it should be 

     	 	 	<link rel="apple-touch-icon" href="icon.png"/>
 	 	 	<link rel="apple-touch-icon" sizes="72x72" href="icon.png"/>
 	 	 	<link rel="apple-touch-icon" sizes="114x114" href="icon.png"/>

    Please ref to this link for more info https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

    http://stackoverflow.com/questions/5110776/apple-touch-icon-for-websites

    Best regards,
    Vinay

    • This reply was modified 9 years, 4 months ago by Vinay.
    June 27, 2016 at 11:18 am #653738
    Doron

    hi!
    sorry it took me so long to replay
    i used the following code

    <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">';

    I took it from the stackoverflow link you posted (and implanted it in the same technique using the function.php you showed me)
    probely ‘safari-pinned-tab.svg’ is the one that makes the difference but i didn’t want to take any chances so used the complete code
    http://realfavicongenerator.net/ is also very helpful for this issue
    anyway – it seems to work just like it should!
    so..problem solved, thank you very much!

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘define the favorite icon in safari mac’ is closed to new replies.