Home Website

How to Create a favicon in WordPress

ANDD
ANDD
Updated: • 0 • min read
Table of Contents
How to Create a favicon in WordPress

What are favicon? A favicon is a small icon that represents your website and usually appears next to the website title in browser tabs.

This icon acts as a website identity. So when a user visit your site, this logo will be visible in the browser tab section.

Generally, the size of a blog or website favicon recommended by wordPress is 512x512px in a square shape. There are many image editing software that you can use, including Adobe Photoshop (paid) and Gimp (free).

Installing Favicon on the Website Automatically

Most current web browsers can detect the favicon.io file located in the website directory and use it immediately. You can use the .jpeg, .ico, .gif, or .png file format if you're using a transparent background.

Here's how and the steps:

1. Prepare a 1:1 square image in .jpg, .bmp, .gif or .png format.

2. Convert the image format .ico, there are many online tools that can use. In this tutorial I use convertico.com.

3. Go to convertico.com then click the button to select and upload files, the images will be converted automatically.

4. Click download to download, save your .ico file.

5. Then rename the file to favicon.io because the browser only recognizes this name.

6. Upload the file to the website directory.

Creating Favicon in HTML

You can use a generic image to create a favicon. Here's how to add a favicon in an HTML file.

  1. Prepare a 1:1 square image in .jpeg ,  .bmp, .gif, or .png format.
  2. Upload the file to the website directory. On linux-based hosting, this directory is usually public_html.
  3. Enter the image you want to use in the website code.
  4. Then, add the following code between the tags <head>...</head>

<link rel="shortcut icon" type="image/png" href="/favicon.png"/>

The HTML code will look like below:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8>
        <title>Home</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="shortcut icon" type="image/png" href="/favicon.jpg"/>
    </head>
  
                
    <body>

In type="image/png", replace png with your image format then replace favicon.jpg with your file name.

That's a tutorial on how to create a favicon in WordPress.

ANDD
ANDD Daily workers

Post a Comment