Geodesic Solutions Community Wiki

User Tools

Site Tools

You are here: Auction and Classified Software Support Home » Tutorials » How to add favicon for your website
tutorials:favicon:start

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
tutorials:favicon:start [2017/02/21 12:46]
geojames 		tutorials:favicon:start [2017/02/21 12:52] (current)
geojames
Line 1: Line 1:
 ====== How to add favicon for your website ====== ====== How to add favicon for your website ======
  
-===== If You Want One Site Wide Favicon ===== +This article has been moved to the [[startup_tutorial_and_checklist:design_configuration:adding_a_favicon|adding a favicon support wiki page]] to get it closer to other "design documents" within the wiki.
- +
-An important distinction for this feature is that this is not a feature of the software.  This is a feature of the browser itself.  So any instructions you find here are simply general instructions on how to reference the favicon within your software if you wish...or just on your site in general.   +
- +
-You can easily set up the favicon to appear for every page of your site.  Just upload your favicon.ico file (actually named "favicon.ico") to the base directory of your site.  That is most likely inside the /public_html or /www directories of your site.  Basically that file should be in the base directory of your url.  For almost all browsers this is all you need to do but probably not "acceptable good form".   +
- +
-For "good form" you should reference the favicon within the html head of your html whether within our software or within other documents on your site.  If you simply upload the file (named favicon.ico) within the base directory of your site you could reference it this way within the html head of your templates.  But again that file could be of different types.  Here are a few samples we found just to have a standard single icon: +
- +
-<code> +
-<link rel="icon" type="image/x-icon" href="http://example.com/favicon.ico" /> +
-<link rel="icon" type="image/png" href="http://example.com/favicon.png" /> +
-<link rel="icon" type="image/gif" href="http://example.com/favicon.gif" /> +
-</code> +
- +
-Do note the above code is just one of many options for that tag and that file.  There are different possible image types that can be converted into a .ico file.  There are different image sizes that will be used for all different browsers and for different platforms meaning desktop versus mobile versus tablet.  Here are some expanded options we found: +
- +
-<code> +
-<!-- Opera Speed Dial Favicon --> +
-  <link rel="icon" type="image/png" href="/speeddial-160px.png" /> +
-  +
-<!-- Standard Favicon --> +
-  <link rel="icon" type="image/x-icon" href="/favicon.ico" /> +
- +
-<!-- For iPhone 4 Retina display: --> +
-  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"> +
- +
-<!-- For iPad: --> +
-  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png"> +
- +
-<!-- For iPhone: --> +
-  <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"> +
-</code> +
- +
-Note that ALL of the above could appear on your site and each icon would be used by the platform it was created for.  So how detailed you get with your favicon creation is up to you. +
- +
-The best place to find the standards for this feature can be found around the Internet.  We did a quick favicon search and found several sites that can convert an image for you.  They can help you produce all the different types and sizes of images to reliably display your favicon correctly within all browser types and platform types.  The above example code is pulled from some of those sites.  We suggest googling "favicon generator" to find sites that can generate the ico file and provide details on what image can be used.  You can also google "favicon checker" to have someone check your favicon on your site and see what could be wrong if the favicon isn't displaying.   +
- +
-===== Template Set Portable Favicon ===== +
- +
-Suggestions up to now simply have you upload the favicon file(s) to your site and reference them within the html of your site (whether in your Geo software OR within other html on your site).  But you can also insert that image within your custom template set as well as include that html in the templates of your custom template set.  If you do that properly that would make your favicon "portable" with your custom template set so it could be easily backed up, moved to another Geo installation or restored back into your site if there are design issues that can't be recovered from.   +
- +
-If you are still using the basic default design template sets provided by Geo you would insert the favicon html reference(s) into the "html head" of the page templates within the "main_page" directory of your custom template set.  Look to make those changes in these templates: +
- +
-  basic_page.tpl +
-  cart_page.tpl +
-  category_page.tpl +
-  front_page.tpl +
-  login_page.tpl +
-  listing_page.tpl +
-  tag_page.tpl +
-  user_management_page.tpl +
- +
-If you wish to make your favicon a part of your custom template set follow these instructions.  Through the following admin tool: +
- +
-  DESIGN > TEMPLATE SETS +
-   +
-Click the "Edit template" button next to template set you wish to edit.  Note do not make these changes to your default template set but within your custom template set.  Changes in the default template set are overwritten in an update.  If your custom template set is still based on the default design given at installation your template file changes will happen within the "head.tpl" within the "main_page" directory.  Check the box next to the "head.tpl" file and click "edit" at the bottom of the Manager. +
- +
-Paste this code: +
- +
-<code> +
-<link rel="icon" type="image/x-icon" href="{external file='images/favicon.ico'}" /> +
-<link rel="icon" type="image/png" href="{external file='images/favicon.png'}" /> +
-<link rel="icon" type="image/gif" href="{external file='images/favicon.gif'}" /> +
- +
-<!-- Opera Speed Dial Favicon --> +
-  <link rel="icon" type="image/png" href="{external file='images/speeddial-160px.png'}" /> +
-  +
-<!-- Standard Favicon --> +
-  <link rel="icon" type="image/x-icon" href="{external file='images/favicon.ico'}" /> +
- +
-<!-- For iPhone 4 Retina display: --> +
-  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="{external file='images/apple-touch-icon-114x114-precomposed.png'}"> +
- +
-<!-- For iPad: --> +
-  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="{external file='images/apple-touch-icon-72x72-precomposed.png'}"> +
- +
-<!-- For iPhone: --> +
-  <link rel="apple-touch-icon-precomposed" href="{external file='images/apple-touch-icon-57x57-precomposed.png'}"> +
-</code> +
- +
-Please note the above are several options.  You may decide to go with the single favicon option and choose one of the first 3 lines in the code secion above.  The choice is yours here. +
- +
-Make sure the above code appears after any css file references within the html header.  In very old designs that would be after:  +
- +
-<code><link href="{external file='css/secondary_theme_styles.css'}" rel="stylesheet" type="text/css" /></code> +
- +
-In any newer default Geo designs that would be after the {html_head} tag where it appears in your template's html head.   +
- +
-Now save the template file changes and your done with any html within your templates.  Next you need to upload any images you reference within your favicon code into the following directory of your custom template set: +
- +
-  /external/images/ +
-   +
-You can use your ftp software or the upload feature within the DESIGN > MANAGER admin tool.  If you ftp that file up make sure to hit the "re-scan attachments" button next to your custom template set when done so the software can include that file within it's precompiled templates properly.  If your custom template set is "my_templates" and your installation is at the base directory of your domain (ex. example.com) that directory would be:   +
-   +
-  http://example.com/geo_templates/my_templates/external/images +
- +
-and the direct url to the favicon would be the following within your template set.  : +
- +
-  http://example.com/geo_templates/my_templates/external/images/favicon.ico (or whichever file you upload) +
- +
-The above instructions makes your favicon "template portable" in that it will work for that template set you set it up within.  If you set this feature up to the above instructions you can create a different favicon for each template set you use.  For example since different template sets are used for different languages you could have a language specific favicon for each language if you like.  Just do the above for each template set. +
- +
-===== External References ===== +
- +
-  http://en.wikipedia.org/wiki/Favicon +
- +
-  http://tools.dynamicdrive.com/favicon/ +
-   +
-  http://realfavicongenerator.net/ +
-   +
-  http://realfavicongenerator.net/favicon_checker (checks if there is something wrong with your favicon) +
-   +
-  http://www.favicon-generator.org/ +
-   +
-  and many others by googling anything "favicon".+
tutorials/favicon/start.1487681204.txt.gz · Last modified: 2017/02/21 12:46 by geojames

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
CC Attribution-Noncommercial-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki