How to Create Your Own Bookmark Icon
When you visit a website, you will often see a tiny icon symbol located in the left of the address bar before the website's address. That same icon appears in your bookmark list when you bookmark the page. If you have a website and want to create your own bookmark icon, you can do so with the appropriate software.
Other People Are Reading
Instructions
-
-
1
Open your image editing program (a program that came pre-installed on your computer like Microsoft Paint of Mac Paintbrush works fine). Utilize the tools (the background fill tool, the pencil, the paintbrush, the spray brush, the shape tools, etc.) provided within the image editing program to create the image you want to use as your bookmark icon. Size your icon to 16 pixels by 16 pixels by clicking on the "Attributes" button and inputting the values into the width and height boxes. Save your icon as a jpeg or bmp when you are finished by clicking "Save As" and selecting either jpeg or bmp from the "Save File Type As" drop-down menu.
-
2
Launch your icon file converter (See Resources if you don't already have one installed on your computer). Open your icon within the icon file converter by clicking on "Open" and selecting the jpeg or bmp from your computer's hard drive.
-
-
3
Click "Save As" and resave your file as an icon by selecting the ico file extension from the "Save File Type As" drop-down menu.
-
4
Copy and paste the following code into the head tag of your website in order for the bookmark icon to appear across your website: <link rel="SHORTCUT ICON" href="http://www.yoursite.com/favicon.ico">. Change the section that says "yoursite.com" to your website's URL and change the section that says "favicon.ico" to the name for your icon.
-
1
Tips & Warnings
You can make your bookmark icon slightly larger or smaller if you want, but keep the two measurements the same so that you create a perfect square icon that will fit appropriately in the address bar.
Your bookmark icon will not work if you forget to copy the HTML code that links to it into the head tag of your web page.
References
Resources
- Photo Credit blumen icon image by Marty Kropp from Fotolia.com
