How to implement a favicon and web clip icon

#WEB#webサイト#アイコン#Web design

Last update : 2026.5.7

Posted : 2014.12.10

This time, I’ll talk about favicons and web clip icons, which are easy to forget when creating a website.

Introduction

Both are very effective from the perspective of communicating branding and the identity of a product or service.
They also make it easier to access a website from smartphones and other devices.

What is a favicon?

A symbol mark for a website

Have you ever noticed icons such as logo marks displayed on the left side of the URL or browser tabs when opening a website? Although small, they make it easier to identify bookmarked sites.
They can be implemented with simple HTML and image creation, and favicon implementation has become a standard practice.

How to create a retina-compatible favicon

Create three different sizes

What does “Retina” in Retina support mean? Simply put, it refers to high-resolution displays. Because the resolution is so high, images that were designed for standard websites may appear blurry. To address this, larger image assets are created and then scaled down, resulting in sharper, higher-quality visuals.

Now, here is a simple way to create a Retina-compatible favicon. First, create images in three sizes: 16×16px, 32×32px, and 48×48px. Then use the web service Favicon Generator. This is a browser-based tool that allows you to upload image files and generate favicons. Supported formats include .jpg (.jpeg), .png, and .gif. It generates favicon images in .ico format. You can preview the favicon images instantly. The generated favicon sizes range from 16×16px to 256×256px, with seven size options available. When selecting, choose from the larger image sizes. Once you’ve made your selection, click “Convert Image” to download all favicon sizes bundled into a single file.

How to implement it

Simple! Just paste in the code snippet

<link rel="shortcut icon" href="path/to/favicon/name.ico" />
Just add the above code inside the <head> tag.
Be careful not to make a mistake with the file path where the icon is placed.

Next, how to create a web clip icon

What is a web clip icon?

It refers to the icon displayed on a mobile home screen.
If no settings are applied, it will default to a captured screenshot of the website.
Since icons are a tool for quickly accessing a site, it’s best to create a proper one!

The method is simply to prepare an image

Web clip icon creation service

For those who think creating a web clip icon is a hassle, I recommend using a web service that can generate icons easily!

iPhone Style Icon Generator

Implementing the icon

Be careful where you place the icon

Implementation is very simple again! Just add the following: <link rel="apple-touch-icon" href="example-icon.png" /> inside the same <head> tag as the favicon.

The important point here is to place the created icon in the root directory of the website.

Both favicons and web clip icons are easy to implement, so be sure to set them up when creating a website.

RECENT POSTS