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!
Tuesday, May 20, 2008
Wednesday, January 30, 2008
Blog Topic # 1
http://www.guggenheim.com/
There are an amazing amount of cool websites out there, and certainly plenty of not so cool ones. The Guggenheim site really spoke to me for many reasons. I love the intro displaying the different cities around the world and the rollovers for each. The layout is fresh and simple allowing the user’s eye to take in everything on the page quickly and precisely without being blasé or uninspired. Once inside the site, the navigation is simple and intuitive so even users who aren’t particularly computer savvy can find there way around with ease. The color scheme is also simple and easy on the eyes while the red rollover on links pops and makes the text easy to read. Personally, I would have made the font on the links in the center of the page either a little larger or changed the gray text to be a little darker which would make the words just that much easier to read.
The use of hot images is visually stimulating and pulls the user into areas of the site they may not have intended to go upon landing on the page – I know I didn’t! I found myself curious to know what else they had on there site. I also really like the fact that on different pages hot images were used down the left hand column as well instead of always being right across the top. The site is big enough that the change made for a slightly more interactive experience for me.
The two things missing that I thought were not great on their part were a back button on any given page as well as a Home button on any given page. If you are in the “New York” area (for example) it would be nice to have a “New York Home” kind of button to click on. Similarly, if you want to switch to a different location, such as Venice, it would be nice to be able to access that immediately, and I saw no easy way to do that short of going up to browser and re-typing in the home page info to get back to a place I could then choose a different destination.
There are an amazing amount of cool websites out there, and certainly plenty of not so cool ones. The Guggenheim site really spoke to me for many reasons. I love the intro displaying the different cities around the world and the rollovers for each. The layout is fresh and simple allowing the user’s eye to take in everything on the page quickly and precisely without being blasé or uninspired. Once inside the site, the navigation is simple and intuitive so even users who aren’t particularly computer savvy can find there way around with ease. The color scheme is also simple and easy on the eyes while the red rollover on links pops and makes the text easy to read. Personally, I would have made the font on the links in the center of the page either a little larger or changed the gray text to be a little darker which would make the words just that much easier to read.
The use of hot images is visually stimulating and pulls the user into areas of the site they may not have intended to go upon landing on the page – I know I didn’t! I found myself curious to know what else they had on there site. I also really like the fact that on different pages hot images were used down the left hand column as well instead of always being right across the top. The site is big enough that the change made for a slightly more interactive experience for me.
The two things missing that I thought were not great on their part were a back button on any given page as well as a Home button on any given page. If you are in the “New York” area (for example) it would be nice to have a “New York Home” kind of button to click on. Similarly, if you want to switch to a different location, such as Venice, it would be nice to be able to access that immediately, and I saw no easy way to do that short of going up to browser and re-typing in the home page info to get back to a place I could then choose a different destination.
Thursday, January 24, 2008
Subscribe to:
Comments (Atom)
