How to Put a Picture in the Title of a Webpage Using Dreamweaverby 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.
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.
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.
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."
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.
<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.
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
- photo_camera Hemera Technologies/AbleStock.com/Getty Images
Click here to provide feedback on this article