Changing a Website Icon


All modern web browsers, including Firefox, Internet Explorer and Safari, display miniature icons in their menu bars that change depending on the website you are currently viewing. These icons are selected by the developer of a website, and if you own or design a web page you can change its icon so that visitors will see a certain image every time they load your site.

Creating the Icon

  • Due to the constraints of web browsers, the website icon you choose to use must be a square and be exactly 16 pixels by 16 pixels. If the image you want to use as your icon is a different shape or a larger size, you can use an imaging program like Adobe Photoshop, Microsoft Paint or Apple Preview to crop and shrink it. Once you have created an appropriately sized icon, name the file "favicon" and save it as a .GIF or .PNG file.

Converting the Icon

  • Before you can change your website's icon to the image you have created, you must convert the .GIF or .PNG file to a .ICO file, which is a special file format for web icons. The easiest way to convert a web icon is to use the FavIcon Generator tool (see "Additional Resources," below). Simply use the online tool to navigate to your .GIF or .PNG image and then click on the "Create Icon" button. Save the .ICO file to your hard drive and then upload it to your active web server. Make sure that the file is named favicon.ico and is stored in the root level of your server

Setting the Website Icon

  • Once the favicon.ico file has been saved onto your web server, you can edit the pages of your website to set the image as your site's official icon. To do so, open one of your site's pages in a web-editing application like Adobe Dreamweaver, and insert your cursor inside of the "<head>" tags at the top of your HTML code. Then type "<link rel="SHORTCUT ICON" href="favicon.ico">" and save the code. The webpage will now be directed to use the new icon you have created, and it will be displayed in web browsers when others visit your site.

Related Searches


Promoted By Zergnet



You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!