Enter your Sign on user name and password.

Forgot password?
Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!

Use Chrome browser to play professor video
Brenton Strine

Brenton Strine

Favicons

Slide Duration:

Table of Contents

I. HTML
Your First Web Page

17m 1s

Intro
0:00
World Wide Web
0:23
Introduction to HTML
0:25
Looking at Source Code
0:53
HTML5
1:58
HTML5 Specification
1:59
Creating a Web Page
4:10
What You Will Need to Create a Web Page
4:11
Example: Basic Web Page
4:40
Example: Creating a Web Page
5:46
HTML Elements
6:33
Adding a Title
7:08
Main Body
7:48
First Level Heading
8:23
Adding an Image
8:42
Paragraph
9:09
Adding a List and URLs
11:13
Footer
14:09
CSS: Styling
16:02
Web Basics and Web History

32m 23s

Intro
0:00
The Web
0:56
Overview of the Web
0:58
The Web Page
2:39
Overview of the Web Page
2:40
Web Technologies
4:45
Overview of Web Technologies
4:46
The Web Today
9:22
The Web Today
9:23
What is HTML
11:22
HyperText Markup Language
11:23
The Creation of the Internet
12:40
History of the Internet
12:41
Developments in HTML
14:10
The Birth of HTML
14:11
Early Problems
15:35
Early Browsers
16:24
History of Early Browsers
16:25
NCSA Mosaic
17:55
NCSA Mosaic
17:56
The Browser Wars Begin
19:39
History of the Browser Wars
19:40
Casualties of War
22:27
Results of the Browser Wars
22:28
HTML 4 Stabilization
25:31
History and Overview of HTML4
25:32
Modern Browser Developments
27:27
Modern Browsers
27:29
HTML5
30:57
Overview of HTML5
30:58
Web Development Tools

26m 28s

Intro
0:00
Browsers
0:17
Introduction to Browsers
0:18
Example: Browsers
2:35
Firefox Add-ons
3:14
Firefox Browser
3:15
Example: Firebug Add-ons
3:54
Example: Web Developer Toolbar and ColorZilla
7:51
Domain Names and Hosting
10:23
Overview of Domain Names and Hosting
10:24
Your Own Domain
11:03
Installing a Local Web Server
12:42
Installing a Local Web Server
12:43
Apache Web
13:29
WYSIWYG Editors
15:56
Introduction to WYSIWYG Editors
15:57
Content Management System
18:31
How Content Management System Works
18:32
Example: WordPress
20:00
File Transfer Protocol
22:26
File Transfer Protocol
22:27
HTML Elements and Attributes

21m 50s

Intro
0:00
Proper use of Elements and Attributes
0:14
Elements and Attributes
0:16
Example
1:06
Normal HTML Elements
2:00
Start Tag, Content, and End Tag
2:02
Example: Warning!
2:34
Void HTML Elements
3:23
Self-Closing Tags
3:24
List of Void Elements
4:04
Example: Line Break
5:00
HTML Comments
6:13
Purpose of Comment Tags
6:14
Example: Comment Tags
6:50
Attributes
7:25
Properties of Attributes
7:27
Example: Attributes
7:39
Example: Whitespace
10:22
HTML Character Codes
12:05
Character References
12:07
Example: Registered Trademark Symbol
12:35
Example: Using Character References
13:23
Example: Start Tag and End Tag
15:57
Example: Self-Closing Tag
16:37
Example: Attributes
17:37
Example: Proper use of Elements and Attributes
19:02
Example: Comment
20:09
Example: Whitespace
20:46
Essential Tags Part 1

41m 42s

Intro
0:00
Document Structure Tags
1:13
Document Structure Tags and Example
1:14
Layout Tags
3:24
Layout Tags
3:26
Example: Layout Tags
7:48
Example: Layout Tags
11:28
Example: Layout Tags
13:17
Example: Layout Tags
14:22
Text Level Tags
17:22
Text Level Tags
17:23
Example: Text Level Tags
17:48
Grouping Content Tags
24:23
Grouping Content Tags
24:24
<p> Tag
24:45
<hr> Tag
25:31
<figure>, <figcaption>, and <blockquote> Tag
26:14
<div> Tag
26:58
Example: Grouping Content Tags
27:28
Embedded Content Tags
33:12
Embedded Content Tags
33:13
Example: Embedded Content Tags
35:39
Essential Tags Part 2

24m 20s

