Web Design Tutorial: Create a Favicon! -HD-


Today we are going to be taking a look at
how to create a favicon. Now if you’ve ever wondered how websites get
the little icon that appears in the tabs, favorites, and other places, that is by creating
a favicon. So to create your own favicon, you will first
need to jump over into Photoshop and make a new document that is at least 16 pixels
by 16 pixels. Now you don’t have a ton of room, but the
next step is going to be creating your actual icon itself. So I’m just going to go over and grab my custom
shape tool and drag out a simple star as my favicon. So once you have your icon done, make sure
and turn off your background layer so that your icon sits on a transparent background. Now go ahead and go back up to “File” and
then “Save for Web”, and then save your file as a PNG-24. Now make sure and call your file “favicon.png”
and save it somewhere that you can find it later. Now some browsers will read a PNG as a favicon,
but all browsers back to Internet Explorer 5 will read and actual icon file, so we’re
going to need one of those. So in order to make your own icon file, you’re
going to need to use some kind of converter and so I’m going to be heading over to convertico.com. So I will go ahead and use their simple converter
to convert my PNG to a .ico icon file. So just browse for your file and then press
“Go.” And then after that go ahead and click to
download your icon. Now go to wherever your browser stores downloaded
files, and just drag the icon file into the images folder of your website. Now again, make sure that it is named “favicon.ico.” So now it’s a simple process of linking this
file in the head of your HTML document. So go ahead and flip over to Dreamweaver and
make some space before the closing head tag for your code. Now there are two lines of code to be sure
that your favicon will show up in both new and old browsers. So start by typing out. So now in your first set of quotes you’re just going to type “shortcut icon”. Now in the second set of quotes, the href,
we’re going to type in “images/favicon.ico”. So this basically tells the link tag that
we want to link to an icon file, and basically where the icon file is. So once you’re done with that, go ahead and
copy that line and just paste it on the line below. Now the only thing we need to change on this
line is to change “shortcut icon” to only “icon”. So this will ensure that your favicon will
now show up in all new and old browsers. So that’s it for the code, so now all you
need to do is save your file, and then run your page, and you should see your brand new
favicon in your browser. Now keep in mind that if you do change an
existing favicon, you may need to clear the browser cache in order to see the new one right
away. So there you have it. That’s how you create and add a favicon to
your webpage. So as always, if you enjoyed this tutorial,
be sure to subscribe, rate, comment, and share it with your friends.

2 Comments

Add a Comment

Your email address will not be published. Required fields are marked *