Classic Websites Platform: Using Favicons

An icon to represent your site
HAVE A RESPONSIVE TEMPLATE? If so, please instead consult the
Responsive Templates section for support. 

 

First, what is it? A favicon, or favorite icon, is a 16x16 pixel image that gets loaded in the URL window by most web browsers and is used for everything from the icon on a tab to your browser's bookmarks list. Favicon's are good to have because they help to brand your website and provide a constant visual cue to your clients. This reassures the client that they are still dealing with 'me' via photoshelter and it also maintains my brands visual consistency as much as possible. 

 

favicon example
 

 

Creating a Favicon

1. Download and install the ICO (Windows Icon) plugin for Photoshop. This is necessary to save the file in the proper format.

2. Launch Photoshop and create a new document 16 pixels square at 72ppi and design your favicon. If the canvas is too small to handle try a larger document sized in multiples of 16 pixels. Once design is complete resize the file. The final dimension MUST be 16x16 pixels 72 ppi.

3. From the Photoshop "Save As" command name the file and select "ICO (Windows Icon)" from the format pulldown list. Save your file 'favicon.ico'

 

I've created my Favicon... now what?

Now you'll place the file on your web server. Store your favicon in the root of your web directory as it's the first place a browser will check (so it becomes the safest place to store the file). The path to your favicon will look like this:

http://yourdomain.com/favicon.ico

With the favicon in the root of your web directory, insert the following code at the top of yourPublic and Customer master page templates, making sure you enter the correct URL for your favicon.

<link rel="shortcut icon" href="http://yourdomain.com/favicon.ico" type="image/x-icon">

NOTE: If you have set up a "www" CNAME for use with your PhotoShelter site, and/or you are forwarding your domain to your CNAME, you must host your favicon on a different server; you will not be able to store it in the root of your web directory. In this case, you may want to upload the favicon to a free hosting service that supports .ico files.

 

Clear that cache

Most browsers will cache favicons instead of checking for it each time you visit a site, so you may need to clear your browser's favicon cache. Note also that IE6 users will need to actually bookmark the site before seeing the favicon.

 

FAQ

Can I use my favicon with a template driven customization?

No sorry the favicon will only work with Manual Customization types in which users have deployed a hybrid strategy whereby some pages are served from their website (e.g. a homepage, bio, contact, blog, etc), and the functional pages are served through the PhotoShelter customization.

I have a manual customization but the favicon still will not load. Why?

The favicon instructions provided above will only work with Manual Customization types in which users have deployed a hybrid strategy whereby some pages are served from their website (e.g. a homepage, bio, contact, blog, etc), and the functional pages are served through the PhotoShelter customization. If you are forwarding your domain to your customized PhotoShelter site your favicon will not load.

How come my URL and favicon changes to PhotoShelter?

Many PhotoShelter pages interact with secure pages which require the user to be logged in (authenticated). Because of our concern for your security, all authentication is done on our secure web servers. Besides the large cost to secure your own SSL certificate, there are technical considerations that make permanently displaying your vanity domain and favicon impractical.

Still have questions? Contact us.

Comments

Powered by Zendesk