Skip to main content

How to add favicon in WordPress blog

What is a favicon?

A favicon (short for “favorites icon”) is the small icon that appears next to website title in browser. When you add favicon of your site, it can increase your website’s identity and help users to recognize your site easily when bookmark a page or quickly find you among a lot of tabs opened in browser.

how-to-add-favicon

Create a Favicon

A typical favicon is square and recommended to be at least 512px in width and height. It was suggested that you save your favicon as an .ico file since other formats might not be supported to display correctly on some older version of browser. However, now you can simply use PNG, JPG or even Gif file for website favicon since almost browser has been updated to display them well.

You can use your website logo for favicon. Just make sure it is square or later you need to crop it when upload to WordPress. A favicon can be created using any image editing software such as Photoshop, AI, or GIMP which allows to save image as .ico files. You can keep it with transparent background or add color background as you want.

How to add favicon in WordPress

For WordPress 4.3

Since WordPress 4.3, you can add favicon or site icon from WordPress customizer. Simply go to Appearance >> Customize and click Site Indentity tab.

add-favicon-wordpress4.3

In Site Identity tab, you will have options to change Site title, Tagline and Site icon (your favicon has its new name in WordPress 4.3). Choose Select File button and navigate to the image file you already created.

 

add-favicon-wordpress4.3-2

If the image you are uploading exceeds recommended size, WordPress will require you to crop it. After that, you can save and preview the result.

For WordPress 4.2 and older

For older version of WordPress, you can upload your favicon to your website’s root directory using FTP. After that, simply paste this code into your theme’s header.php file.

1 <link rel="icon" href="http://www.sitesao.com/favicon.png"type="image/x-icon" />

2 <link rel="shortcut icon"href="http://www.sitesao.com/favicon.png" type="image/x-icon" />

Don’t forget to replace sitesao.com with your site’s URL. If your site does not have a header.php file, you can install and activate Insert Headers and Footers plugin. After activating the plugin go to Settings » Insert Headers and Footers and paste the code above in header section and save to finish.

If you are not familiar with using FTP, you can also try the plugin All in One Favicon. Install and activate the plugin then go to Settings and upload your Favicon.

Feel free to ask us any question or discuss more with us in comment. If you find this article useful, please share it to your friends with these social button below.

Related News

How to create sitemap for WordPress sites?

If you're new to WordPress and now start optimizing SEO for your website or personal...

How to add categories and subcategories in WordPress blog

WordPress allows you to sort content with categories and tags. Each categories can includes number of subcategories....

How to embed video in WordPress blog post

Beside text and images, embed video into content can make your post more lively, especially...

Leave a reply