User Tools
Sidebar
startup_tutorial_and_checklist:design_configuration:adding_a_favicon
Table of Contents
Adding a Favicon To Your Site
If You Want One Site Wide Favicon
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.
As far as using a specific file type there are several options. Do some googling yourself and/or look to the links at the bottom of this article for links on getting a generated icon from the one you upload.
You can easily set up the favicon to appear in 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. By "within html head" we mean to place you favicon reference code between the html <head> and </head> tags on any page you wish that to appear. 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:
<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" />
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:
<!-- 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">
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:
<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'}">
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:
<link href="{external file='css/secondary_theme_styles.css'}" rel="stylesheet" type="text/css" />
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".
startup_tutorial_and_checklist/design_configuration/adding_a_favicon.txt · Last modified: 2017/04/28 18:35 by geojames
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
