You’ve already learned how to make a favicon and an animated favicon for your web design, well here is one more way you can make your favicon that comes in very handy. Transparent favicon are becoming increasingly important, especially when you have a design that isn’t limited to a 16x16 box. Look at the picture below. Notice the favicon highlighted in blue has no white border while the favicon in red does. This is why you want a transparent favicon. On different browsers there are colors other than white so you can’t always rely on a matching color background, this is why transparency is important. For example, in Firefox the address bar is white however; the tabs are a light gray shade. This causes a discrepancy between your white background color and the new background. In order to fix this you create a graphic with a transparent background so that it matches whatever color the browser may be. There are a few ways you can achieve this.

Way #1 - IconEdit32

Using IconEdit32 you select your graphic (should be 16x16) and using the “color Palette” look for a box with a blue line through it. That is the transparency palette and each box that has a blue line through will be transparent.

Way #2 - IrfanView

Using IrfanView open your previously created image. Then go File > save as. In the “save as type” drop down box select ICO in the and save your file as favicon.ico. There will be a dialog called PNG/PNH/ICO, under the ICO section select “save transparent color” then click save. The image will pop up and you will be able to select your desired background color, choose one and you’re done.

Way #3 - Photoshop

Using Photoshop create a new canvas. Then create a new layer and delete your background layer, past in your existing image and save it.

Way #4 - GIMP

Open up your image and click Image > Mode > RGB. Select your erase tool and erase everything you want to be transparent. Then save the file as a GIF (there will be a pop-up saying "GIF can only handle grayscale or indexed images"). Select * and convert to indexed using default settings and click on export. Finally save as .ICO and select 4bpp, 1 bit alpha and 16-slot palette.

Way #5 Favicon GeneratorThis favicon generator from Dynamic drive allows you to convert an image with transparency to ICO.

Let’s face it; many web designers out there that still don’t understand internet marketing or SEO in the least. Sometimes changes occur that everyone embraces but others fail to make the grade. For some reason SEO isn’t being embraced by designers, perhaps because it takes away from some of the artistic and creative values designers hold so dear. There is a fundamental dilemma between search engine optimization and human optimization, which is what designers do. However, there are things designers can do to optimize their designs for search engines.

Content

Be Unique – Having your own, unique content is a huge factor in search engine success.

Stay on it – Just as important as having original content is updating it frequently. New content as well as new updates to your site help. While it’s highly favorable to update lots of content, smaller changes may not be great.

Size Matters – When text is bigger on the page than other text this separates it and makes it more important, this applies to headers as well, which usually are bigger than the bulk of your text.

Don’t Forget to Format – On a webpage, words or phrases that have bold or italics on them show emphasis on them, making them important. As long as you don’t overdo it this will help your rank greatly.

Keywords

Titles – Your title tells visitors everything they need to know within a few words, so to must you tell the robots that crawl your site, what your site is about. Try to keep your keywords in the front of your title and avoid wordiness.

What’s your density­? – The frequency of your keywords on a page matters substantially. The ideal ratio is somewhere between 3-7% for major keywords and 1-2% for minor ones and anything over 10% puts you in danger of being banned. In Firefox, simply right click and select show keyword density to see what your ratio is.

URL – Your URL is also very important and indicative of your overall theme. Try to include your main keywords in your main URL and sub pages however, if the keywords aren’t on your main page this won’t help much.

Anchor Text – Since inward links are so important thus so are the text on those links. When you can control it, get your best keyword(s) in there and avoid extra wording.

Things to Avoid

Flash – Flash can look cool but it lacks code for spiders to read. This means that your content is irrelevant as if it weren’t there. Having an entire page in flash is even worse since spiders won’t be able to read anything, this would be a serious mistake.

Javascript –JavaScript can be fine but if important content is displayed using java spiders have a harder time tracking your information and sometimes can’t track it at all.

Frames - Frames are a bots worst enemy, instead of actual code a few lines of text dictate what’s going to happen on the page. A bot get’s stuck inside of this and cannot index your website.

Animated Favicons

