How to Make a Favicon icon

When you visit different websites you may see the small picture or logo on the left hand side of the address bar [see picture below]. This is called a Favicon. You can make your own Favicon icon for your website or blog. It removes the same old looking browser icon and personalise as you want as well as it gives a professional look. [assuming you have Windows operating system]

Favicon icon

Favicon icon

Steps

1. Create a new folder on your desktop.

You can download a favicon ready to go, and/or create your own.

  • Ready2go Favicons should be 16 X 16 pixels with 16 colors and already an .ico file extension.
  • Create a folder as opposed to a file, in the web page folder of your html editor. This folder must be called favicon.ico Copy your downloaded favicon .ico image into this.
  • Create an address on your html home page. Between the and copy in
    exactly. This should place the icon on all your address bar web pages.
  • Open your FTP transfer. Open your favicon.ico web page folder. Transfer or slide your favicon file (not folder), in this case PieEye.ico, over to your on-line web pages on the server. Next find the PieEye.ico file on the on-line server, and change name PieEye.ico to favicon.ico

2. Put individual icons on different pages of the same website:

  • Create a folder in ‘on line server’ side of your FTP. Call it say ‘Fave’. Transfer from your local C Drive favicon.ico folder, the individual favicons that you want to post on varying webpages.
  • On each individual html page that you wish there to be an individual favicon: between the put in
    where ‘Fave’ is the name of the folder and ‘Name’ is the name of the .ico file. This should cause any separate individual favicon to apply to those posted with
    while the rest of your pages will show ‘Homepage’ favicon. The server-side favicon.ico file remains, and should cover all other pages.
  • Can individualize as many pages as desired.
  • Icons can be tricky so if one has problems perhaps consult Google.

3. Make your own favicons:

  • To begin download a an icon of any size, color range or file type. You will need to use a program to make the image 16×16 pixels square. Use any graphics program such as Paint, GIMP, Photoshop, or (my favorite) freeware Irfanview. Just about all graphic programs allow you to crop an image to a square. Only a few have the save as “.ico” option. Particularly, if you want to use Photoshop you will have to install a plugin to be able to work with “.ico” files. You can create your favicon at a size of 32 by 32 pixels and it will still work, but keep in mind that most browsers will reduce it to a 16 by 16 pixels image before showing it in the address bar or bookmarks/favorites. Knowing this it may be prudent to just start with a 16 by 16 pixels image to retain control of how the final image displays.





4.Irfanview:

  • Use free download Irfanview to adjust the size, color depth and extension of your icon. Put Irfanview in your desktop/Icon/folder. Open any downloaded icon or graphic in Irfanview from desktop icon folder. Click Image/Resize and resample. Type width 16 and height 16 pixels/OK. Open Image again and click Decrease color depth. Click 16 colors/OK. Open Options/Set file associations/check ico/OK. Open File/’Save As Binary encoding/Save transparent color and then ‘save as’ to desktop/Icon folder. Will name it for reference ‘PieEye’.
  • If you have a square image that you would like to use as a favicon then you might consider using a free tool from online. To find a free favicon icon converter just search on google. If you don’t have a photo or other image to use then begin a new image that is 16 pixels by 16 pixels. The complexity of your original icon is restricted to your own creativity and your knowledge of the image program you are using. Save it in a safe place, being sure to name your icon ‘favicon.ico’. This is the only way browsers will be able to display your icon in the address bar. It MUST have that exact name.

Tips

  • Even though your icon will be very small, be sure that other people can easily read/understand it.
  • 16×16 pixels is a standard size for small icons. This means that you can import already made icons from programs or off the web.
  • Speed it up with Linux! Just choose an appropriate picture, open your command line, navigate to the directory where you store the pic and type: “convert picture.png -resize 16×16! favicon.ico” (replace picture.png with your pic’s filename) done !
  • If you do not have access to ftp, simply go to www.dynamicdrive.com, then look in the left pane near the top, under tools. There will be a favicon generator there which really is quite simple.

Warnings

  • Although you have created your favicon successfully, not everyone who visits your site will see it. Only Internet Explorer versions 5.0+ display favicons, as well as Netscape 7.0+, Opera 7.0+, and Firefox. Older browsers simply do not display your icon. Also, for a favicon to display in the address bar of Internet Explorer versions 5.0+ the page must first be saved as a favorite. Then it will show up the next time you click on the favorite or hand type in the URL in the address bar. There have also been issues with getting Safari to show favicons as well.


Article provided by wikiHow, a wiki how-to manual. You can edit this article and find author credits at the original wikiHow article on wikiHow. All content on wikiHow can be shared under a Creative Commons license.

Leave a Reply