Great! You have successfully added favicon to your website or blog by creating the favicon.ico file with Adobe Photoshop. If you would like to use PNG file as a favicon for your Website or your Blog than you will have to use the second link type from the quoted text given above. And the second type of link is for PNG file.
HOW TO MAKE A FAVICON FILE FOR WEBSITE HOW TO
If you want to use GIF file as a favicon than use the first link from the quotes above. Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, XML and more. The first link in the blockquote above is for gif image type. To use the PNG and GIF file as favicon than use the link type given below in place of above link to link your favicon file. If you would like to add favicon as PNG image than you can do it but keep in mind that it may not work in Browsers like Internet Explorer. Now a days almost all modern browsers support PNG and GIF file as favicon. Add this link in section of your webpage. See the link given below to know how to link favicon file.Ĭhange the link in red with your favicon.ico file address. After uploading the favicon file to your website root folder add the link of your favicon file in the head section of your webpage.Now you will need to upload this newly created favicon file in your Website's root directory (I mean the folder/directory at which your index page is kept).
HOW TO MAKE A FAVICON FILE FOR WEBSITE INSTALL
I should remind you that the ICO file format extension will be only available after you successfully install the Plugin in Photoshop. Now name the file as favicon.ico and choose ICO (Windows Icon) from the pulldown menu and than save it. After getting your favicon ready Go to File > Save As.After editing the image resize it 16 by 16 pixels. If your image looks still blur than try changing Contrast, Hue, Saturation etc. Now click on Resample Image and choose Bicub Sharper to make sure that the image don't looks blurry after resizing it to 16 x 16 pixels. When your design is ready than go to Image > Image Size and change the image dimension to 16 by 16 pixels.It is little difficult to create a very beautiful image in such a small size. If you are facing difficulties in creating your desired design for favicon icon than just keep editing until you create a design that will best fit your Blog or Site.
You can also start creating the file with much larger dimension but make sure that it will look good when resized to 16 by 16 pixels. Don't Worry about the size as we can resize the image later after creating the favicon image. Create an image of 72 pixels/inch resolution image with the dimension of 128 by 128 px.