Andy Pickle

Posted on Nov 8, 2018 • Updated on May 25, 2020 • Originally published at andypickle.dev

Add an Emoji Favicon to your site!

#html #flask #python #beginners

Hey there, this is my first post on dev.to, so I thought I'd share a short little trick I learned that makes websites look better!

For starters, if you don't know what a favicon is, don't fret! I didn't until recently. Its the small thumbnail on your tab. If you use Google Chrome, it looks like this:

I've been working on a project1 for CS50 for web-programming class. The assignment: build a book review website, using Flask and PostgreSQL. While I was working on it, I got bit miffed that my site wasn't looking very professional. I was using Bootstrap, for the ease of formatting, but that wasn't looking great, just a tad better than the default. I decided adding a favicon would help a bit, but I didn't want to mess with making a logo or finding a picture and scaling it, so I thought. Maybe an emoji would work? It did, fantastically!

I decided it would be painless to find the emoji I wanted and then just add it to my

of my template.html. Here's how the code ended up looking:

This adds a great touch, and if a user is like me and has 15 tabs open at all times, the favicon, would help them find the correct page.

Here's how I did it:

Head to https://emojipedia.org/
Find your emoji.
Right-Click on the emoji style you prefer (I'm an Apple person)
Copy the link and insert into your <head> tag like so: <link rel="icon" href="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/155/books_1f4da.png">

And you're done! I was using flask for this project, so I put this in the layout page and it dynamically puts in on any template that has the

{% extends "layout.html" %}

at the top of the .html doc.

Here's how it looks!