Creating a Favicon
Languages: English • 日本語 (Add your language)
A favicon (short for "favorite icon") is an icon associated with a website or webpage intended to be used when you bookmark the web page. Web browsers use them in the URL bar, on tabs, and elsewhere to help identify a website visually. Also, it is used as application icon of mobile device.
A favicon is typically a graphic 16 x 16 pixels square and is saved as favicon.ico in the root directory of your server. You can use a favicon with any WordPress site on a web server that allows access to the root directories.
Contents
WordPress Version 4.3 or later
WordPress Version 4.3 implemented Site Icon feature that enables favicon in your web site. It is recommended that you use the Site Icon feature, instead of following the guidance below. When you use it, you don't need to prepare the favicon.ico file by yourself or modify your template file, just specifying square image that has at least 512 pixels wide and tall from Customizer screen.
Follow the below steps to set favicon in your site.
- Prepare image file. It must be square, and at least 512 pixels wide and tall.
- Go to Administration Screen > Appearance > Customize
- Click Site Identify
- Click Select Image at Site Icon section, upload the image file you prepared in the above step from Upload Files tab screen, and click Select.
Creating a Favicon
A favicon can be created using any graphics/image editing software, such as GIMP, that allows the saving of .ico files. There are also online services that will allow you to create a favicon for free.
The image should be clear and is usually designed to match your site's image and/or content, a big task for something so small.
To prepare the image to be saved as favicon.ico:
- By cropping or adding space around the image, make the image square.
- Resize the image to 16 x 16 pixels.
- Save the file as favicon.ico.
If you're using an online service to create your favicon, such as Faviconer.com (creates 24bit favicon.ico with a transparent background) or Dynamic Drive, follow the instructions provided by the site and then download the favicon.ico image to your computer.
Installing a Favicon in WordPress
If there is already an old favicon.ico file in your current theme's main folder, delete it using FTP Clients.
- With an FTP Client, upload the new favicon.ico file into your current theme's main folder.
- Upload another copy of your favicon.ico file to the main directory of your site (ex. http://example.com/favicon.ico). This will display the favicon in your subscribers' feedreaders.
In order for your favicon to show up in some older browsers, you will need to edit your page header. Remember, the best way to edit your theme's files is via a Child Theme. For the purpose of the following instructions you will need to create a copy of your parent theme's header.php file in your child theme.
- Go to your WordPress Administration Screen.
- Click on Appearance.
- Click on Theme Editor.
- Select the file called Header or header.php to edit the file.
- 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.
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />
- Save the changes.
How to create a favicon with a transparent background
This method needs you to make sure your source image already has a transparent background, which means it should be a GIF or a PNG. The rest of steps are as above. The one difference in the code is instead of favicon.ico use favicon.png or favicon.gif.
- 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.
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.png" />
To see your new favicon, clear your browser's cache. You may need to restart your browser in order to see the new favicon.
Advantages of using .ico over .png or .gif
- Compatibility - All browsers, including IE 5.0, support .ico format.
- Avoid 404 server errors - All modern browsers (tested with Chrome 4, Firefox 3.5, IE8, Opera 10 and Safari 4) will always request a favicon.ico so it's best to always have a favicon.ico file, to avoid a "404 not found" error.
- An .ico file can hold more than one icon, no need to have multiple files for 16x16 and 48x48 icons.