Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

How to change the favicon on the VanillaPress2010 theme?

edited January 2013 in Vanilla 2.0 - 2.8

How can I change the favicon on the VanillaPress2010 theme?

Thanks,
Peter

«1

Comments

  • Wow, one year later and still no answer!

  • peregrineperegrine MVP
    edited January 2014

    @jcncnc said:
    Wow, one year later and still no answer!

    We now have an expectation of you to answer all questions next year when you have learned about vanilla that haven't been answered in one year :). Answers depend on volunteers to answer questions with the correct answers.

    if none of the solutions in this thread
    http://vanillaforums.org/discussion/11250/favicon worked for you.

    you can try this....

    all you need to do for themes with views/default.master.tpl

    is look in the file and add a link for your favicon

    obviously you have to add a valid link to your icon. here is an example.

    <head>
      {asset name='Head'}
    <link type="image/x-icon" href="themes/VanillaPress2010/design/favicon.png" rel="shortcut icon">
    </head>
    

    and add your icon to the design folder.

    simple enough.

    not sure if you have to apply theme again. but it worked for me.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited January 2014

    The favicon is not working in this forum, it was earlier in the day, but now it is not showing in Safari

    this is what it is calling, and is not the proper size for favicon 16 by 16 this image is 64 by 64 ....

    <link rel="shortcut icon" href="https://us.v-cdn.net/5018160/uploads/favicon_94bbda47a17138f9.ico" type="image/x-icon">

    @jcncnc

    You need to also make favicons for the sizes required by tablets and phones . Simply placing the favicon in the design folder of the theme works great.

    You can make them here to have all the sizes

    http://iconifier.net

    http://www.pic2icon.com/site_icon_for_iphone_ipad_generator.php

    http://realfavicongenerator.net

    http://www.iconj.com/iphone_style_icon_generator.php

    http://www.genfavicon.com

    here are the tags to go with those icons

    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <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" />
    

    these are for Windows 8

    <link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196" />
    <link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160" />
    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
    <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
    <meta name="msapplication-TileColor" content="#ffffff" />
    <meta name="msapplication-TileImage" content="/mstile-144x144.png" />
    
  • peregrineperegrine MVP
    edited January 2014

    @vrijvlinder said:

    Simply placing the favicon in the design folder of the theme works great.

    there are many ways to solve as mentioned:

    V, you tested this assumption with a theme with default.master.tpl without adding any config options or tags in the .tpl file?

    That is,you simply just added the favicon to the design folder in VanillaPress2010 which is a tpl based theme. I didn't have the same experience with VanillaPress2010 tpl based theme. I had to alter the .tpl as I described above.

    VanillaPress2010 is a default.master.tpl based theme.

    V, did you simply just add the favicon to the design folder in VanillaPress2010 which is a tpl based theme without changing the .tpl file.

    and without using any of the solutions posted here. http://vanillaforums.org/discussion/11250/favicon

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    V, you tested this assumption with a theme with default.master.tpl without adding any config options or tags in the .tpl file?

    Yes that is correct, I add a favicon in all my themes design folder. When I test the theme the icon shows as expected.
    Without adding it to the master. The same with tpl themes I made. That is embed friendly tpl and mobile. They all call the favicon directly from the design folder.

    Not tested on Vanillapress only my themes.

    I could test it I suppose. Some themes have it some don't. I found adding the meta tag for the browser 16 by 16 in the master was redundant the same file being called twice.

    But this is not the case for the other types and sizes of icons. Those do need to be added to the master because there is nothing calling them from the design folder. Only the favicon.

  • peregrineperegrine MVP
    edited January 2014

    @vrijvlinder
    Not tested on Vanillapress only my themes.

    I think you are making an assumption, thats why I was hoping you would see for yourself with theme the person was discussing.

    try it. just for grins and see what you come up with. I'm curious now.

    your chance to prove me wrong :)

    perhaps the other tpl based themes have something in the themehooks that make them work with favicons which the Vanillapress 2010 them doesn't.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    Upon inspection of that theme, it is missing the favicon in the design folder.... I uploaded it but can't test until my database connects again, seems it timed out on all mysql install again ... arg!

  • peregrineperegrine MVP
    edited January 2014

    @vrijvlinder said:
    Upon inspection of that theme, it is missing the favicon in the design folder.... I uploaded it but can't test until my database connects again, seems it timed out on all mysql install again ... arg!

    You are a "hair's breadth" or a "hare's breath" from a yak shaver badge. :)

    then you can post your face in the yak photo :)

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited January 2014

    then you can post your face in the yak photo

    how about me simply riding the yak! That has to count more than shaving .....I don't just shave ... I Epilate

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited January 2014

    Ok to finish up with this yak, I installed the VanillaPress theme, after I added a favicon in the design folder, and it works ....

    The problem was a missing favicon.png in the design folder.

  • peregrineperegrine MVP
    edited January 2014

    I know there was no favicon. But I put an icon in and it still wouldn't change with out changing the default.master.tpl.

    however, I removed the line from default.master.tpl and it still works.

    So, you are correct about just popping one in the folder. where's my crow?

    it was a firefox browser cache issue why the favicon would not change.

    so you are correct in essence.

    here is the long story....
    But, here is what i wasn't aware of, the favicon seems to be cached in the firefox browser. I added a favicon to the design folder, removed it. changed to embed friendly theme favicon changed properly. went back to vanillapress 2010 theme (favicon still appeared in browser despite not being in design folder.) Opened in chrome browser with vanillapress 2010 and no favicon (as expected). Put a different favicon in design folder and google chrome showed the new favicon. Went back to firefox, still the old favicon showing despite the new one in the folder. So the problem people might be having is due to browser caching the icon.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited January 2014

    Yes the cache in firefox is stubborn to be removed. I use an extension to reload the style. I did notice that in firefox. You have to aggressively clear all clear the cache and also force load the latest style.

    I use this coz you can disable the cache and other things for firefox

    http://chrispederick.com/work/web-developer/

    or

    Have you tried a favicon retriever ?

    https://addons.mozilla.org/en-US/firefox/addon/faviconreloader/

    https://addons.mozilla.org/en-US/firefox/addon/favicon-restorer/

  • peregrineperegrine MVP
    edited January 2014

    I found this to be the simplest and best way for me, and it works every time.

    http://www.phpjunkyard.com/tutorials/force-favicon-refresh.php

    so to wrap this up

    1. just put your favicon in the design folder of the theme (as V says).

    2. if you find your favicon doesn't update as you expect it to
      a. Open the favicon file directly, e.g.
      http://www.yourdomain.com//themes/VanillaPress2010/design/favicon.png
      b. Refresh the favicon URL by pressing F5 or the appropriate browser Refresh (Reload) button

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited January 2014

    No that does not work on Safari :( still no favicon for this forum. I think they need to include a favicon.png in the design folder , which it is not apparently...

    So.....We do ultimately answer every question, it is only a matter of down time ;)

  • two different animals.

    yes, they have it in the root as ico - site wide favicon as opposed the me based favicon.

    https://us.v-cdn.net/5018160/uploads/favicon_94bbda47a17138f9.ico

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • @jcncnc said:
    Wow, one year later and still no answer!

    answered!

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    Could it be that my browser is showing vanillaforums.org and not www.vanillaforums.org ? Safari is not recognizing the ico... it needs to be png. All they have to do is put a favicon.png in the design folder of the theme here and it would work ....

    In my website root I have all the types of icons that browsers would call and added the rel links to the head of the index. It works on all browsers and different files get used based on the browser.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited January 2014

    @peregrine said:
    answered!

    Yes, in a every way possible, if you ain't got no favicon after this...Yak shaver , you will never have a favicon :#

  • I also noticed a webhead plugin - not sure what it does haven't tried it.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

Sign In or Register to comment.