Site Beginner

Learn How to Build Websites

  • Make a Website
  • Start a Blog
  • BlueHost Review
  • About
  • Blog
  • Contact
You are here: Home / Building a Website / What Is a Favicon and How You Can Create One for Your Site

What Is a Favicon and How You Can Create One for Your Site

Contents

  • What is a favicon?
  • Why should you use a favicon for your site?
  • How to create a favicon for your website
  • Adding a favicon to your website
  • Using a favicon in WordPress
  • Adding a favicon to the Genesis theme

What is a favicon?

You've probably noticed that many websites you visit have a little browser icon next to them in the tab on your web browser, as well as in your Bookmarks bar. This little 16×16 icon is known as a favicon (pronounced fa-vi-con) and it's used in many places across the web when displaying your site.

This article will show you how to create you own favicon.ico image and add it to your website or blog.

favicon-example

Why should you use a favicon for your site?

It's not required that you use a favicon, but it can be very good for branding purposes and to ensure people recognize your site across the web.

How to create a favicon for your website

It's actually very easy to create an icon like this with commercial software like Photoshop or free alternatives like GIMP or Paint.net. Just create an image that is a square shape. The default size for a favicon.ico file is 16×16 pixels, however modern web browsers will accept large sizes than this and scale down.

Previously, you had to save the file as .ico or use a favicon generator to create that file, but most browsers (Chrome, Safari, Firefox) now accept .png and .gif. The exception to this is Internet Explorer in all versions up to – and including – IE10.

While Internet Explorer 11 does support both PNG and GIF favicons, it is still recommended to use ICO where possible because many users will be running an older version of IE.

Once you've created your favicon it's time to add it to your website.

Adding a favicon to your website

By default, web browsers will look for the favicon file in your root folder. For most servers this is either public_html or www.

If you need to upload to a different favicon directory or location for any reason then you can specify this new URL in HTML in the <head> section of your web page by adding the following:

<link rel="shortcut icon" href="your-folder-name/favicon.ico">

Using a favicon in WordPress

To set a favicon in WordPress you'll need to upload a version of your icon to the root folder as mentioned above, and also upload the same icon to your current theme folder under wp-content/themes/theme-name/.

Next, you'll need to go to Appearance > Editor in your WordPress Dashboard and find the file called Header or header.php. Find that line that begins <link rel="shortcut icon"... and replace it, if it exists, or add the following code into <head>:

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />

Adding a favicon to the Genesis theme

If you use the Genesis Framework for WordPress (which Site Beginner does) you can add the following PHP code to the functions.php file to change your favicon:

//* Display a custom favicon
add_filter( 'genesis_pre_load_favicon', 'my_favicon_filter' );
function my_favicon_filter( $favicon_url ) {
	return 'http://www.yoursite.com/images/favicon.ico';
}

Once you've made the changes to your favicon you can force the browser to show it by doing a “hard refresh” using the following keyboard shortcuts:

  • Windows: Ctrl + F5
  • Mac: Apple + R or Cmd + R
  • Linux: F5
(Visited 1,615 times, 1 visits today)

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

47 − = 44

How to Make a Website
A complete guide for beginners.

Want to learn how to make a website like this? Check out our beginner's course now. It's completely free!

GET STARTED

Popular Posts

  1. How to Start a Blog Using WordPress
  2. How to Point a Domain Name to Your Site
  3. How to Accept Credit Cards on Your Website
  4. An Ever Growing List Of Ways To Make Money Online…
  5. What is a Parked Domain & How Does It Work?
  6. The Best Domain Registrars To Use In 2023
  7. Choosing a Free HTML Editor to Build Your Website
  8. How to Pick Profitable Website Ideas
  9. What is a Domain Name and How Do They Work?
  10. What is Affiliate Marketing?

How to Start a Blog
A complete guide for beginners.

Want to learn how to make a blog? Check out our beginner's course now. It's completely free!

GET STARTED

Categories

  • Apache
  • Building a Website
  • Code
  • Domains
  • General
  • Make Money Online
  • Reviews
    • Ecommerce
    • Website Builders
  • Web Hosting
  • Website Traffic
  • WordPress

Amazon Affiliate Disclosure

Sitebeginner.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to amazon.com. Find out more here.

FTC Disclosure

I may receive customer referral fees from companies mentioned on this website, this does not affect the price you pay for any products you decide to buy. All data & opinions on this website are based on my experience as a paying customer.

  • Best Blogging Platform
  • Best WordPress Hosting
  • Online Business Ideas
  • Shopify Review

Copyright © 2007-2023 All Rights Reserved.
Site Beginner · About · Create a Blog · Learn

Copyright © 2023 · SB2 on Genesis Framework · WordPress · Log in