plainblack.com
Username Password
search
Bookmark and Share
Subscribe

Changing the site icon in WebGUI

A small icon is displayed by many browsers in the URL form, on tabs and on bookmarks.  This is referred to as a site icon, a shortcut icon or even the Firefox icon.

WebGUI ships with icons and with code in the style templates to set this up by default.  However, it is pretty easy to customize this to use personalized icons for your site.

  1. Create a small, 16x16 pixel icon
  2. Save your icon as a PNG file.
  3. Make another copy of your icon as a Microsoft .ICO file.
  4. Upload the PNG to your site as an Image asset.
    1. Note the URL for the PNG file.
    2. Be sure that the permission on the Asset allow Everyone to view it.
  5. Upload the ICO to your site as an Image asset.
    1. Note the URL for the ICO file.
    2. Be sure that the permission on the Asset allow Everyone to view it.
  6. Edit your style template.
    1. If you are using one of the default WebGUI style templates, make a copy of it so that upgrades do not overwrite your work!
  7. Find the two link lines that refer to the icon and exchange their URLs from the hardcoded ones in /extras calls to the FileUrl macro for your newly created Image assets.

Original lines 

    <link rel="icon" href="/extras/favicon.png" type="image/png">
    <link rel="shortcut icon" href="/extras/favicon.ico">

Altered lines:

    <link rel="icon" href="^FileUrl(/url/to/png);" type="image/png">
    <link rel="shortcut icon" href="
^FileUrl(/url/to/ico);">

When you reload the page, you should see your icons.  You will need to commit your Image Assets and Style Template in order for others to see it.

Keywords: favicon

Search | Most Popular | Recent Changes | Wiki Home
© 2018 Plain Black Corporation | All Rights Reserved