You’ve probably noticed those tiny icons next to website names in your browser tabs—like a little “F” for Facebook or a globe for Wikipedia. That’s a favicon, short for “favorite icon”, and it’s a cool way to give your webpage some personality. Lucky for you, adding one in HTML is a cinch, even if you’re just starting out.
Here’s the deal: you need two things—an image and a line of code in your <head> section. The image is usually a small square (like 16x16 or 32x32 pixels), and it’s often saved as a .ico file, though .png or .jpg can work too.
Once you’ve got that, you hook it up like this:
That <link> tag is the magic. The rel="icon" part says, “Hey, this is my favicon,” type tells the browser what kind of file it is, and href points to where your image lives (here, it’s “favicon.ico” in the same folder as your HTML file). Reload your page, and bam—there’s your icon chilling in the tab!
I’ve played with this myself, and it’s a blast picking an image—maybe a smiley face or a doodle you made. You can whip one up in a free tool like Canva or grab a .ico converter online if your image isn’t the right format.
For fun, try this:
If “star.png” is in your folder, you’ll get a little star up top.
One thing I’ve tripped over: if it doesn’t show, double-check the file path — href="images/star.png" if it’s in a subfolder. Browsers can be picky! It’s not a game-changer for your site, but it’s that extra sprinkle of “you” that makes coding feel personal. Give it a shot next time you’re tinkering—it’s like a cherry on top of your webpage sundae!
Sponsored Content
Enhance your HTML skills with our in-depth tutorials and interactive quizzes.
Explore HTML Quiz