Portfolio Design: Branding

Creating a Favicon

A favicon is most commonly used in the web browser URL bar. It is small image that when a user types in the URL to a website, the small icon appears to left of the URL. If a website does not have a favicon, by default, the favicon is usually an icon of the browser such as the Internet Explorer "e".

Most favicons are simply the company's logo. It's another technique of branding a company uses to market to consumers.

For our purposes, you will create a favicon for the portfolio page on the BIS website – check out the portfolio page to see an examples.

Creating a Favicon

Use either Photoshop, Fireworks, or Illustrator. NOTE: use the software you are most comfortable with

Do the following:

  1. Create a new image 40px x 40px
    • Here's a tip: when designing a small image, it's easier to start large then resize the image later, but you need to do so in proportion. So, instead of 40px, you could start with 400px so it's easier to design. You could start with 40px and then zoom in, but this is often pixelated and difficult to work with. Just make sure you resize the image after you're finished.
  2. Design a simple icon that reflects you and your style
    • Here's a tip: because the image will only be 40px, it's essential the design is clean and simple. A complex design will not display well at this size. Simple lettering is best, but you can pull off a simple symbol if it's farily one dimensional.
  3. Save the file as a PNG format. Name the file "favicon" and save it with in your portfolio files make sure you resized the image to 40px by 40 px before saving it!
    • The location is extremely important. Make sure you place the file in the root folder – this should be the folder named: lastname_firstname_portfolio. You do NOT need to save it in your images folder – see the image below for how your file structure should look
    • File Structure
    • When inserting a real favicon, you will save the file in the root folder just like above.

Next Steps

Before you jump to publishing your portfolio to the web server, take the time to read through Posting Portfolio Checklist