Be sure to first go to https://realfavicongenerator.net/ and follow the instructions on how to upload your image for your favicon. Once you have your zip file downloaded be sure to have the files extracted and ready to upload in the theme editor.
- To get to the Theme Editor, go to the Apps menu in your Tendenci nav and click on Theme Editor.
- To upload your favicon files, within the Theme Editor click on the "media" folder then click the “+” next to the "img" folder and upload all applicable files. You should upload about 8 to 10 favicon files. Note: You may need to delete favicon’s that are preloaded already in the "img" folder.
- Next, copy and paste the following code in base.html underneath the HTML comment FAVICON within the base.html file (it may differ slightly in color code, file path and order -- adjust accordingly):
<link rel="icon" type="image/x-icon" href="{{ THEME_URL }}media/img/icons/favicon.ico">
<link rel="icon" sizes="180x180" href="{{ THEME_URL }}media/img/icons/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="180x180" href="{{ THEME_URL }}media/img/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="{{ THEME_URL }}media/img/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="{{ THEME_URL }}media/img/icons/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="msapplication-TileImage" content="{{ THEME_URL }}media/img/icons/mstile-150x150.png">
<meta name="theme-color" content="#ffffff">
- To get to base.html, within the Theme Editor go the templates folder and do a keyboard find (CMD + F or Crtl + F) for base.html and click on it. Next, do a keyboard find for FAVICON that is commented out and paste the copied code here and "Save Changes".
