Category Archives: design

Favicon Icons

Alright, it is time for the long promised favicon walk-through.  So here we go:

Step 1. Design an icon.  Open Photoshop and create a new document.  Favicons are super small – in the browser they only show up as 16px by 16px, but if someone copies your link to their desktop, the icon will probably show up as a 48×48 or 57×57.  For that reason, I suggest an end goal of 57px by 57px.  However, designing at a 57×57 document is pretty hard because everything will be super blocky and pixilated.  300 x 300 is easier to design, BUT THE IMPORTANT PART – select a transparent background and 72 dpi (screen-size dots per inch)!

Step 2.  Re-size your icon.  In Photoshop, go Image -> Image Size.  Change the width/height to 57 pixels by 57 pixels.

Step 3.  Save your icon.  There are two different file types you can use: .png and .ico  There are pluses and minuses to both though.  .png works with nearly all browsers (EXCEPT Internet Explorer).  .ico works with ALL browsers but Photoshop cannot save as a .ico without a plugin.  There are many free/donation plugins but you have to download and install them which will allow you to save as an .ico.  Here is a link to one: http://www.telegraphics.com.au/sw/

Step 4:  Upload the file to your server and add in the code.  This code needs to go into the <head> section of your page (NOT the <header>).  Remember the <head> section is for things that are not inside the actual browser window (which is the <body> section).  The code is:

<link rel=”icon” type=”image/(filetype which is ico or png)” href=”(the file location on your server)” />

So an example would be:

<link rel=”icon” type=”image/png” href=”images/myicon.png” />

You will have to include this code in all of your html pages, so if you have different folders that html pages are in you will have to adjust your href file location.

There you go, have fun.

Perfectly proper

After going through the first assignment, I wanted to give you a few pointers:

Example of a perfect img src:

<img src=”_MG_5013_web.jpg”  width=”800″ height=”533″ alt=”The streets of San Cristobal.”/>

Order inside doesn’t matter but remember to open and close everything and everything in the img src needs “…”

Secondly, coding structure:

<head>

*Think of the head has formatting and preparing your webpage but NOT what goes near the top of your actual page*

<title>Title goes here and is what appears at the top of the browser window</title>

</head>

*Nothing should be between the head and body, this is no-man’s land and things here are just floating*

<body>

*THIS is where your actual page begins.  This is what actually appears within the browser window.  Everything at the top goes first in the body, everything at the bottom goes last*

</body>