CodeNewbie Community

Cover image for In progress: Portfolio favicon and a new project added

Posted on • Updated on

In progress: Portfolio favicon and a new project added

Alt Text

In this series: I'll cover the reasons why I build my portfolio without using a CMS, show my progress of troubleshooting, working through the mess and what I learn in between. The portfolio is in the making.
The purpose of the series: to record my process, visualize my progress for a future improvement, keep myself accountable and connect with you who may have the same journey.

Portfolio favicon

Feb 16, 2021

I was distracted today.

Instead of focusing on making more pages and adding all projects on my portfolio, I occupied myself for hours working on the favicon, which is not yet a priority.

But oh well, I already made it. It's not perfect but good enough. So, let's talk about its challenges and solutions for a bit.

Here's my current work: (


Originally, I created my portfolio logo on Canva (I talked about it here) and I want the favicon to replicate the logo as much as possible.

I never added favicon using HTML before - I only used to do it on WordPress. I'm not familiar with working on a very small image like that either, so it might take time to test things before I got it right.


I found a way to add favicon in my HTML file through a quick search on Youtube. All I did was just adding: <link rel="shortcut icon" type="image/png" href="images/favicon_current.png"/> underneath the title tags within the head tags. The href points to the image directory in the folder. It's simple.

Before using Canva to create the favicon, I used another tool that I was recommended. But it doesn't allow me to import the existing logo file to generate the favicon. So, I went back to rely on Canva.

From the research, the favicon size is 16x16 which wasn't possible to be made on Canva since the smallest custom canvas allowance is 40x40px.

I experimented several times with different image resolutions before I got the one that looks alright and should survive any browser's theme.

If you have any tool that can generate great favicon from an original logo file, please share. I didn't seek for more tool as I tried to use what I know.

A new project added

Alt Text

Have a look here: School Project: The Diversity of Art

This is a group GitHub project of my last quarter that I contributed a ton into it design-wise. It was a fun and challenging work for students like us who were still new to GitHub and pull request stuff.

I also made a wireframe using Lucidchart (I talked about it here) before we jumped into crafting the page. It's a great blueprint that my team was thankful for; it made the work much simpler.

I definitely want to include the wireframe into the portfolio to showcase my design process. But, probably on a different page under a different category (Wireframing category). Guess it's a good way to manage categories. And of course, I plan to link the wireframe with this project.

My next move...?

  • Add two wireframing projects
  • Add two WordPress projects
  • Edit content in each project
  • Link stuff together
  • Write copy for my About page
  • Determine what to do with the Contact page
  • Ask people for testimonials
  • Oh heck...a lot more

But I couldn't be more excited !!

Question for today:
Any suggestion for great favicon generator?

Read the previous(first) article here: In progress: Portfolio current state and why I build this thing from scratch

Discussion (4)

gecikadm profile image

Like the post, thanks for sharing about Canva, I didn't know about it and I am gonna try it, nice work πŸ‘

gift_tanakan profile image
Gift_Tanakan Author

Thank you! Canva is indeed a great tool.

j3ffjessie profile image

Suggestion for the contact page is EmailJS. It’s super easy to setup and attach to an HTML form. Documentation is pretty easy. I like the favicon and the overall color theme.

gift_tanakan profile image
Gift_Tanakan Author

Thanks a lot! I'll take a note about that.