Intro
0:00
Simple Tables
0:17
Simple Tables
0:19
Example: Simple Tables
2:31
Semantic Tables
5:11
Semantic Tables
5:14
Example: Semantic Tables
6:24
Simple Lists
8:14
Simple Lists
8:18
Unordered List
8:36
Ordered List
8:42
Example: Simple Lists
9:37
Definition Lists
14:08
Definition Lists
14:09
Example: Definition Lists
15:21
Forms
17:11
Forms
17:12
Example: Forms
17:52
Markup Language

29m 38s

Intro
0:00
HTML 1 Through 3.2
0:13
Period of Rapid Growth of HTML
0:14
Tag Soup
2:03
Definition of Tag Soup
2:04
Example: Tag Soup
3:00
Example: Tag Soup and Valid Doctype
4:45
HTML 4.01
5:26
Overview of HTML 4.01
5:27
Three Flavors of HTML 4.01: Strict, Transitional, and Frameset
6:05
XHTML 1
7:19
Overview of XHTML 1
7:20
Example: XHTML 1
9:20
XHTML1 Syntax
11:48
Lower Case Rule
11:49
Closed Elements Rule
12:25
Encased in Quotes Rule
14:18
Boolean Attributes May Not Be Minimized
14:35
Correct Nesting is Enforced
15:29
The Problem with XHTML
16:15
Problem with XHTML
16:16
XHTML 2
19:22
Overview of XHTML 2
19:23
HTML 5
20:43
Overview of HTML 5
20:44
Validating
22:44
Validators
22:45
Example: W3C Markup Validation Service
25:26
Page Structure and Meta-data Elements

32m 50s

Intro
0:00
The Doctype
0:12
Doctype
0:13
Example: Doctype
1:25
The Root Element
1:57
Root Element
1:58
Example: Root Element
2:45
The Head Element
3:38
Head Element and Body Element
3:39
Example: Head Element and Body Element
5:06
The Head Element
5:42
Head Element vs. Header Element
5:47
The Title Element
6:51
Title Element
6:52
Example: Title Element
7:54
The Base Element
9:00
Base Element
9:03
Example: Base Element
9:42
The Link Element
14:07
Link Element: rel, type, and href
14:08
Example: Link Element
15:13
The Meta Element
17:54
Meta Element: charset, name, and http-equiv
17:55
Example: Meta Element
21:00
The Style Element
23:35
Style Element
23:37
Example: Style Element
24:40
Text-Level Semantics

30m 13s

Intro
0:00
Text Level Semantics
0:06
Paragraph Level
0:07
The <a> Element
2:23
Definition of the <a> Element
2:25
The <em> Element
3:25
Definition of the <em> Element
3:26
The <strong> Element
6:50
The <strong> Element
6:51
The <small> Element
8:35
The <small> Element
8:36
Example of <small> Element
10:19
The <cite> Element
10:55
The <cite> Element
10:56
Example of <cite> Element
12:32
The <q> Element
12:45
The <q> Element
12:46
Example of <q> Element
13:34
The <abbr> Element
15:35
The <abbr> Element
15:36
Example of <abbr> Element
16:41
The <dfn> Element
17:03
The <dfn> Element
17:04
Example of <dfn> Element
18:01
The <time> Element
19:11
The <time> Element and Example
19:12
The <code> Element
21:18
The <code> Element
21:19
Example of <code> Element
23:00
The <sub> and <sup> Elements
23:31
The <sub> and <sup> Elements
23:32
Example of <sub> and <sup> Elements
23:50
The <i> Element
24:51
The <i> Element and Example
24:52
The <b> Element
27:16
The <b> Element
27:17
Example of <b> Element
29:07
Heading and Sectioning

23m 39s

Intro
0:00
Heading Elements
0:06
Heading Tags
0:07
Heading Rules
1:13
Heading Rules and Example
1:35
Sectioning Roots
5:39
Sectioning Roots
5:41
Sectioning Contents
6:25
Sectioning Content Elements
6:27
Section Wrapping
7:40
Section Wrapping
7:41
Example: Section Wrapping
10:10
Real World Example 1
15:36
Forms

47m 51s

