{"id":5273,"date":"2020-03-04T15:00:01","date_gmt":"2020-03-04T14:00:01","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=5273"},"modified":"2020-09-28T15:28:37","modified_gmt":"2020-09-28T13:28:37","slug":"add-favicon-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/add-favicon-wordpress\/","title":{"rendered":"How to Add a Favicon to Your WordPress Website"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]You\u2019ve probably noticed that most websites have a small icon (usually the site\u2019s logo) located in the top left corner of their browser tab. This is called a favicon. Aside from helping users recognize your website in their browser and thus improving user experience, the favicon is also an essential form of branding<\/strong>. By adding a favicon to your site, you ensure users can differentiate your site from other sites they might be browsing, and you create a connection between the favicon image and your brand.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]If you ask us, setting your WordPress favicon is one of the first things you should do after installing your WordPress theme. So today we\u2019re going to show you how to add a favicon to your WordPress website.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to Create a Favicon<\/h2>\n

[\/vc_column_text][vc_column_text]First things first, we should address the ways in which you can create your favicon. If you\u2019re looking for a quick solution, you can create a favicon using an online favicon generator<\/strong>. Platforms like Favicon & App Icon Generator<\/a> let you choose an image from your computer in .jpg, .png or .gif formats and then convert it to .ico format<\/strong>. If you don\u2019t have a preexisting image, you can also browse their icon gallery by keywords, letters or colors, and then you can download or edit an image you like.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Another great website for generating favicons is favicon.cc<\/a>. This platform not only allows you to import your image or choose from one of their own, but also lets you create a new favicon from scratch<\/strong>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]If you don\u2019t want to use an online favicon generators, you can always use Photoshop or Gimp to either create a favicon or resize an existing image<\/a>. Just keep in mind that WordPress requires the dimensions for your favicon image to be at least 512×512 pixels<\/strong>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]When it comes to formats, we should note that the .ico format is used for generating favicons in general. But since the release of WordPress version 4.3, WordPress has implemented a Site Icon feature that generates everything for you<\/strong>. This means that if you use the 4.3 version of WordPress (or higher), you don\u2019t have to prepare an .ico file on your own, and can upload a .gif, .jpeg or .png image instead. WordPress will then convert it into the .ico format and generate all the necessary dimensions (just make sure the original image you upload is 512x512px).[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]If, however, you\u2019re still using a WordPress version older than 4.3, then you will have to add your favicon to WordPress manually (which we\u2019ll talk more about later).[\/vc_column_text][vc_empty_space height=”81px”][vc_separator color=”custom” accent_color=”#f0f0f0″][vc_empty_space height=”50px”][vc_widget_sidebar sidebar_id=”bridge-banner”][vc_empty_space height=”42px”][vc_separator color=”custom” accent_color=”#f0f0f0″][vc_empty_space height=”80px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to Add a Favicon to WordPress<\/h2>\n

[\/vc_column_text][vc_column_text]After you\u2019re done making your favicon, it\u2019s time to add it to your WordPress site. The first thing you should do is head to your admin panel and click on Appearance > Customize<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Customize <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]From there, select Site Identity<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"WordPress <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Here you can pick the image you want to use as your site icon.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Pick <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]In case your image is above the recommended size limit, WordPress will allow you to crop it. To do so, click on Edit<\/em> image<\/strong>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Crop <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Once you\u2019re done with cropping (which you can do by clicking on your image and dragging it with your mouse cursor), select the Crop<\/em> button and then hit Save<\/em><\/strong>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]On the right side of the screen, you also have the option to scale your image, and in the Image Crop<\/em> section, you can even enter the desired image dimensions and specify the aspect ratio manually.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Finally, don\u2019t forget to click the Update<\/em> button when you\u2019re done.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Crop\" <\/div>\n<\/div>[vc_empty_space height=”60px”]
\n
\n \"Select <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]And that\u2019s it \u2013 you\u2019ve successfully uploaded your favicon to WordPress.[\/vc_column_text][vc_empty_space height=”81px”][vc_separator color=”custom” accent_color=”#f0f0f0″][vc_empty_space height=”50px”][vc_widget_sidebar sidebar_id=”top-picks-banner”][vc_empty_space height=”28px”][vc_separator color=”custom” accent_color=”#f0f0f0″][vc_empty_space height=”80px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Adding a Favicon to Older Version of WordPress (4.3 or less)<\/h2>\n

