How to Create Favicon for Website and Wordpress

How to Create Favicon for Website and WordPress

Updated on December 21st, 2023 by Quertime Team in Web Development

What is Favicon.ico? A favicon (short for “favorites icon”), also known as shortcut icon, bookmark icon, website icon or URL icon is a small image appears next to a website’s URL in the address bar of a web browser. It also shows up in the Favourites or Bookmarks menu, on the tabs in tabbed browsers, and as the icon for internet shortcuts on your desktop. It is a good way to brand your site and help your visitors to visually identify your site in their Bookmarks menu. This little icon is typically a graphic 16 x 16 or 32 x 32 pixels square and is saved as favicon.ico in the root directory of your server.

Below you will find a step by step guide to create a favicon.

How to Create a Favicon for Website

1. Go to Favicon.co.uk – an online service to create your favicon

2. Browse your website’s logo

3. Select “16 x16” as your favicon size, then click “Generate Favicon” button

4. Download your favicon. It will be saved as “favicon.ico”

5. Upload your favicon.ico file to the root directory of your site (ie. http://www.example.com/favicon.ico)

6. To activate your favicon, insert the following code below the <head> HTML tag in your main index page and the HEAD section of your pages.

&amp;lt;link rel=&amp;quot;shortcut icon&amp;quot; href=&amp;quot;http://www.example.com/favicon.ico&amp;quot; /&amp;gt;

How to Create a Favicon for WordPress

1. Go to Favicon.co.uk – an online service to create your favicon

2. Browse your website’s logo

3. Select “16 x16” as your favicon size, then click “Generate Favicon” button

4. Download your favicon. It will be saved as “favicon.ico”

5. Upload the favicon.ico file into your current theme’s main folder

6. Upload another copy of your favicon.ico file to the root directory of your site (ie. http://www.example.com/favicon.ico). This will display the favicon in your subscribers’ feedreaders

You might need to edit your page header so that your favicon will show up in some older browsers.

1. Go to your WordPress Administration Panel

2. Go to “Appearance” then click on “Editor”

3. Select the file called “Header” or “header.php” to edit the file

4. Search for the line of code that begins with <link rel="shortcut icon" and ends with /favicon.ico" />. Overwrite it, if it exists, or add the following code below the <head> HTML tag.

&amp;lt;link rel=&amp;quot;shortcut icon&amp;quot; href=&amp;quot;&amp;lt;?php bloginfo('template_directory'); ?&amp;gt;/favicon.ico&amp;quot; /&amp;gt;

5. Save the changes

Other Online Services to Create Favicon:-

http://www.favicon.cc/
http://www.html-kit.com/favicon/
http://tools.dynamicdrive.com/favicon/