Difference between revisions of "Changing the site favicon"

Revision as of 20:45, 25 June 2013

Changing your website's favicon is a relatively easy task.

Create a 16x16 pixel image. You may use graphic software such as Photoshop, Gimp, Paint.net or Windows Paint. Alternatively, you can also use an online tool such as http://antifavicon.com/
Convert to ico format using free online sites such as:
The file you created in this way will have the extension .ico. Copy the file to the /joomla/templates/<your template> directory and name it favicon.ico.
Open a browser. Do you see your new icon? If so, congratulations. If not, that doesn't necessarily mean you did anything wrong. Browsers are designed to minimize data traffic, so they don't refresh the favicon every time they show a page. Even refreshing the page (F5) won't help. So you need to refresh more thoroughly:
- Mozilla / Firefox / Safari: hold down Shift while clicking Reload, or press Ctrl-Shift-R (Cmd-Shift-R on Apple Mac);
- IE: hold Ctrl while clicking Refresh, or press Ctrl-F5;
- Konqueror: simply click the Reload button, or press F5;
- Opera users may need to completely clear their cache in Tools→Preferences.
- Chrome: Shift-F5
- If this doesn't work you will need to delete the temporary internet files and the history and then open your page again.

My favicon is in another location[edit]

Some templates contain code that redirects the browser to another directory or another icon file. To determine where your new favicon should be, examine http://yoursite.com/templates/your_template/index.php and look for code that contains the text <link rel="shortcut icon". There you will find the directory and the name of the icon file. Copy your icon to that place and give it the the name that link is pointing to (you might want to backup the old file). Make sure you set the security correctly such that you webserver has access to that file. Look at the example below.

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

If you don't want to just change the favicon.ico file in its respective template directory you can find the reference to the favicon.ico file in the html.php document. The path is "........\libraries\joomla\document\html\html.php". This should prevent the icon from toggling if you use

<link rel="shortcut icon" href="http://yoursite.com/templates/your_template/icon/youricon.ico" />

in the template html and you don't remove the favicon.ico file. (why call the icon twice?)

From the html.php

// Try to find a favicon by checking the template and root folder
		$path = $directory . DS;
		$dirs = array( $path, JPATH_BASE . DS );
		foreach ($dirs as $dir )
		{
			$icon =   $dir . 'favicon.ico';
			if (file_exists( $icon ))
			{
				$path = str_replace( JPATH_BASE . DS, '', $dir );
				$path = str_replace( '\\', '/', $path );
				$this->addFavicon( JURI::base(true).'/'.$path . 'favicon.ico' );
				break;''

@@ Line 1: / Line 1: @@
-# '''Create a 16x16 pixel image.'''  You may use graphic software such as [[wikipedia:Photoshop|Photoshop]], [[wikipedia:Gimp|Gimp]] or [[wikipedia:Windows_Paint|Windows Paint]] or an online tool such as http://antifavicon.com/
+[[Image:Favicon.png|450px|right]]
+Changing your website's favicon is a relatively easy task.
+# '''Create a 16x16 pixel image.'''  You may use graphic software such as [[wikipedia:Photoshop|Photoshop]], [[wikipedia:Gimp|Gimp]], [[wikipedia:Paint.net|Paint.net]] or [[wikipedia:Windows_Paint|Windows Paint]]. Alternatively, you can also use an online tool such as http://antifavicon.com/
 # '''Convert to ico format''' using free online sites such as:
 #* http://converticon.com/
@@ Line 6: / Line 10: @@
 #* http://tools.dynamicdrive.com/favicon/
 #* http://www.favicon.cc/
-# '''Copy the file to the /images directory under the Joomla! root directory.'''
+# The file you created in this way will have the extension .ico. '''Copy the file''' to the <code>/joomla/templates/<your template></code> directory and '''name it''' <code>favicon.ico</code>.
-# '''Make sure the file name is favicon.ico. '''
+# Open a browser. Do you see your new icon? If so, congratulations. If not, that doesn't necessarily mean you did anything wrong. Browsers are designed to minimize data traffic, so they don't refresh the favicon every time they show a page. Even refreshing the page (F5) won't help. So you need to refresh more thoroughly:
+#* ''Mozilla / Firefox / Safari'': hold down Shift while clicking Reload, or press Ctrl-Shift-R (Cmd-Shift-R on Apple Mac);
+#* ''IE'': hold Ctrl while clicking Refresh, or press Ctrl-F5;
+#* ''Konqueror'': simply click the Reload button, or press F5;
+#* ''Opera'' users may need to completely clear their cache in Tools→Preferences.
+#* ''Chrome'': Shift-F5
+#* If this doesn't work you will need to delete the temporary internet files and the history and then open your page again.
-By default, the Joomla! favicon.ico file can be found in the /images directory.  Some templates, however, will contain code that redirects the browser to /templates/template_name/icon.  To determine where your new [[wikipedia:Favicon|favicon]] should be, examine /templates/index.php and look for code that resembles: <source lang="html4strict"><link rel="shortcut icon" href="http://yoursite.com/templates/your_template/icon/favicon.ico" /></source>
+===My favicon is in another location===
+Some templates contain code that redirects the browser to another directory or another icon file. To determine where your new favicon should be, examine http://yoursite.com/templates/your_template/index.php and look for code that contains the text <link rel="shortcut icon". There you will find the directory and the name of the icon file. Copy your icon to that place and give it the the name that link is pointing to (you might want to backup the old file). Make sure you set the security correctly such that you webserver has access to that file. Look at the example below. <source lang="html4strict"><link rel="shortcut icon" href="http://yoursite.com/templates/your_template/icon/favicon.ico" /></source>
-Alternatively, modify the index.php for the template, so that it uses your preferred ''name.ico'' file.
+If you don't want to just change the '''favicon.ico''' file in its respective template directory you can find the reference to the '''favicon.ico''' file in the '''html.php''' document. The path is '''"........\libraries\joomla\document\html\html.php"'''. This should prevent the icon from toggling if you use
+<source lang="html4strict"><link rel="shortcut icon" href="http://yoursite.com/templates/your_template/icon/youricon.ico" /></source>
+in the template html and you don't remove the favicon.ico file. (why call the icon twice?)
-''Editor's note: The above is not quite accurate as Joomla! will look for the favicon.ico file in the template directory automatically too.  The above statements need checking and re-wording.''
+From the html.php
-[[Category:Templates]]
+<source lang="php">
+// Try to find a favicon by checking the template and root folder
+		$path = $directory . DS;
+		$dirs = array( $path, JPATH_BASE . DS );
+		foreach ($dirs as $dir )
+		{
+			$icon =   $dir . 'favicon.ico';
+			if (file_exists( $icon ))
+			{
+				$path = str_replace( JPATH_BASE . DS, '', $dir );
+				$path = str_replace( '\\', '/', $path );
+				$this->addFavicon( JURI::base(true).'/'.$path . 'favicon.ico' );
+				break;''
+</source>
+<noinclude> [[Category:Tutorials]]
+[[Category:Template Development]]
+[[Category:Template Reference]]
+[[Category:Template Management]]
+</noinclude>

Difference between revisions of "Changing the site favicon"

From Joomla! Documentation

Revision as of 20:45, 25 June 2013

My favicon is in another location[edit]