How to Set Favicons on Your Websites

Rajeev Kumar — Sat, 14 Sep 2024 05:26:50 +0000

Have you ever properly added favicons to your web projects? They may be small, but their impact on branding and user experience is huge. In this blog, we'll learn "How to set a favicon on your website".

What is Favicon & Why is it important to add to the project?

In web design, a favicon, or "favourite icon," is a small, square image that visually represents a website. It benefits the project in terms of Brand Recognition, Enhanced User Experience, Professionalism, Increased Website Visibility, Consistency Across Devices, Improved SEO, etc.

Steps to Adding a Favicon to a Website:

Prepare Favicon Images:
- Take your website's logo and create four versions of it in different sizes: 64x64, 180x180, 192x192, and 512x512 pixels. Save these images in a suitable directory within your project folder.
Link Favicon in HTML:
- Inside the <head> section of your HTML document, add the following <link> tags to attach the favicon images:
```
<link rel="icon" href="images/favicons/favicon-64.png" />
<link rel="apple-touch-icon" href="images/favicons/apple-touch-icon.png" />
<link rel="manifest" href="manifest.webmanifest" />
```
Replace "images/favicons/favicon-64.png" with the appropriate file path for your favicon images.

Create manifest.webmanifest File:

Create a new file named manifest.webmanifest in your project directory.
Inside the manifest.webmanifest file, add the following JSON structure:

{
  "icons": [
    {
      "src": "images/favicons/favicon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "images/favicons/favicon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

Ensure that the "src" paths match the location of your favicon images.

Favicon Deployment:
- Once all the necessary files and links are in place, deploy your website to make the favicon visible to users.

Additional Notes:

The favicon images should be appropriately sized to ensure optimal display on various devices and platforms.
The apple-touch-icon link is used for Apple devices and should typically be a square image in PNG format.
The manifest.webmanifest file provides metadata about the web application, including icons for different screen sizes and platforms.

Following these steps, you can successfully add a favicon to your website, enhancing its visual appeal and branding.

How I Built Huddle Landing Page with Curved Sections

Rajeev Kumar — Fri, 06 Sep 2024 00:04:00 +0000

Hello, Dev Community!

I’m excited to share my solution to this project as part of my journey to regain confidence in front-end development. There was a time when I lost touch with the basics, and I realized I needed to revisit simple practices. That’s when I discovered the Frontend Mentor platform. I downloaded the starter files for the Huddle landing page with curved sections project, which is a junior-level challenge, perfect for brushing up on my HTML and CSS skills.

The Build Process of the Project

As per the instructions, I downloaded the starter files, and here's how I approach this project:

Setting Up the Project:

When starting the project, I wanted to make sure the code was organized and easy to maintain, especially for future updates. To achieve that, I split the CSS into three different files. One for general reusable components, one dedicated to the main styling, and another just for media queries. This setup not only made the code more readable but also kept everything modular, which is super helpful if I need to make changes later on.

Building webpage & styling:

While building the webpage, my focus was on creating a component-driven layout. To keep things modular and clean, I broke the page down into separate <section> elements for each part of the design. I styled these sections using my general reusable components and main styling files, making sure everything was consistent and easy to maintain.

Making the Page Responsive:

To keep things organized, I created a separate queries.css file just for the responsive code, making sure nothing got too cluttered. While working on responsiveness, I learned about new HTML tags like <picture> and got a better understanding of fluid layouts, breakpoints, and the max-width property.

One habit I’ve developed is setting the default font size to 62.5% (10px) at the start of each project. This makes it easier to work with rem units and helps ensure a fluid layout across all devices.

Testing and Optimization:

After completing the front-end design, I started testing the site using tools like CanIuse and Google Lighthouse. I focused on four key areas: Performance, Accessibility, Best Practices, and SEO.
For accessibility, I made sure to check the contrast ratio and ensure all images had proper alt attributes. For performance, my goal was to optimize load times, while best practices were implemented using the BEM methodology for clean, maintainable HTML. To improve SEO, I included essential meta tags and followed best practices to help the page rank well.
On the optimization side, I reduced the intrinsic size of images so that web document size was reduced from 2MB down to just 8KB — to ensure they load quickly and efficiently.

Launch and Maintenance of the project:

The project is now open source and available on GitHub. You can check it out here and view the live version on Netlify here. If you spot anything that could be improved, feel free to make changes and send a pull request—I'd love to collaborate and push those updates!

Conclusion

After completing this project, I’ve gained confidence in building landing pages and making them responsive across different devices. I also got comfortable testing with dev tools and planning the process of deploying to Netlify.
If you find something insightful, feel free to drop a comment and let’s figure out something interesting together!
You can also connect with me on LinkedIn, Twitter(X), and Threads.

This is my first blog so I took help from the AI Models to avoid grammatical mistakes and share my story with words to make it readable to the readers but in future, I will share and contribute my story and values within my own words.

DEV Community: Rajeev Kumar