Web developers should ensure that campus unit Web sites clearly indicates that the site is part of the campus Web presence.
- Display the I Mark with a buffer zone around it
- Display the campus name on the page and in the titlebar
- Display the unit name in text only
- Use the campus favorites icon
More detail appears below.
The I Mark and the text "University of Illinois at Urbana-Champaign" "University of Illinois" or "Illinois" must appear prominently on the home page. Campus units can meet both guidelines at once by using the Illinois logo (preferred) or the Urbana-Champaign logo instead of the I Mark and campus name text.
The I Mark must be linked to http://illinois.edu and be separated from other design elements by a buffer zone. The ALT attribute text is “University of Illinois at Urbana-Champaign logo.”
The text “University of Illinois at Urbana-Champaign," "University of Illinois," or "Illinois" must appear in the titlebar of a campus unit’s home page. The name of the campus unit should precede it.
Home Page Title Examples
- Public Affairs, University of Illinois at Urbana-Champaign
- Public Affairs, University of Illinois
- Public Affairs, Illinois
Interior Page Examples
- Resource Library, Public Affairs, Illinois
- Resource Library, Public Affairs, U of I
The campus favorites icon, or favicon, must be placed in the root level of the campus unit’s site. It must remain as originally drawn and proportioned, including the colors, and cannot be modified. Web browsers display favicons in the address bar, next to the page’s name in bookmarks, or next to the tabbed page’s title in a browser. View an example.
Download the Favicon
To download the favicon, go to http://illinois.edu/favicon.ico and follow these instructions:
PC: Click your right mouse button on the image. Choose "Save picture as" and then save the file to your hard drive.
Macintosh: Click and hold your mouse button on the image. Choose "Save image to the desktop" and then move the file to any directory (or folder) on your hard drive.
Move the "favicon.ico" file to your Web site.
You may also obtain the favorites icon by emailing firstname.lastname@example.org
Place the following line of code inside the head element, substituting the URL in the appropriate place:
<link rel="shortcut icon" href="SOMEWHERE/favicon.ico" type="image/x-icon" />
If the I Mark and campus name text are used as separate elements on the home page, the following guidelines apply:
'Above the Fold'
The I Mark and campus name text must appear without scrolling in an Internet Explorer 7 browser window with the text size set to medium on a monitor with a display resolution of 1024 x 768.
The I Mark may not be reduced below 26 pixels in width and must remain proportionate. Images of the I Mark that have been hand-customized to render correctly onscreen in three different sizes are available in the downloads section.
Ways to accomplish visual prominence for the I Mark and the campus name text include:
- Using sufficient space between the I Mark and campus name text and other graphics and text on the page to allow clear recognition and add focus, attention, and distinction. A buffer zone equal to one-third of the height of the I Mark must separate the I Mark from other elements on the page. Note: A buffer zone larger than one-third of the height of the I Mark is preferred. Designers should not place any design element in close proximity to the I Mark in an attempt to make the two appear to be a unit.
- Evaluating the relative importance of elements on the Web page and using visual organization to allow users to quickly identify the connection to the university.
- Ensuring that there is a sufficient level of contrast between the I Mark and campus name text and background colors or images.
Full Guideline Examples
- View a labeled example of the Public Affairs home page as rendered in Opera.
- View a Web page that should be edited to follow the guidelines.
The standard I Mark must appear on all newly created second- and subsequent-level Web pages. While the I Mark is most commonly used in a footer (see the bottom of this page for an example), Web designers are free to place the mark anywhere on the page.
According to the university's legal counsel, while copyright notice is no longer required in the U.S. in order to preserve ownership rights, there are good reasons for including it. It puts viewers on notice that:
- You are claiming rights
- Who you are
- When you started claiming rights for this expression fixed in a medium.
Including the notice means people are:
- less likely to use copyrighted material without asking more likely to contact campus units about obtaining permission
- more likely to give attribution, and more likely to agree to other conditions or even denial of permission as appropriate.