• Home
  • Subscribe
  • Contribute Us
    • Share Your Interview Experience
  • Contact Us
  • About
    • About CSEstack
    • Campus Ambassador
  • Forum & Discus
  • Tools for Geek
  • LeaderBoard
CSEstack

What do you want to Learn Today?

  • Programming
    • Tutorial- C/C++
    • Tutorial- Django
    • Tutorial- Git
    • Tutorial- HTML & CSS
    • Tutorial- Java
    • Tutorial- MySQL
    • Tutorial- Python
    • Competitive Coding Challenges
  • CSE Subject
    • (CD) Compiler Design
    • (CN) Computer Network
    • (COA) Computer Organization & Architecture
    • (DBMS) Database Management System
    • (DS) Data Structure
    • (OS) Operating System
    • (ToA) Theory of Automata
    • (WT) Web Technology
  • Interview Questions
    • Interview Questions- Company Wise
    • Interview Questions- Coding Round
    • Interview Questions- Python
    • Interview Questions- REST API
    • Interview Questions- Web Scraping
    • Interview Questions- HR Round
    • Aptitude Preparation Guide
  • GATE 2022
  • Linux
  • Trend
    • Full Stack Development
    • Artificial Intelligence (AI)
    • BigData
    • Cloud Computing
    • Machine Learning (ML)
  • Write for Us
    • Submit Article
    • Submit Source Code or Program
    • Share Your Interview Experience
  • Tools
    • IDE
    • CV Builder
    • Other Tools …
  • Jobs

One-Line HTML Code to Add Favicon for Your Website

Aniruddha Chaudhari/1278/0
CodeHTML & CSS

Setting a favicon for your website is not only good for the user experience but also for SEO optimization. And it does not require much effort. A simple one-line HTML tag can help you to set a favicon.

HTML code to add favicon

How to set the favicon for your website?

You can use the link HTML tag to set the Favicon title icon. This is one of the basic HTML tags.

Set the following param in the HTML tag.

  • rel should be “icon”
  • href should be set to the URL path of the icon.
  • Use the sizes param to set the ize of the faviocon image.

Syntax:

<link rel="icon" href="<image_url>" sizes="32x32" />

For example, the favicon we set for the CSEstack website is

<link rel="icon" href="https://www.csestack.org/cropped-site_icon-32x32.png" sizes="32x32" />

This single line of code adds the favicon for all the standard browsers.

Standard Practice for Favicon

Here are some of the points you should consider as standard practice while adding a favicon icon.

  • Usually, the favicon icon is the site logo.
  • You can set the same favicon (site logo) for all the pages of your website.
  • In case if you want to set a different favicon for each page of your website, you can do that as well.
  • The favicon icon size should be 32×32. If you have larger size icon, crop it to 32×32. You can also use favicon generator online.
What is the standard size of the favicon?

The standard size of the image logo which you are using as a favicon icon should be 32×32. Even if your favicon size is larger than 32×32, it will be shown as 32×32. This is the standard size supported by almost all the standard browsers like Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, etc.

How to set the favicon for CMS like WordPress, Blogger, etc?

If you are using any CMS like WordPress, Blogger, etc…, your job is even easier. You don’t need any HTML coding knowledge. You can set the favicon through the settings option.

Python Interview Questions eBook

HTML
Aniruddha Chaudhari
I am complete Python Nut, love Linux and vim as an editor. I hold a Master of Computer Science from NIT Trichy. I dabble in C/C++, Java too. I keep sharing my coding knowledge and my own experience on CSEstack.org portal.

Your name can also be listed here. Got a tip? Submit it here to become an CSEstack author.

Leave a Reply Cancel reply

HTML CSS & JavaScript

  • HTML- First Program
  • HTML- Basic Tags
  • HTML- Adding CSS
  • HTML- Best Form Design Practices
  • HTML- Text Indent using CSS
  • HTML- Drop Cap using CSS
  • HTML- Add Favicon
  • HTML- Adding ToC on Website
  • HTML- Save Page as PDF
  • CSS- 17 Tips for Optimizing CSS
  • CSS- Adding Image Shadow
  • Show/Hide Password on Login Form
  • Pass Data to Another Web Page [JS]
  • Horizontal Scrolling on Mobile Web

HTML Editing Tools

  • HTML- Online Editor
  • HTML- Novi Builder

© 2022 – CSEstack.org. All Rights Reserved.

  • Home
  • Subscribe
  • Contribute Us
    • Share Your Interview Experience
  • Contact Us
  • About
    • About CSEstack
    • Campus Ambassador
  • Forum & Discus
  • Tools for Geek
  • LeaderBoard