Please disregard the 'View article...' shown at the bottom of many posts as this is the result of restoring old forum posts from a backup.
Integrate multiple favicons from faviconit.com
Exponent CMS has basic support for favicons allowing either a windows icon or png file as 'the favicon' (it must be named favicon.ico or favicon.png in the theme folder). We also provide basic support for Apple Touch icons with either a apple-touch-icon or apple-touch-icon-precomposed png file (named respectively). There is also a favicon service web site that builds a large package of favicons at all the sizes any device could request. It is http://faviconit.com/ and can take a large graphic/image file and convert it into multiple files of the appropriate sizes and also the code/instructions to integrate it into a web site.
Once you create the package and download it, it will contain all the image files along with some support files and 'favicon-instructions.txt' which tells you how to integrate it into a web page. Here's how you can integrate this feature into your Exponent CMS theme.
Once you create the package and download it, it will contain all the image files along with some support files and 'favicon-instructions.txt' which tells you how to integrate it into a web page. Here's how you can integrate this feature into your Exponent CMS theme.
- Extract all the files into your custom theme folder. Optionally you could create a subfolder within your theme and then adjust the code below to include that subfolder name before the 'favicon???.???' filename
- Edit your theme and subtheme templates to insert a variation of the code found in the instructions (see below). This code will be placed within the <head> element, preferrably immediately after the closing tag '?>' for the expTheme::head() call and before the html </head> closing tag
<link rel="shortcut icon" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon.ico">
<link rel="icon" type="image/png" sizes="192x192" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-192.png">
<link rel="icon" type="image/png" sizes="160x160" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-160.png">
<link rel="icon" type="image/png" sizes="96x96" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-96.png">
<link rel="icon" type="image/png" sizes="64x64" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-64.png">
<link rel="icon" type="image/png" sizes="32x32" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-16.png">
<link rel="apple-touch-icon" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-57.png">
<link rel="apple-touch-icon" sizes="114x114" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-114.png">
<link rel="apple-touch-icon" sizes="72x72" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-72.png">
<link rel="apple-touch-icon" sizes="144x144" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-144.png">
<link rel="apple-touch-icon" sizes="60x60" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-60.png">
<link rel="apple-touch-icon" sizes="120x120" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-120.png">
<link rel="apple-touch-icon" sizes="76x76" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-76.png">
<link rel="apple-touch-icon" sizes="152x152" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-180.png">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-144.png">
<meta name="msapplication-config" content="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/browserconfig.xml"><link rel="icon" sizes="16x16 32x32 64x64" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon.ico">