User Tools

Site Tools


Sidebar

tutorials:favicon:start

This is an old revision of the document!


How to add favicon for your website

If You Want One Site Wide Favicon

Since this is a feature of the browser and not or our software you can easily set one up 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. 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 documents. 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:

<link rel="shortcut icon" href="http://example.com/favicon.ico" />

If you are still using the basic default design that would be within the head.tpl of the "main_page" directory of your custom template set.

Template Set Portable Favicon

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/ico" href="{external file='images/favicon.ico'}">

after:

<link href="{external file='css/secondary_theme_styles.css'}" rel="stylesheet" type="text/css" />

Now save the file and your done. You just need to upload your favicon into the "/external/images/" directory of your custom template set. 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:

http://example.com/geo_templates/my_templates/external/images/favicon.ico

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

For full image support and specifics per browser consult:

http://en.wikipedia.org/wiki/Favicon

You can create favicon .ico file through this website:

http://www.favicon.co.uk/
tutorials/favicon/start.1357752448.txt.gz · Last modified: 2014/09/25 16:55 (external edit)