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 …
✓ PNG✓ Favicon ✓ Fonts
Other People's Work:
Here are examples of favicons.
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!
✗ 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 (⇧) + …
✓ … 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 …
✓ … 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.
● 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.
Last Step: Save and View your Work ~
✓ Try it in a browser.
✓ Attach the link to your .html page and continue working …