Serve a Static HTML Page for Development

Use a Custom Font from Google Fonts on a Static HTML Webpage

Add Emojis to a Static HTML Page

Make a Responsive Web Page Without Using a CSS or JavaScript Framework

Add an SVG Image to a Webpage and Get a Reference to the Internal Elements in JavaScript

Accept User Input with a Styled Input Tag, a Button, and Vanilla JavaScript

Add and Remove CSS Classes with Vanilla JavaScript

Make a One-time CSS Animation that Does Not Revert to its Original Style

Add a Dynamic Tweet Button to a Webpage

Turn an SVG Into a Favicon and Link it

Deploy and Host a Static Webpage for Free with Netlify

Create and Deploy a Basic Static HTML Website

We've been building patio11bot without a favicon so far - so before we deploy it, we'll make one from the SVG avatar that we have.

We'll use the service here to do it: `https://convertio.co/svg-ico/` - but there are many free services online that work.

After we have the .ico file, rename it to `favicon.ico`, and then link it with a link tag in HTML: 
`<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">`

Instructor: [00:00] We've been operating our patio11 bot site with a blank favicon. Let's fix that before we deploy online.

[00:07] We have the SVG of the patio11 bot avatar that I'd like to use, but it's an SVG. It needs to be an ICO file before it's properly used. The easiest way I've found to do this by far is just to Google for "convert SVG to favicon."

[00:21] There's numerous services and they all seem to do just about the same thing. I just picked one and it worked great. The one I picked is convertio.co, so I know that that one works. On convertio.co, just select your SVG from your computer and click convert. It uploads and converts it. Then you can download the completed ICO file.

[00:45] Next, find that icon file and copy it. Paste it into the folder that we've been using. You'll want to rename it to favicon.ico, because that's what browsers expect. We'll make sure the browser can find it, also, by adding an additional link to the top of the HTML page called Shortcut Icon.

[01:07] Now, if we refresh the browser, there's our favicon.

Course

Create and Deploy a Basic Static HTML Website

Turn an SVG Into a Favicon and Link it

Share this video with your friends