Intro
0:00
Form Terminology
0:23
Form
0:24
Control
0:43
Control Name and Control Label
1:09
Input Type and State
1:52
Form Controls
2:20
Button: Submit and Reset
2:32
Radio
3:37
Checkbox
4:00
Select Menu
4:05
Textarea
4:28
Various Input Types
4:38
Example: Basic Controls of Form Element
7:05
Example: Buttons
18:20
Example: Additional Controls
20:56
Example: Special Input Types
27:55
Example: Date and Time Control
33:40
Example: Create Your Own Control
37:32
Example: Placeholder Text
39:10
Example: Datalist
41:43
Example: Sizing and Input Containment
42:16
Example: Select Modification
42:51
Example: Required Attribute
44:41
Links

36m 41s

Intro
0:00
URIs and URLs
0:23
Definitions of URL and URI
0:36
Differences Between URL and URI
0:42
Example: URI and URL
1:14
Typical URI Construction
2:33
Domain and Subdomain
2:34
Protocol
4:18
IP Address
5:05
Typical URI Construction
5:32
Second Level Domain
5:33
Port
6:07
Foldernames
6:46
Typical URI Construction
8:06
Filename and File Extension
8:08
Typical URI Construction
10:38
Name/ Value Pairs
10:40
Internal Anchors
11:45
Typical URI Construction
12:30
Example: URI Construction
12:31
Relative and Absolute URIs
14:20
Relative and Absolute URIs
14:22
Example: Relative and Absolute URIs
18:32
Link States
24:15
Link States
24:16
Example: Link States
25:18
Block Level Links
27:02
Example: Block Level Links
27:03
Bookmark Links
29:18
Bookmark Links
29:20
Example: Bookmark Links
30:15
Attributes
32:06
href and target
32:20
rel, media, hreflang, and type
33:18
Embedded Content

46m 5s

Intro
0:00
Embedding Image
0:22
Embedding an Image
0:25
Image File Formats
3:38
Image Format: Jpg
3:42
Image Format: Png
4:13
Image Format: Gif
4:40
Compression
6:05
Image Format: Precise Lines and Fewer Colors
8:38
Animated Gif
10:49
Alpha Transparency Png
11:09
Embedding Audio
12:52
Old Way of Embedding Audio
13:00
New Way of Embedding Audio
14:54
Example: Adding Buttons
20:04
Message for Users
26:36
Audio Attributes
27:46
Control
28:29
Autoplay
28:44
Loop
29:36
Preload
30:40
Embedding Video
32:00
Embedding Video
32:11
Controls
34:22
Poster Attributes
36:01
Video Formats
37:36
Solving Formatting Problem
39:26
The Canvas Element

19m 25s

Intro
0:00
Creating the Element
0:38
What is the Canvas Element?
0:39
HTML and Canvas Element
1:48
Example: Canvas Element
3:23
Creating the Canvas in JavaScript
5:13
getContext() Method
5:17
Checking Browser Support with the getContext() Method
6:00
Example: Creating the Canvas in JavaScript
7:31
Drawing in the Canvas
10:13
Methods for Drawing in the Canvas
10:14
2d Context
10:58
Example: Creating Drawing in the Canvas
11:39
Example: Adding an Image and Texts
15:30
Example: Advance Canvas Element
17:31
Content Models

29m 8s

Intro
0:00
The HTML 4.01 Content Model
0:16
Block Elements and Inline Elements
0:18
Example: Block Elements and Inline Elements
1:18
W3C Markup Validation Service
3:28
The HTML5 Content Model
6:21
Overview of HTML5 New Content Categories
6:22
Flow Content
8:02
Specification for Content Models
8:05
Flow Content
9:41
Example: Flow Content Elements
10:40
List of Flow Content
11:35
BlockQuote Element
11:50
Sectioning Content
13:19
Introduction to Sectioning Content
13:20
Heading Content
14:06
Heading Content and hgroup Element
14:07
Phrasing Content
16:56
Attributes of Phrasing Content
16:57
Anchor Element in Phrasing Content
17:28
Embedded Content
19:33
Attributes of Embedded Content
19:34
No Content
19:53
Transparent Content
20:38
Source Elements and Param Elements
21:15
Interactive Content
24:16
Interactive Content Elements
24:17
Button Element
25:57
The DOM

13m 10s

Intro
0:00
The DOM
0:26
Document Object Model
0:27
The DOM Tree
0:55
DOM Trees
0:56
Example: DOM Tree
1:31
Vocabulary: Tree, Node,Branch, Parent, Child
2:15
Exploring the DOM
3:13
Example: Built-in Browser Inspection and Firebug
3:15
Example: Manually Exploring the DOM
6:01
JavaScript
7:28
DOM Navigation Techniques
7:55
DOM Navigation Techniques
7:56
Favicons

