Original subtitles

1 1

Welcome to the last work section. 2

2

We have come such a long way so far. 3

3

Our website looks super great 4

4

and has some cool animations. 5

5

Now in this section, we'll do some 6

6

optimizations on our web page, 7

7

and then I will show you how you can 8

8

launch your own websites to the internet. 9

9

But before doing that, let's add a final touch 10

10

before we make our webpage ready for launch, a favicon. 11

11

Favicons are those little icons you see 12

12

on browser tabs and on your bookmarks bar. 13

13

It is part of the identity of any website 14

14

and makes users recognize your website. 15

15

So don't skip this step. 16

16

There is a very easy, online tool to do this. 17

17

We just need an image to serve as our icon. 18

18

So, let's do that for now. 19

19

So this is the tool I was talking about, 20

20

so it's the Favicon Generator. 21

21

And with this we can create icons for the browser, 22

22

of course, for the iOS home screen, 23

23

for Android home screen, and for Windows 8, 24

24

and, yeah, for Windows in general. 25

25

So, we just need to pick our image. 26

26

In this case, I'm going to use the logo. 27

27

And the black one of course, so I'm going to 28

28

use this one to create the favicon. 29

29

And here we go. 30

30

So the first icon here is actually for iOS, 31

31

and since ours is transparent, 32

32

we'll need to add a background color, 33

33

which will be white. 34

34

And then we have Android here as well. 35

35

And I will also add this white color. 36

36

And this is not so important, actually. 37

37

What really matters is down here. 38

38

And we go now, 39

39

click here because we want to 40

40

choose a path where we're going to put our icons, 41

41

because we don't want them in the root, 42

42

so in the main project folder. 43

43

So let me check what this is. 44

44

So I want them here, then in the Resources, 45

45

and I'll actually create a folder for them here, 46

46

Icons 47

47

or Favicons 48

48

and so, it's Resources and then Favicons. 49

49

So I want Resources 50

50

and then Favicons. 51

51

So this is where we'll put the icons. 52

52

And then, let's generate it. 53

53

Okay, so we just download this and we grab 54

54

this code here, and insert it into our website. 55

55

So let's just paste off this down here. 56

56

It's a lot of code, but well, don't worry. 57

57

And now we just need to put this stuff 58

58

into our folder, actually. 59

59

And here it is. 60

60

So, Favicons. 61

61

All right, so, put them into Resources 62

62

and we can replace that folder we had 63

63

because it has the same name. 64

64

And so, here are all our icons. 65

65

So let's check this out. 66

66

So the icon is not showing up here as it should. 67

67

And I actually don't know why, 68

68

but I'm sure that it is working 69

69

on your computer, because as we can see in here, 70

70

everything is working fine, supposedly. 71

71

Which means that the images are in the correct place 72

72

and, yeah, this code, of course, is also correct. 73

73

So I don't know why it doesn't appear here in my case, 74

74

but probably on your computer it will appear. 75

75

So, okay, now you know how to add 76

76

that special touch to your website as well. 77

77

Now, I could just have stopped here 78

78

and then launched our website or show you 79

79

how to launch your website. 80

80

But I want to show you even more. 81

81

I want our website to be perfect, 82

82

and so every detail matters. 83

83

So, let's now optimize our website's 84

84

page speed in the next lecture.