How to Add a Picture in the Address Bar

Save

If you have surfed the web, you have probably noticed that some websites and blogs have tiny little images located next to the web address in your browser bar. This image is called a favicon. In just a few steps, you can create a favicon and install it into your website's files. This will make the small photo load next to the address bar anytime someone visits a page on your website.

Things You'll Need

  • Computer
  • Internet access
  • Image of choice
  • Photo editing software
  • Pick an digital image that you want to use as your address bar logo. Use a picture that is brightly colored and large. Images that are too small or too busy will not translate well to a favicon.

  • Use a photo editor to resize your image. Most computers have a photo editor installed. If you don't have photo editor software on your computer, you can download a free one at irfanview.com.

  • Resize the image to a size of 16 by 16 pixels. Save the new, smaller image to your computer using the file name "favicon.ico." Do not save it as a .jpg or .gif, because those file extensions will not work as favicon images.

  • Use an FTP utility (such as filezilla or CuteFTP) to upload the image to your host's server. Upload it to the public_html file, or whatever file you store your website files in.

  • Alter your website's css (cascading style sheet) to include the favicon's file. After the <header> tag, but before the </header> tag, insert <link rel="shortcut icon" href="/favicon.ico" />

  • Save the new version of the css. Refresh your browser to view the newly installed favicon.

References

  • Photo Credit Jupiterimages/Pixland/Getty Images
Promoted By Zergnet

Comments

You May Also Like

Related Searches

Check It Out

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

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