13m 14s

Intro
0:00
Favorite Icons
0:08
Function of Favorite Icons
0:09
Bowser Support
1:10
Browser Support
1:13
Location in Browsers
1:46
Implementation Methods
2:04
Implementation Methods for Favorite Icons
2:05
Favicon and Apple Mobile Devices
4:51
Creating the Icon
6:13
How to Create the Icon
6:14
Favicon Resources
9:10
Websites for Icon Creation and Conversion
9:11
Programs for Icon Creation and Conversion
11:50
Embedding Flash and Other Objects

15m 7s

Intro
0:00
Flash and other Plug-ins
0:41
Main Problems with Flash
0:44
Benefits of Flash
2:02
Embedding Flash: the Old Way
2:57
The Old Way to Embed Flash
2:58
Embedding Flash: the Satay Method
6:42
Satay Method
6:43
Embedding Flash: HTML5
9:28
How to Embed Flash in HTML5
9:29
Embedding Flash Directly in <video>
11:39
Embedding Flash Directly in Video Element
11:40
Review of Embedding
13:24
Image Elements
13:39
Video, Audio, and Canvas Elements
13:44
Embed Elements
13:53
Object Elements
14:04
Offline Cache

19m 53s

Intro
0:00
Purpose
0:47
Purpose of Offline Cache
0:48
The Appache
2:06
Attributes of Appcache
2:07
The Manifest File
3:22
Manifest File
3:23
Example of Manifest
3:32
Section Headers: Cache, Fallback, and Network
4:21
Server-Side Considerations
5:17
text/cache-manifest MIME-type
5:18
Other Server-Side Considerations
5:41
ExpiresActive On and ExpiresDefault 'access'
6:07
Example: Offline Cache 1
7:44
Example: Overwriting Files
11:09
Example: Wild Cards for Network
14:58
Example: Offline Cache 2
16:06
Web Development Principles

26m 47s

Intro
0:00
Interoperability
0:36
Interoperability of Web Development
0:37
Interoperable Websites Should Work
3:05
Qualities of Interoperable Websites
3:06
Backward Compatibility
5:52
Compatibility With Older Technology
5:53
Example: Meta Tag
9:07
Forward Compatibility
9:33
Advancement in Technology
9:34
Accessibility
10:11
Accessibility of Content
10:12
Semantic Code
11:43
Example: Where Will This Link Take You?
13:56
Graceful Degradation
14:59
Graceful Degradation or Fault Tolerance
15:00
Types of Degradation
16:35
Progressive Enhancement
18:36
Progressive Enhancement
18:37
Future Detection and Browser Sniffing
21:05
Future Detection Versus Browser Sniffing
21:06
Example: Email Input Type
23:39
Tim Berners-Lee's Quote
26:20
Loading...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of HTML
  • Discussion

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Services

Lecture Comments (3)

2 answers

Last reply by: Barry Keith
Wed Jun 6, 2012 9:29 AM

Post by nick millican on November 20, 2011

hello Brenton, can you recommend any programs to create icons, or any work of visual art for the website? I'm pretty cheap so would something like paint work? (i'm on windows)

thanks

Favicons

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Favorite Icons 0:08
    • Function of Favorite Icons
  • Bowser Support 1:10
    • Browser Support
    • Location in Browsers
  • Implementation Methods 2:04
    • Implementation Methods for Favorite Icons
    • Favicon and Apple Mobile Devices
  • Creating the Icon 6:13
    • How to Create the Icon
  • Favicon Resources 9:10
    • Websites for Icon Creation and Conversion
    • Programs for Icon Creation and Conversion

Transcription: Favicons

Hello, and welcome to Educator.com.0000

This lesson is going to be about favicons (or "fayv" icons, depending on how you want to pronounce it).0002

Favicons are favorite icons; and they started back in the day when Internet Explorer 40009

decided that they wanted to have little images available by their bookmarks, when you bookmarked a website.0017

This is an example of Internet Explorer 6, because the functionality stayed the same way up through Internet Explorer 6,0024

where you have the little icon here for Internet Explorer in the URL bar;0031

and when you went up to Favorites and bookmarked a website, it would save it in your Bookmarks0037

and put a little icon next to it; and that is the favicon, or the Favorite icon.0045

