Favicon Assignment
A favicon is a graphic image associated with a particular Webpage and/or Website. Often they are displayed as a visual reminder of the Web site identity in the address bar, in tabs, on the bookmark bar, or in the bookmark list.
Your task is to create 3 - 6 unique favicons
Your task is to create 3 - 6 unique favicons
Step 1: Build the Favicons
A favicon is a graphic image associated with a particular Webpage and/or Website. Often they are displayed as a visual reminder of the Web site identity in the address bar, in tabs, on the bookmark bar, or in the bookmark list.
Method 1: In Photoshop, Illustrator, Fireworks or other graphics program
Method 2: Utilize a Favicon Generator such as: (note some even have animation)
An alternative, but not for this assignment, is to find an icon on the Internet (but remember it is more fun to create your own)
Method 1: In Photoshop, Illustrator, Fireworks or other graphics program
- Create new document ->size:16px x 16px or or 32x32 pixels, using either 8-bit or 24-bit colors
- Create something simple that best describes your site
- The format of the saved image must be one of PNG (a W3C standard), GIF, or ICO. (name.extention)
Example: favicon.ico
Method 2: Utilize a Favicon Generator such as: (note some even have animation)
- http://www.favicon.cc/
- http://www.dagondesign.com/tools/favicon-generator-tool/
- When you save, they will likely go to the "Downloads" folder
An alternative, but not for this assignment, is to find an icon on the Internet (but remember it is more fun to create your own)
- Rename it to favicon.ico
- Note if the icon is not an actual icon with the extension .ico, simply changing the filename extension of an image to .ico without converting it to an ICO file will result in an error and not displaying the favicon.
Step 2: Display the Favicon
- Save or download, your favicon to your assignment folder: "filename.png", "filename.gif", or "filename.ico" depending on the program or generator used
- Take a screen shot of your favicon using Grab or keyboard shortcuts. If you use Grab, the image will be saved as a tiff format. You will then need to open the image in Photoshop and Preview and save or export in the png format for your website portion of this assignment.
- For each of your favicons, create a page that displays the large screen shot of your favicon along with a title.
Basic Format: <link rel="shortcut icon" href="path and file name" />
Example: <link rel="icon" href="images/favicon.ico"/>
<link rel="icon" href="/somewhere/myicon.png" />
- Finally you should create a home page or intro page that introduces the assignment and includes links to each of the pages that displays your completed favicon in both the body and in the tab and URL bar.
My suggestion would be to have your favicons displayed on the intro page and then act as hyperlinks to the specific pages of your site.
You might even want to have a unique favicon for this page (or display your favicons
- Publish your site. The favicon will appear in the address bar (and also in the Favorites / Bookmarks menu when saved) of your browser.
Testing