[\/vc_column_text][vc_column_text]Though we recommend you always keep your website updated with the latest version of WordPress, if by chance you are using a version older than 4.3, you will have to add your favicon to your WordPress site manually. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]First things first, you need to generate a .ico file using one of the online generators we mentioned above. Next, you should upload your favicon.ico file to your website\u2019s root directory via FTP<\/strong>. If you\u2019re not sure how that\u2019s done, make sure to check out our beginners guide to FTP<\/a>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]We should mention that there\u2019s some debate about whether the favicon should be added to the root directory or the theme folder (or both). In any case, we suggest that you at least upload it to the root directory because this will display your favicon in feedreaders.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Finally, don\u2019t forget to link to the favicon\u2019s file location in your header, because this is a guarantee that all browsers will be able to find it. To do this, you need to use an HTML link tag in your theme\u2019s header.php file to add the code<\/strong>. You can find your header.php file by going to Appearance > Theme Editor<\/strong><\/em> and then locating it in the Theme Files<\/strong><\/em> section on the right.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"WordPress <\/div>\n<\/div>[vc_empty_space height=”60px”]
\n
\n \"Locating <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The code should be added between the <head><\/code> and <\/head><\/code> tags:[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Added <\/div>\n<\/div>[vc_empty_space height=”46px”]
\n\t
\n 1.<\/span>\n If you want to link to the favicon in your root directory, you should use this code (just change the URL and the name of the favicon file to match your own):<\/span> <\/div>\n <\/div>[vc_empty_space height=”11px”][vc_column_text]<\/p>\n
<link rel=\"icon\" type=\"image\/x-icon\" href=\"http:\/\/www.yourdomain.com\/favicon.ico\"><\/pre>\n
[\/vc_column_text][vc_empty_space height=”26px”]
\n\t        
\n            2.<\/span>\n            If you want to add the link to the favicon placed in your theme folder, simply add this code to the head tag (just change the name of the favicon file if necessary):<\/span>        <\/div>\n    <\/div>[vc_empty_space height=”11px”][vc_column_text]<\/p>\n
<link rel=\"icon\" type=\"image\/x-icon\" href=\"<?php echo get_stylesheet_directory_uri(); ?>\/favicon.ico\"><\/pre>\n
[\/vc_column_text][vc_empty_space height=”62px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n
Adding a Favicon to WordPress With the Help of a Plugin<\/h2>\n
[\/vc_column_text][vc_column_text]In case you want to add your WordPress favicon with a plugin, you can do so by installing Favicon by RealFaviconGenerator<\/a>. This plugin is easy to use and helps you generate and set a favicon for different devices, such as desktop, Android, iPhone, and iPad.[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"Favicon                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]After you install and activate the plugin, go to Appearance > Favicon<\/strong><\/em> and then click the \u201cSelect from the Media Library<\/strong>\u201d button.[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"Favicon                        <\/div>\n<\/div>[vc_empty_space height=”60px”]
\n    
\n                                    \"Favicon                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Even though you should upload an image of at least 512×512 px when adding a favicon through the Customize<\/em> screen, the Favicon by RealFaviconGenerator plugin requires that you upload a picture at least 70×70 px in size, and preferably 260x260px<\/strong>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Once you select your image, click on Generate Favicon<\/em>.[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"Generate                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]From then on, you will be taken to the RealFaviconGenerator website. Once there, you have to scroll all the way down and select Generate your Favicons and HTML code<\/em>:[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"Generate                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]After a short while, you will be sent back to your WordPress site, and you will see a message on your dashboard letting you know that your favicon is all set.[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"Favicon                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Also, here you will be able to get a preview of how your favicon looks like on different devices:[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"How                        <\/div>\n<\/div>[vc_empty_space height=”79px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n
Conclusion<\/h2>\n
[\/vc_column_text][vc_column_text]And that sums up the process of adding a favicon to your WordPress website. As is evident from the steps we\u2019ve presented above, once you figure out the design which will best represent you or your brand, the rest of the process is truly a piece of cake. [\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"
A favicon can help you a lot when it comes to improving your brand identity. Learn all you need to know about how to add a favicon to your WordPress website.<\/p>\n","protected":false},"author":2,"featured_media":8048,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[14,47,4,13],"class_list":["post-5273","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-core","tag-plugin","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/5273","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=5273"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/5273\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/8048"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=5273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=5273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=5273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}