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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!