Your source for fun, free games-services-software
Free Favorites Icon Tutorial
Free Favorites Icon Tutorial easily create your own browser favorites icon for your website follow this simple tutorial showing the icon specifications and instructions to easily create a favicon.ico.
Your browser favorites icon will work in all modern browsers, it will be shown next to your web address in the address bar instead of the default browser icon.
Your new free favorites icon will also be saved as the display icon when a user bookmarks or adds your site to their favorites in Internet Explorer proceed with the following free favorites icon tutorial.
Here is our favorites icon shown as an example:
Yes, it is very small but if you think about it, it has to fit in the small space on the browser address bar and favorites row. The size is 16 pixels X 16 pixels.
Favorites Icon Specifications
- It must be named favicon.ico
- The size must be 16 pixels X 16 pixels
- It must be created using 24 bit color
- It must be saved as an icon of course
- It must be placed in the top level public folder.
How to create a favorites icon
- Use an image editing program like Adobe Photoshop or GIMP to create your icon. Create a new image or use an image you found somewhere and resize it to 16 X 16 pixels.
When you take a large picture and make it small it tends to get jagged edges and look crappy. So what you want to do is choose a smaller image to start with or choose an image with large simple objects so it will reduce more clearly.
You can always use your website initials with a border and background using your website colors. That would look nice and set you apart from other sites.
Another tip, look at it double size at 32 pixels because if someone creates a shortcut to you site on their desktop it will blow up the size of your icon to double size.
- When you are creating or modifying an existing image make sure you save it as a 24 bit per pixel image or 24 bit color. You will have to read the help file for your image editing program for directions on how to do that with your specific program.
- Then save it as an icon and name it favicon.ico.
- Take the icon you made and upload it your public directory, the place you put all of your other pages. Don't put it in a folder put it in your top level public folder.
- If you like you can put this line of code in between the head tags of your web page. Or you don't have to the browser will automatically look for an icon. Here is the code if you choose to use it:
<link rel="shortcut icon" href="https://www.yoursite.com/favicon.ico">
(Replace yoursite.com with your domain.)
- That's all there is to it. If for some reason it doesn't work make sure the image is saved or created as a 24 bit color image , it is 16 pixels square, it is named favicon.ico and it is uploaded to the correct place.
Try closing your browser and reopening it again.
