One of my students asked how to create a favicon for his Web site, and I thought I would share the answer with you.
A favicon is the icon you see before a Web site address in the address bar of your browser. Here’s the one I created today for my 2EducateYou blog:
There a few ways to create a favicon:
- Build one from scratch with a graphics program such as Adobe Photoshop
or Adobe Photoshop Elements
.You’ll need to create a file that is 16 x 16 pixels and save it as an icon. I used Adobe Photoshop Elements, which is similar to PhotoShop, but much cheaper! It has all the features I need in a graphics program. In fact, it has way more than I need! If you have access to one of the PhotoShop products, use these directions from Tutorials by Jennifer to build your favicon.
- Use a Web site tool.I found the Favicon.cc Web site easy to use. You simply choose a color for your icon, then click on the squares to apply your color and build your favicon.
Another handy Web site is FavIcon from Pics. If you have a company logo, this Web site can create your favicon from your logo. Pretty slick! I tested it with a graphic I created in PhotoShop Elements, and it worked great. Also try DynamicDrive, which does the same thing.
While many of you will find this option easier, using a graphics program may give you a nicer looking favicon. I tried both methods, and found the graphics approach more difficult, but I liked the icon much better.
After saving your favicon, you’ll need to upload it to your Web hosting company. FTP is one method of transferring files from your computer to your hosting company. Each Web hosting company has its own set of rules which you’ll need to get familiar with so you can transfer your files to them. Network Solutions
has three FTP options! If you’re using a template from your hosting site, you’ll need to ask them which folder to upload your favicon to. If you’re using Network Solutions, you’ll upload to the htdocs folder.
You may also need to add this html code between the beginning and ending HEAD tags in your Web pages:
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
although I found I didn’t have to do this for a WordPress blog.
Good luck!
Kathy Van Pelt
2educateyou.com
Published by Kathy
I love being involved in education because I am always learning something new and exciting. I have been teaching and helping students for over 25 years with computer applications and keyboarding classes. Before computers, I helped students learn how to use dedicated word processors. It was a long time ago!
Currently, I work at MiraCosta College, a community college in California, where I teach computer applications for the Computer Applications Department and keyboarding classes for the Business Office Technology Department. I teach one- and two-day computer courses through Community Services, and work as an Instructional Assistant II for the Academic Information Services Department. I’ve been enjoying my jobs at MiraCosta for over 20 years! Prior to MiraCosta, I worked at Eldorado Business College teaching word processing and business courses.
And, for about 15 years I’ve been teaching online courses (PowerPoint 2010, 2007, & 2003, and Keyboarding) through Education to Go, a division of Cengage Learning. I find teaching and learning online an awarding experience.
I enjoy reading, learning, traveling, and spending time with my family.
Kathy
View all posts by Kathy
