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 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.</p></p> </div> <div id="section-1" class="section"> <script async src="//"></script> <!-- ISW_INLINE --> <ins id="inline-ads-4002356" class="adsbygoogle" style="display:inline-block;min-width:320px;max-width:1200px;width:100%;height:125px" data-ad-client="ca-pub-3235755782694080" data-ad-slot="7182359149"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div id="section-2" class="section"> <div class="step-block"> <span class="step-title">1</span> <p class="step-content"><p>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.</p></p> </div> </div> <div id="section-3" class="section"> <div class="step-block"> <span class="step-title">2</span> <p class="step-content"><p>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.</p></p> </div> </div> <div id="section-4" class="section"> <div class="step-block"> <span class="step-title">3</span> <p class="step-content"><p>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."</p></p> </div> </div> <div id="section-5" class="section"> <div class="step-block"> <span class="step-title">4</span> <p class="step-content"><p>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 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.</p></p> </div> </div> <div id="section-6" class="section"> <div class="step-block"> <span class="step-title">5</span> <p class="step-content"><p>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:</p> <p><link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" /> <link rel="icon" href="images/favicon.ico" type="image/x-icon" /></p> <p>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.</p></p> </div> </div> <div id="section-7" class="section"> <div class="step-block"> <span class="step-title">6</span> <p class="step-content"><p>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.</p></p> </div> </div> </div> <div id="google-article-block-4002356"> <script> var ad_height; var VIEWPORT_WIDTH = document.documentElement.clientWidth || document.body.clientWidth; if (VIEWPORT_WIDTH > 500) { ad_height = '455px'; } else { ad_height = '555px'; } </script> <script async src="//"></script> <!-- ISW_MAIN --> <ins id="ggads-4002356" class="adsbygoogle" style="display:inline-block;min-width:320px;max-width:1200px;width:100%;" data-ad-client="ca-pub-3235755782694080" data-ad-slot="2612558748"> </ins> <script> document.getElementById('ggads-4002356').style.height = ad_height; (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div><div class="items-section"> <h4>Items <span>you will need</span></h4> <ul class="items-section__list"><li class="items-section__list-item"> <button class="items-section__button" disabled>Adobe Dreamweaver</button> </li><li class="items-section__list-item"> <button class="items-section__button" disabled>Adobe Photoshop</button> </li></ul> </div><div id="taboola-desktop-below-article-thumbnails-4002356"></div> <div id="taboola-mobile-below-article-thumbnails-4002356"></div> <script> window._taboola = window._taboola || []; var VIEWPORT_WIDTH = document.documentElement.clientWidth || document.body.clientWidth; if (VIEWPORT_WIDTH > 500) { _taboola.push({ mode: 'thumbnails-a', container: 'taboola-desktop-below-article-thumbnails-4002356', placement: 'Desktop Below Article Thumbnails', target_type: 'mix' }); } else { _taboola.push({ mode: 'thumbnails-b', container: 'taboola-mobile-below-article-thumbnails-4002356', placement: 'Mobile Below Article Thumbnails', target_type: 'mix' }); } </script> <div class="section"> <h4>References</h4> <ul class="section__list"><li class="section__list-item"><i class="material-icons">link</i> <a href="" rel="nofollow"> <span> Favicon Generator</span> </a></li></ul> </div> <div id="author" class="section"> <h4>About the Author</h4> <p>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.</p> </div> <div class="section"> <h4>Photo Credits</h4> <ul class="section__list"> <li class="section__list-item"> <i class="material-icons">photo_camera</i> <span>Hemera Technologies/ Images</span> </li> </ul> </div> <div ub-in-page="59965284fb3fee021c2240be"></div> </article> <!-- SIDEBAR --> <aside id="sidebar"> <div class="socialshares"> <div class="col-md-3 col-xs-3 fb"> <a href="#socialshare" onClick="'', 'socialshare', 'width=550,height=450')" data-event="social share" data-info="Facebook"> <i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i> </a> </div> <div class="col-md-3 col-xs-3 twtr"> <a href="#socialshare" onClick="'', 'socialshare', 'width=550,height=450')" data-event="social share" data-info="Twitter"> <i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i> </a> </div> <div class="col-md-3 col-xs-3 lnkn"> <a href="#socialshare" onClick="'', 'socialshare', 'width=550,height=450')" data-event="social share" data-info="LinkedIn"> <i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i> </a> </div> <div class="col-md-3 col-xs-3 eml"> <a href="mailto:?subject=How%20to%20Put%20a%20Picture%20in%20the%20Title%20of%20a%20Webpage%20Using%20Dreamweaver%20%7C%20It%20Still%20Works&body=I%20found%20this%20article%20on%20It%20Still%20Works%20%7C%20Giving%20Old%20Tech%20a%20New%20Life%20and%20thought%20you%20would%20enjoy%20it%21%0d%0dhttps%3A//" data-event="social share" data-info="Email"> <i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i> </a> </div> </div> <div class="whitecard" style="text-align:center;"> <script async src="//"></script> <!-- ISW_LINK --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3235755782694080" data-ad-slot="3317068412" data-ad-format="link"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="rc whitecard"> <h3>Related Articles</h3> <ul class="rc__list"> <li> <a href="//"> <i class="material-icons rc__star-item">star</i> </a> <a class="" href="//"> <img class="rc__image" src="//" alt="How to Create a Folder on a Web Page"> </a> <a class="rc__text" href="//"> <span>How to Create a Folder on a Web Page</span> </a> </li> <li> <a href="//"> <i class="material-icons rc__star-item">star</i> </a> <a class="" href="//"> <img class="rc__image" src="//" alt="How to Upload Animated GIF Files"> </a> <a class="rc__text" href="//"> <span>How to Upload Animated GIF Files</span> </a> </li> <li> <a href="//"> <i class="material-icons rc__star-item">star_half</i> </a> <a class="" href="//"> <img class="rc__image" src="//" alt="What Are the Components of a Web Address?"> </a> <a class="rc__text" href="//"> <span>What Are the Components of a Web Address?</span> </a> </li> <li> <a href="//"> <i class="material-icons rc__star-item">star_half</i> </a> <a class="" href="//"> <img class="rc__image" src="//" alt="How to Remove Slices in Photoshop"> </a> <a class="rc__text" href="//"> <span>How to Remove Slices in Photoshop</span> </a> </li> <li> <a href="//"> <i class="material-icons rc__star-item">star_half</i> </a> <a class="" href="//"> <img class="rc__image" src="//" alt="How to Create Animated Waving Flags for Websites"> </a> <a class="rc__text" href="//"> <span>How to Create Animated Waving Flags for Websites</span> </a> </li> <li> <a href="//"> <i class="material-icons rc__star-item">star_border</i> </a> <a class="" href="//"> <img class="rc__image" src="//" alt="How to Make a Smaller KB and GIF Picture File"> </a> <a class="rc__text" href="//"> <span>How to Make a Smaller KB and GIF Picture File</span> </a> </li> </ul> </div> <div class="desktop-ad side-ad card" id='300x250_300x600_atf-rightrail1-1'> <script type='text/javascript'> if (VIEWPORT_WIDTH > 775) { googletag.cmd.push(function() { googletag.defineSlot('/6117/itstillworks/rightrail1-1', [[300, 250],[300, 600]], '300x250_300x600_atf-rightrail1-1').setTargeting('loc', ['atf']).addService(googletag.pubads()); googletag.display('300x250_300x600_atf-rightrail1-1'); }); } </script> </div><div class="rc whitecard" class="widget"> <h3>Popular Articles</h3> <ul class="rc__list"> <li> <a href="//"> <img src="//" alt="" title="How to Make a Website in Adobe InDesign"/> </a> <a class="rc__text" href="//"> <span>How to Make a Website in Adobe InDesign</span> </a> </li> <li> <a href="//"> <img src="//" alt="" title="How to Create a PNG Icon"/> </a> <a class="rc__text" href="//"> <span>How to Create a PNG Icon</span> </a> </li> <li> <a href="//"> <img src="//" alt="" title="Why Does My Web Page Say Untitled?"/> </a> <a class="rc__text" href="//"> <span>Why Does My Web Page Say Untitled?</span> </a> </li> <li> <a href="//"> <img src="//" alt="" title="How to Move Text Around an Image With HTML or CSS"/> </a> <a class="rc__text" href="//"> <span>How to Move Text Around an Image With HTML or CSS</span> </a> </li> <li> <a href="//"> <img src="//" alt="" title="How to Convert an Image to an Icon for Free"/> </a> <a class="rc__text" href="//"> <span>How to Convert an Image to an Icon for Free</span> </a> </li> </ul> <div class="clearfix"></div> </div> </aside> </div> <script type="text/javascript"> window._taboola = window._taboola || []; _taboola.push({flush: true}); </script> <script src="/scripts/infscroll.js"></script> <style> .lb-ads-wraper { text-align: center; margin-top: 0px; margin-bottom: 20px; } </style> <script> $(function() { $('#content').infScroll({ getLink: '.rc__list:first', getContent: '.readable-background', contentLoading: '<div class="loading" style="text-align: center"><img src="/images/working.svg" height="40px" alt="It\'s still working"/> It still works</div>', onPageChange: function (index, page) { $('.socialshares').hide(); $('.socialshares:eq('+index+')').show(); }, contentReplace: function(index, url) { var page = index + 1; return { '970x250_728x90_atf-horizontal1-1': '970x250_728x90_atf-horizontal'+page+'-1', '/6117/itstillworks/horizontal1-1': '/6117/itstillworks/horizontal'+page+'-1', '300x250_300x600_atf-rightrail1-1': '300x250_300x600_atf-rightrail'+page+'-1', '/6117/itstillworks/rightrail1-1': '/6117/itstillworks/rightrail'+page+'-1', '300x250_atf-slot1-1': '300x250_atf-slot'+page+'-1', '300x250_atf-slot1-2': '300x250_atf-slot'+page+'-2', }; }, onFinishLoad: function(index, url, data, $data) { // Load next leaderboar ads here var leaderboard = $('.leaderboard', $data); if (leaderboard.length > 0) { var $wraper = $('<div class="lb-ads-wraper"></div>'); $wraper.append(leaderboard.children()); $('#content').append($wraper); } } }); }); </script> </main> <footer class="footer"> <div class="footer--logo"> <img src="//" alt="Leaf Group"> <div class="footer--copyright"> <span>Copyright 2018 Leaf Group Ltd.</span> </div> </div> <ul class="footer__link-list"> <li> <a title="facebook" href="" data-event="footer follow" data-info="Facebook" target="_blank"> <i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i> </a> </li> <li> <a title="twitter" href="" data-event="footer follow" data-info="Twitter" target="_blank"> <i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i> </a> </li> <li> <a title="about-us" href="//"> <span>About Us</span> </a> </li> <li> <a title="terms-of-use" href="//"> <span>Terms of Use</span> </a> </li> <li> <a title="privacy-policy" href="//"> <span>Privacy Policy</span> </a> </li> <li> <a title="copyright-policy" href="//"> <span>Copyright Policy</span> </a> </li> <li> <!-- Ghostery Inc tag cid: 374 pid: 46 --> <a id="_bapw-link" href="#" target="_blank" style="color:#000000 !important;font:11pt Arial !important;text-decoration:none !important"><img id="_bapw-icon" style="border:0 !important;display:inline !important;vertical-align:middle !important;padding-right:5px !important;"/><span style="vertical-align:middle !important">AdChoices</span></a> <script type="text/javascript"> (function() { var ev = document.createElement('script'); ev.type = 'text/javascript'; ev.async = true; ev.setAttribute('data-ev-tag-pid', 46); ev.setAttribute('data-ev-tag-ocid', 374); ev.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + ''; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ev, s); })(); </script> </li> </ul> </footer> <script async src="//"></script> <div id="outofpage"> <script type="text/javascript"> googletag.cmd.push(function() { googletag.display("outofpage")}); </script> </div> <script> $(function(){ }); </script> </div> <script type="text/javascript"> var vglnk = { key: '9e9be8ac3deebc7b5961bfe3f93f3fe1' }; (function(d, t) { var s = d.createElement(t); s.type = 'text/javascript'; s.async = true; s.src = '//'; var r = d.getElementsByTagName(t)[0]; r.parentNode.insertBefore(s, r); }(document, 'script')); </script> <!-- begin usabilla embed code --> <script>/*{literal}<![CDATA[*/window.usabilla||function(){var a=window,d=a.document,c={},f=d.createElement("div"),h=!1,a=a.usabilla=function(){(c.a=c.a||[]).push(arguments)};a._=c;c.ids={};"none";(function(){if(!d.body)return setTimeout(arguments.callee,100);d.body.insertBefore(f,d.body.firstChild).id="usabilla";h=!0})();a.load=function(a,g,k){if(!c.ids[g]){var e=c.ids={};e.url="//"+a+"/"+g+".js?s1";e.config=k;setTimeout(function(){if(!h)return setTimeout(arguments.callee,100);var b=d.createElement("iframe"),a;"usabilla-"+g;/MSIE[ ]+6/.test(navigator.userAgent)&&(b.src="javascript:false");f.appendChild(b);try{}catch(c){e.domain=d.domain,a="javascript:var;d.domain='"+e.domain+"';",b.src=a+"void(0);"}try{var l=b.contentWindow.document;l.write(["<!DOCTYPE html><html><head></head><body onload=\"var d = document;d.getElementsByTagName('head')[0].appendChild(d.createElement('script')).src='",e.url,"'\"></body></html>"].join(""));l.close()}catch(m){b.src=a+'d.write("'+loaderHtml().replace(/"/g,String.fromCharCode(92)+'"')+'");d.close();'}b.contentWindow.config=k;b.contentWindow.SCRIPT_ID=g},0)}}}(); window.usabilla.load("", "7c5239e539cc"); /*]]>{/literal}*/</script> <!-- end usabilla embed code --> <!-- Quantcast Tag --> <script type="text/javascript"> var _qevents = _qevents || []; (function() { var elem = document.createElement('script'); elem.src = (document.location.protocol == "https:" ? "https://secure" : "http://edge") + ""; elem.async = true; elem.type = "text/javascript"; var scpt = document.getElementsByTagName('script')[0]; scpt.parentNode.insertBefore(elem, scpt); })(); _qevents.push({ qacct:"p-4dIM5nVs2rFio" }); </script> <noscript> <div style="display:none;"> <img src="//" border="0" height="1" width="1" alt="Quantcast"/> </div> </noscript> <!-- End Quantcast tag --> <script src="//"></script> </body> </html>