How to add a favicon to your site

A favicon is the little icon that shows in the tab of a webpage.

screen-shot-2017-02-06-at-9-15-31-pm

The circled icon is a favicon.

Before you add a favicon to your site, you need find a suitable image. After you find an image you want to use, you need to crop the image into a square because most favicons are 16 by 16 or 32 by 32 pixels large. There are many programs you can use to crop your image but you can use MS Paint for Windows or the preview editor for Mac will do just fine. To make a square selection, simply hold down the shift key while selecting the area of the image to crop.

After you’ve cropped your image, you can either resize it manually or use a service such as favicon generator to resize your image. I use favicon generator because it lets you upload an image and it generates versions of common favicon sizes for you to download. After you have resized or downloaded your image, place the image into your web folder.

Insert the following code into the <head> section of your html document.

<link href=”media/favicon.png” rel=”icon” type=”image/x-icon” />

screen-shot-2017-02-06-at-9-40-16-pm

The line in red displays your site’s favicon.

The link href should refer to the relative file path and name of your icon. In this case, my icon is in a folder named “media” in my web folder and my icon is named “favicon” with the .png file extension. After you specify the location of your icon in the tag, your site should display an icon in the tab of your browser!

 

Advertisements

~ by stanleyzuo95 on February 6, 2017.

2 Responses to “How to add a favicon to your site”

  1. I am awarding this blog post the most thoughtful. A favicon is something I had not really thought of, but had always seen. When I saw this blog post I was immediately intrigued because I wanted to add it to my website. Overall, the steps were really easy to follow. Also it was a really good tip to add to crop the photo into a square that is 16×16 megapixels or 32×32 megapixels.

  2. In my opinion this is the most thoughtful post, in the sense that I learned the most. I believe the icon is something that is engaging and attracts the viewer. When typing on the URL bar the icon pops up, this ensures that everyone will view this icon. I plan on using an icon, so I learned the most with this post.

    -MICHAEL RIVAS

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: