How to Put a Picture in the Title of a Webpage Using Dreamweaver

by Craig Witt

Strictly speaking, it is not possible to include images within the <title> section of an HTML document. What web users typically perceive as a picture next to a webpage title is actually a small image called a favicon. The term is a shortened version of "favorite icon," so named because it most commonly appears next to the title of a webpage saved to the Favorites folder of a web browser. Use Adobe Dreamweaver to insert a favicon into your webpage's title.

1

Select an appropriate image. Favicons are very small, measuring just 16 pixels square, so the image you select must be simple enough to remain legible at miniature size. Complex logos often look cramped or appear to have jagged edges when resized to 16 pixels. If this happens to you, consider using an alternate image that does not include your logo but instead reflects either the type of content on your website or the site's color palette. In either case, make certain your image is a perfect square to ensure even reduction.

2

Resize your image. After choosing an image that reduces well, open the file in Photoshop. In the menu at the top of the screen, select "Image," then click "Image Size." In the resulting dialog box, change both the width and height of the image to 16 pixels, then click OK.

3

Save your image as a GIF or PNG. GIF and PNG images experience the fewest problems when converted to ICO format in the following step. To save your image in one of these formats, select "File" from the top menu in Photoshop, then click "Save As." Give your favicon file a name, then click the drop-down menu below the file name field and select either the "Compuserve GIF" or "PNG" option. Click "Save."

4

Convert your image to ICO format. Photoshop cannot save image files to the required ICO format on its own. Instead, you must either download a Photoshop plug-in or use a web utility. For example, use the free favicon generator from the favicon.cc website (see References). From the front page of this site, click the "Import Image" button. Locate the GIF or PNG file created in Step 3 and click "Upload." Within a few seconds, the utility will transform your file into a 16-square-pixel image. To save this to your computer in ICO format, locate the heading labeled "Preview" near the bottom the page, then click "Download Favicon." Save this file to the folder with the rest of your webpage files.

5

Add the favicon to your webpage. Favicons link to individual webpages in the same manner as external files, such as JavaScripts and Cascading Style Sheets. Open your webpage in Dreamweaver, then switch to Code view by selecting "View" from the menu at the top of your screen and clicking the "Code" option. Next, include the following code between the opening and closing <head> tags of your web page and after the <title> tags:

<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" /> <link rel="icon" href="images/favicon.ico" type="image/x-icon" />

This code assumes the favicon exists in the images folder. If you place your favicon elsewhere, update the location contained in each href attribute. Why do you need to include two links? Cross-browser compatibility. Internet Explorer 7 handles favicons differently than other browsers and requires a unique rule to ensure accurate presentation.

6

Save your webpage, then open it in your browser. You will now see your favicon. If your browser is already open, you may need to completely close and restart it before the favicon appears. Also note that some browsers show favicons for page titles located in the Favorites folder only, not the title bar of the browser itself.

Items you will need

About the Author

Craig Witt has written professionally since 2005 in the public and private sectors as a journalist, marketing copywriter and public relations professional. He most often writes consumer software and hardware how-to articles for eHow. Witt has a Bachelor of Arts in communications from the University of Washington.

Photo Credits

  • photo_camera Hemera Technologies/AbleStock.com/Getty Images