What's a favicon you ask? Specifically, a Favicon is a little custom icon that appears next to a website's URL in the address bar of a web browser. You can also find them as graphical icons in the websites you bookmark, on browser tabs to the left of the tab name and as icons for Internet shortcuts on your desktop or other Windows-based folders. As is true with all icons, these images are small, as in 16 pixels by 16 pixels small.
All cool and good but if you're like me what you really want to know is how you can make your own. Additionally, what, if any, tips or tricks exist that will help not only create favicons but also help you navigate any obstacles associated with the process? Right?
Favicon basics: Favicons are created as a file format ending in ".ico." To create these wonderful little graphics you will need to upload the Windows file called favicon.ico to the main directory of your website. Secondly, if you are going to use Photoshop to create your little wonder, you will need to download the Windows Icon (ICO) file format Photoshop Plugin to export to the .ico file format. You'll want to make sure this is done prior to attempting your first 16 pixel wonder as this is not a file format natively supported in Photoshop.
How do you create a favicon? Well first it is helpful to know what you want to create! Second, a 16x16 pixel canvas is an awfully small canvas, so try enlarging your canvas equally (keep it square) to give yourself a little more room with which to work. If you have a logo or image you think will reduce well, you can try reducing it to the 16x16 size and see how it looks. Most logos, even cleanly created, will need some adjustment to look good and clear at such a small size. HINT: To create a new document that is 64x64 pixels in size, click on File, New and set the Width and Height to 64 pixels each.
HINT: To test your design, click Image, Image Size and enter 16 for both the height and width. Check the Resample Image checkbox and select "Bicubic Sharper" from the drop-down menu (CS only for this step). This ensures the image doesn't blur as it's being resized.
To SAVE your fabulous icon, click on File, Save As and make sure you name the file favicon.ico. HINT: Saving the favicon to the local root folder of your website now is advisable since you will need to upload it to your site's remote directory for it to appear on the web. You must choose Windows Icon (ICO) from the format drop-down menu. This format is only available after you download/install the Photoshop plugin. the root folder of your website, so it's a good idea to navigate and save it to that location on your hard drive now.
Upload the favicon.ico file to the same directory as your index.html file (Home Page). DO NOT place it in any other area! Placing it there will ensure browsers find your favicon easily.
To add your favicon to your HTML code, do the following: Add this link in the head section of each page on which you want the Favicon.ico to appear.
link rel="Shortcut Icon" href="/favicon.ico">
Once you've added this code, upload all of your modified pages.
(Some people suggest that the following is actually more correct: link rel="icon" href="/favicon.ico" type="image/x-icon"> You can use both if you want!)
If you want to use a GIF or PNG instead, use this format instead (just remember that it won’t work in IE):
link rel="icon" href="/favicon.png" type="image/png"> or
link rel="icon" href="/favicon.gif" type="image/gif">
You should now be able to see your favicon on the far-left side of your browser’s address bar, in the Favorites area next to the text if you saved a shortcut to your site and on your Windows desktop if you saved a shortcut to your site there.
So why use a favicon? It makes locating your bookmark easy! It makes locating your website easy for others and it can even help brand you!
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment