Turn an SVG Into a Favicon and Link it
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.