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.
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/)
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.
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