snths favicon

Summary:

Create a Custom Favicon in Photoshop

    ●   "Favicon" is short for "Favorites Icon." They are little images that appear in the address bar of the browser.

    ●   You can make a favicon out of any image, but it is going to be very small, so keep it simple …


Learn About:

PNGFavicon Fonts

  •   This tutorial is used in the Fan-Tastic, Art Genre, and other Projects.

Other People's Work:

Here are examples of favicons.

favicon

Step #1: Find an Image that Symbolizes your Project ~

A "Favicon" is the little image that appears in the address bar of the browser - YOU NEED ONE!


Go to: dafont.com - try dingbats:   ✙   ♥   ✄   ☎   ✈   ☛   ✌  ✝   ✞   ✠   ✡   ★   ✩   ❀   ♣

OR - symbols or icons - anything simple that represents your project:

Trees or shapes or other images that make good Favicons:

animal symbols

Remember:

No Copyrighted Symbols!

No Recognizable Logos!

No Sports Teams!

Your Favicon Must be Unique!


Step #2: Download the Font ~

When you find a font that matches your project, Right-Click and save the file to your desktop, or somewhere you can find it …


Step #3: Open Font Book ~

Go to where you downloaded the font, open it, and double-click on the .tff file(s) …

… when Font Book opens, click Install Font, and there you have it!


Step #4: Open Illustrator ~

Open a New Print Document in Illustrator with approximately these settings:


Step #5: Type Tool ~

Get the Type Tool or hit the keyboard shortcut letter (t) …

… drag a box and type SOMETHING - ANYTHING.


Step #6: Select your Font ~

Select your text …

… then click on the Font Family in the menu bar to find your new font.

Not all letters work equally. You may to try different letters to get the one you want.


Step #7: Crop the Image ~

Pick a single image, and get the Artboard Tool or hit the keyboard shortcut letters: Shift (⇧)shift key +

artboard tool

… and crop your your image as square as possible.


Step #8: Save the Image

Then go to: File > Save for Web … and save the document as png-24 format.

… lower the size so that the smallest width or height is 16 pixels …

… call it favicon.png

favicon

… and save IN THE ROOT FOLDER OF YOUR PROJECT - again, make sure you save the file in your web page folder.

Yes, it's got to be small to fit in the menu bar of your browser.


Other Options:

    ●   OR - if you are working on the Design Your Identity Logo Project use your logo ...

    ●   OR - if you are working on the Home Sweet Home Portfolio Project open your face ...

 

 

 

 

 

… (Remember: all these tutorials are intended to be
applied to YOUR PROJECT) …

 


Step #9: Split!

Open your page in Dreamweaver and click Split to View the Code …


Step #10: Find the <head> Tags ~

The code must go somewhere between the <head> </head> tags …

… copy this code …

  
<link rel="shortcut icon" href="favicon.png">  
  

… and paste it between the <head> </head> tags.

final tag


Last Step: Save and View your Work ~

Try it in a browser.

last example

Attach the link to your .html page and continue working …


Other Resources: http://www.netmagazine.com/features/create-perfect-favicon or http://tools.dynamicdrive.com/favicon/ or http://antifavicon.com/ or http://favicon-generator.org/