In progress: Portfolio favicon and a new project added

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: (https://www.gifttanakan.com/)

Challenge

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.

Solution

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

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