Favicons
Ever notice the tiny images at the top of a webpage to the left of the URL? They are basically little graphics that are associated with a website and you’re going to learn how to create one. It’s easy and fun!
First, you must design your favicon in some kind of image editor such as Photoshop. You might also be able to find free favicon generators online. Try this website: http://favicon-generator.org/. It will take a picture or graphic you have and turn it into a favicon. The picture must be a perfect square (same length and width). To do this open up your image with either Photoshop or whatever image editor you have on your computer and crop and resize your image to make sure it’s the same length and width. If you want, click here to download the Mustang logo to use (it is a perfect square).
If you don’t use an image that is a perfect square you will end up with a distorted favicon because the favicon it generates will be 16 pixels by 16 pixels.
Again, pay attention to file name and file type. Save your favicon as favicon.ico and save it in the same place as your index file (desktop or My Documents).
Now that you have created your favicon, step two is adding code to your webpage.
Add this to your head section:
<link rel=”icon” type=”image/x-icon” href=”favicon.ico”>
Once you have done that, save your index file and refresh the browser. Hopefully you will see your new favicon!
iframes
An iframe is used to display a web page within a web page. Here is an example:
http://www.medfordpublicschools.org/2012/08/mhs-contact-information-sheet-for-parentsguardians-2/
The document is actually hosted on scribd.com and an iframe is what makes it appear to be embedded on our school website.
Let’s practice:
A. Copy and paste this code somewhere in your HTML file:
<iframe src=”URL”></iframe>
B. Where is says “URL,” copy and paste our class website into there. Make sure to include the entire address. Example:
<iframe src=”https://www.mhswebdesign.com/” width=”500″ height=”600″></iframe>
C. Next, specify width and height:
<iframe src=”https://www.mhswebdesign.com/” width=”500″ height=”600″></iframe>
D. Try doing a Google search and see what happens.
E. One last thing to try- get rid of the border:
<iframe src=”https://www.mhswebdesign.com/” frameborder=”0″ width=”500″ height=”600″></iframe>