And after that, it became something that Web developers like paying attention to, because it gives your website a more professional look.0050

And other browsers started implementing the same functionality.0060

So, this is going to be how to make sure that your website gets a good favicon.0063

There is basically universal support in browsers for this.0073

They are supported in all major browsers; older browsers might require you to bookmark the website before it actually shows up.0080

For example, this is Internet Explorer 6 again, and this is actually the same thing;0087

you can see, that little e icon has been replaced with the Educator favicon.0091

And that is only because you clicked on Favorites and saved it as a bookmark.0096

Most of the other browsers nowadays will find it automatically.0102

And they can appear in a lot of different places.0106

This is Chrome: it shows up only in the tab, as opposed to Safari here--it shows up only in the address bar, and not in the tab.0108

And then, in Opera and Firefox, it shows up in both, as well as in Internet Explorer.0117

The simplest way to implement the favicon is to create a 16x16 or 32x32 pixel icon named favIcon.ico.0126

It obviously has to be icon format; and you put it in the root directory of your website.0138

So, that is just...if your website is Educator.com, the URL to this will be educator.com/favicon.ico.0143

And this is the way that Internet Explorer 4 implemented the functionality, back in the day.0152

When you favorited a website, Internet Explorer would automatically check this location and see if there was a file named this.0159

And if there was, it would download it and use it as the favicon.0170

That puts some limitations, because that means that you can only have one favicon per website.0174

And you can't really control whether or not the browser is going to use it or not.0181

It just does, without really giving you a chance.0185

The W3C expanded this specification a little bit, and now you can put the icon of any name in any location; and you use the link element to do that.0189

You give it a rel of shortcut icon; and this is actually an illegal syntax here, because a space here should mean that it is a list of items.0203

But this is just one item; but you need to have it like this for Internet Explorer.0217

Other browsers will ignore the word 'shortcut' and just go directly to this word 'icon'; and they want just the word 'icon' syntax.0221

So, this will cover all your bases.0229

You need to specify the type as image/x-icon, which is the MIME type for icons, if you are using an icon image.0232

You can use other ones; I will talk about that in a minute.0241

And then, the URL to the location can be a relative URL or an absolute URL--any URL you want.0245

This would be how, if you have different sections of your website, you want different favicons on them.0252

You can use a link in each page to specify which favicon that page will use.0257

So, you could have a different one for every page.0265

And probably, if you have a favicon in the root directory named favicon.ico (although you could name it anything), it is going to default to that.0267

What I usually do is: I usually just want one favicon per website, so I will just do this and this, both together,0279

and make them the same file, and make sure that everything is covered that way.0286

Another cool thing you can do with Apple mobile devices is: they have a special icon that they use to click on their little screen touchpads.0292

And it is a little bit bigger; it is 57x57--and even, in some of the newer ones, it is as big as 129.0304

And they automatically apply some styling to it, so it gets rounded corners, and it gets a little bit of a shadow and some shiny, glisten-y effects.0310

And all that gets applied automatically, if you create just a regular-looking icon and link to it this way (apple-touch-icon instead of the shortcut icon).0322

And you can use the icon format again, or a PNG, or a GIF; and alpha transparency is supported.0333

So, you can see through it a little bit if you want to use that.0340

This is kind of a fancy thing to deliver just to users of Apple mobile devices.0344

And there is a chance that other devices may end up grabbing this, as well, because they might want it.0349

That is kind of how the Internet works: even though it says Apple here,0356

I can imagine in the future another web phone that has similar functionality taking this,0358

and not waiting for web developers to change this to specifically the value that would work for that phone.0363

To create the icon, probably the easier way to do it, if you already have some programs installed that can create PNG's or GIF's,0375

would be to just make a PNG or GIF icon, because a lot of newer browsers do support PNG's and GIF's as the favicon icon.0385

Obviously, it needs to be the right size; so it is 16x16 or 32x32.0394

And there are actually other sizes that it can be used as, as well, depending on the context.0399

For example, if you are saving a website as a shortcut on your desktop, it might be using a bigger size than 32x32.0404

But you definitely want to make sure that it works in 16x16 and 32x32,0412

because there are a lot of browsers that only support that; and if you have anything bigger, it just won't work.0417

If you do create your icon as something other than the icon format, like the Windows icon format,0422

you need to make sure that you give the right MIME type.0428

Your server will probably send it with the right MIME type automatically.0432