The animated favicon is not terribly different from the plain favicon. In essence, animated favicon are just animated gifs that are re-named .ico. In fact, some newer browsers support plain image files like jpg and gif in spite of the .ico extension.

Step 1:Read “Designing a Favicon for your website”

Step 2: Using Image Ready or a similar animation program like Animation Shop you will create a set of layers, usually between 3-5 frames but 3 frames is best because of load time for greater sized images.

Step 3: Go to File > New remember to set your image somewhat small like 60x60 as you will eventually reduce your image size to 16x16.

Step 4: Then place your text or image on the new canvas. Right-click the canvas and select create a Duplicate Layer. From there you create the set amount of layers and create your animation, it will scroll in a continuous loop or just once, it will need to look clean. For more in depth instructions use the ImageReady Tutorial.

Step 5: Finally, when you’ve created your animation, save your image by going to File > Save Optimized As and selecting animated gif. For a plain animation save it as a simple gif. Then use either converters or simply rename the gif extension to .ico.

Step 6: Follow previous instructions on uploading your image to the internet.

A “favicon” is that neat little icon just to left of your address bar or bookmarks and is referred to as a page icon. These favicons are associated with a particular website and can be customized to any desire so long as fits the 16x16-pixel ratio. Most modern browsers like Firefox, Internet Explorer 7 and Opera support favicons and are often used as a logo display on the micro scale.

Originally, when using Firefox the favicons were just for bookmarks, which were generated from a favicon.ico file placed in the root directory of your server. However, as technology advanced and open source browsers became more widespread the use of the favicon was made more flexible using XHTML.

Creating Your Favicon

Step 1: Using your favorite editor (Photoshop, Fireworks) create a new canvas. Because of the small size of the favicon, it’s best to use a larger pixel size like 32x32 or 64x64. Then create your graphic, make sure to keep in mind how small your product is going to be; try to keep it simple and use few colors.

Step 2: Re-size your file image back down to 16x16. In Adobe Photoshop this can done by selecting Image > Image Size then entering 16 in the height and width boxes. In addition, save your image to a convenient place.

Step 3: Convert your file to .ico, this can be achieved a couple of ways. First, if you use Adobe Photoshop download the ICO plug-in from Telegraphics.com. Once installed all you need to do is select Save As > then Format and save it as .ICO. Alternatively, if you do not use Photoshop you can use web based converters like ConvertIcon, IrfanView and IconEdit 32 or you can use a favicon generator. There are also free software downloads for converting a .PNG to .ICO like ICOFix and FAVIcon.

Step 4: Now you are almost done. Find the .ico file on your computer and upload the image to your web server. Save it, somewhere you can find easily preferably the root directory, with a simple filename like favicon.ico.

Step 5: The final step is to insert the code into your HTML and you are done. Find the head tags and between them, insert this code. (Make sure your href is modified to wherever your favicon is saved)

For web designers nothing is more frustrating than lack of inspiration. It seems like writers are the only ones who have coined an “creativity block” phrase. However, web designers are artists and there are often times where inspiration is difficult to find. This “designers block” can slow you down but when you need to get a website finished there just simply isn’t time to wait for the right idea to magically appear in your head. There are some ways to overcome this creativity plateau however.

Below I have featured some of the designs I like either a lot, or just think could be inspiring. Take a look.

Simplicity

Layout

Minimize Columns

Gradients

Distinct Sections

Graphics

Coloring

Web Crème Web Crème is an excellent website that provides examples of various websites. Not just any website appears here and only the cleanest and most inspiring designs make the grade.

Tutorial Blog Tutorial Blog is a website dedicated to providing free resources for web designers such as tutorials, articles and website examples. This page has a bunch of great one-page website designs.

Web Design from Scratch This website is great and can be used by everyone who is involved in creating websites. It is helpful in pointing out what makes a web site succeed or fail and which factors can increase your chance of web design success.

Zen Garden This site’s main goal is to further the use of CSS and to expose new and creative websites to other designers. Their about us says “There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation.”

WebPages That Suck This website features big design mistakes and websites that win the award of being the “Worst on the Web”. When attempting to learn it is always good to learn the best and worst practices, this website can help you avoid some of the most dangerous website design mistakes.