But you will also need to specify, in the link that we talked about a second ago, the MIME type with the type attribute.0435

Just a note here: I am recommending you use the image/x-icon MIME type, which is actually the older MIME type for this.0442

I think, in 2003, Microsoft...well, no, it was actually the W3C that came up with a new standard for how to do this.0452

Because it is a Microsoft functionality (this is vendor--that is what vnd stands for), this points out that this is specific to Microsoft's format.0463

But this is the one that you should be using for all favicons--this MIME type--after 2003.0472

But I like to use the old one, because it still works, because browsers are backwards compatible,0478

and because I am not completely sure that this new one won't cause problems in older browsers.0484

So maybe, in a couple years, I will start using this one; but for now,0489

I am just going to stick with this MIME type for the icon, although you will see this, as well.0492

Another thing to point out is that, if you are creating PNG's or GIF's instead of the icon file type,0501

you may be missing out on some functionality, because a lot of icon creation programs0507

will actually make one file that has multiple sizes.0512

So, if you have a 16x16, 32x32, 64x64...all these different sizes bundled into one,0516

then the browser that can only handle 16x16 will just get that and load that correctly.0525

But if your browser can handle higher resolutions, then it actually will use the higher resolutions in that single image file, or icon file, according to the context.0531

And you won't get these little 16x16 icons that get blown up into much-bigger-than-they-were-ever-meant-to-be and look very pixelated.0541

Here are some resources for you to create icons that have this multiple-sizing functionality.0552

If you don't want to spend some time to download an icon program, you can just use one of these three websites.0562

And there are many, many more; these are just three examples that I came across.0570

For example, iconverticons (or i-con-ver-tik-ons...a confusing website name)--let's pull it up here.0574

This is a very snazzy little thing, where you just upload a pre-existing image that you have.0583

So, I think if you upload one that is bigger than the size that you need (like if you upload a 500x500 picture), it will just size it down to the appropriate size.0591

Or you can (and I recommend, actually) create something ahead of time that is 32x32, so that you don't get pixelation or resizing, and you have more control.0601

But it will take JPEG and GIF and PNG formats.0610

So, you click here, and then you can go into Options here.0614

And the only one you want for this (because this is if you are creating a favicon, not just a regular icon) is this one right here, Convert to favicon icons.0618

And then, it will make 32-bit here; and then, when you click Convert, it will process it;0630

and it will give you a little image that you can download, and it will be automatically one file in both 32x32 and 16x16.0635

This is favicon.cc; this is a website that allows you to directly create your icon.0644

This is 16x16 pixels here, and I can draw on it with my cursor or mouse.0651

And you can select colors, and there are a couple of other tools like this.0659

And then, at the end, you can see a preview down here of what it looks like.0665

So, you can look at what you are drawing as you go; and at the end, you will be able to download it.0670

And then, when you put it up in your server, it will work.0675

A note here: you are probably not going to be able to get this to work locally on your home computer.0678

It is going to work best if you are trying it online, at an actual server,0685

because then you don't have to worry about some of the complicated things that make favicons work or not work.0689

And this one, favicon.co.uk, is also very snazzy.0696

It lets you pick your sizes here--16, 32, 48, 64--and then you upload an existing image, and it will convert it for you automatically.0701

There are also programs that you can use that are a little bit more advanced.0713

I am on a Mac right now, so I will give you a little quick peek at this one, Iconographer.0717

This is Iconographer, and what is very cool is that I can select multiple sizes here, and I can pick which ones I want to save at.0728

Let's say I am going to draw this one right here.0738

You can see: I am drawing it, and then, when I let go, it gives me a little preview.0742

And then, I can click a smaller size and continue making my icon.0747

And I can make specific edits to the specific sizes, instead of just creating one size and then it sizes down (you might get some pixelation).0754

When you are only working at 16x16, one pixel really makes a difference.0764

So, it is nice that you can edit them one at a time.0769

And then, you can save, and it will put it all together.0773

And then, here are some resources for you if you are using a Windows computer.0775

Just copy these URL's down; and they are free, as well.0780

And then, Linux users, I think you should be able to find icon creators, as well; but I will leave that up to you.0783

That is it for favicons; thanks for watching Educator.com.0790

Educator®

Please sign in for full access to this lesson.

Sign-InORCreate Account

Enter your Sign-on user name and password.

Forgot password?

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.

Use this form or mail us to .

For support articles click here.