Как в wordpress добавить favicon

Create a Favicon

A favicon (short for “favorite icon”) is an icon associated with a particular website or web page. It is generally intended to be used when you bookmark a web page. Web browsers use them in the URL bar, on tabs, and elsewhere to help identify a website visually. Favicons are also used as application icons on mobile devices.

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.

WordPress Version 4.3 or later

WordPress Version 4.3 implemented a Site Icon feature that enables favicons on your web site.

When you use the Site Icon feature, you don’t need to prepare the favicon.ico file by yourself, or modify your template file. All you have to do is navigate to the Customize screen and specify a square image that has a height and width of at least 512 px.

Later paragraphs in this article contain instructions for manually setting up your own favicon. However, it is highly recommended that you use the Site Icon feature (a feature that is built-in to WordPress) instead.

Follow the steps below to use Site Icon to set up a favicon for your site.

1. Prepare the image file. (It must be square, having a height and width of at least 512 px.)
2. Navigate to Administration Screen > Appearance > Customize
3. Click Site Identity
4. Click Select Image (located under the Site Icon subheading).
5. Click on the Upload Files tab, then click Select Files to upload the image file that you prepared in the previous step.

Creating a Favicon

A favicon can be created by using any graphics/image editing software 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 visually appealing. Ideally it should be designed to match your site’s brand image and/or content.

To prepare the image to be saved as favicon.ico:

1. Make the image square by cropping or adding space around it.
2. Resize the image to 16 x 16 pixels.
3. Save the file as favicon.ico .

If you’re using an online service to create your favicon (such as Faviconer.com 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 your theme or your WordPress version does not support the Site Icon option described above, you can use this method to manually add a Favicon.

If there is already an old favicon.ico file in your current theme’s main folder, delete it using an FTP Client.

1. Use an FTP Client to upload the new favicon.ico file into your current theme’s main folder.
2. 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’ feed readers.

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. As you follow along with the following instructions, it is highly recommended that you create and modify the copy of header.php that is located in your child theme.)

1. Go to your WordPress Administration Screen.
2. Click on Appearance.
3. Click on Theme Editor.
4. Select the file called Header or header.php to edit the file.
5. 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 HTML tag:

Save the changes.

How to create a favicon with a transparent background

Before implementing this method, please make sure that your source image already has a transparent background, which means it should be a GIF or a PNG. The rest of the steps are as mentioned above. The one difference in the code is that, instead of using a favicon.ico file, use favicon.png or favicon.gif instead.

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 HTML tag:

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

1. Compatibility – As of this writing, most modern browsers–except for iOS Safari and Opera Mini–support the .ico format.
2. Avoid 404 server errors – Virtually all modern browsers will request a favicon.ico, so it’s best to always have a favicon.ico file, to avoid a “404 not found” error.
3. An .ico file can hold more than one icon, so there is no need to include multiple files for 16×16 and 48×48 icons.

Was this article helpful? How could it be improved? Cancel reply

Log in to submit feedback. If you need support with something that wasn't covered by this article, please post your question in the support forums.

How to Add a Favicon to WordPress Correctly, Including Webmanifests

Favicons and WordPress go together like Barbie and Ken. You can’t have one without the other. No doubt you’re familiar with both of them to a certain extent. If you aren’t then this How to Add a Favicon to WordPress setup guide is the article for you. Come into my boudoir, or maybe not, so I can tell you all about them.

We’ll also be touching on Web App Manifests and how they integrate your favicon serving strategies to ensure your progressive web app (PWA) smashes the Google Lighthouse audit without issue. Bit of a mouthful, but this sentence will be the hardest part of the talk. Promise.

Quick Links to All Headings

What is a Favicon?

A favicon is short for favourite icon. They aren’t just aligned with WordPress, but almost all websites and apps use them in one form or another. However, a favicon in its truest sense is what your browser uses next to the page title in the browser tab, which gives you a quick way to identify your favourite websites.

Traditionally a favicon differs from a desktop shortcut icon because a favicon lives in your browser tab, whereas a desktop or app icon lives on the device screen and especially the homepage.

How to Add a Favicon to WordPress the Easy Way

Luckily for the non-techies out there, WordPress offers a super simple way to add a favicon to your website. You simply navigate to your WordPress dashboard and follow the links below:

• Appearance — Customise — Site Identity — ‘Select Image’

Then once you are on Site Identity you will see a ‘select image’ buton. This is where you add your favicon, which has to be a minimum of 512 x 512 pixels, according to WordPress guidelines. You can install a .jpg or .png here and if possible try and optimise it beforehand, even if you have an image optimising plugin such as WP Smush.

The actual size of most favicons is only 32 x 32 pixels, but WordPress is asking for a bigger image in case somebody wants to save your website to their desktop or smartphone home screen. Effectively doubling your favicon up as a shortcut icon.

If you want a quick and easy solution this is the one for you. However, if you’re a geek like me and want to know the fastest or most optimal way to serve your favicon then read on…

The Problem with the Standard WordPress Option

When you run your website through a speed and performance checking website tool, such as GT Metrix or Pingdom tools is that because your favicon is currently doing two jobs, as mentioned earlier. It’s trying to be a favicon and also a desktop shortcut and WordPress has the 512 squared image that it is cropping for your 32 squared favicon.

For a performance benchmarking site this is sacrilege, as every time WordPress has to crop your icon on the fly, it’s costing time by adding a small latency penalty, but even small things add up. You know how pennies add up into pounds when you do the weekly shop, well for websites bytes add up into kilo-bytes and you get the picture. It costs you time and time is our enemy.

The standard WordPress way also only gives the browser two options. In the real world there are plenty more ways to serve favicons and their big brother, aka the desktop shortcut icon.

Ideally You Should use an ICO File

ICO files are beneficial because you can include more than one image in the same file. In fact, they are doubly useful, because as well as including several images, the images themselves can be scaled.

Whereas a regular raster image, like a .jpg or .png gets blurred and pixelated as you zoom out. ICO files are vector images, same as what is used in Adobe Illustrator images. They are based on mathematical points, rather than individual pixels, so you can zoom out as much as you want and they don’t get blurred. In truth, though, it’s not as if you will zoom into a favicon, but that’s the technical jargon behind them.

How to Add a Favicon to WordPress to Suit Every Device

In the olden days of computing, all everyone needed was a humble 16 x 16 pixel favicon. Then it was 32 x 32 and more colours. Eventually it went up to 48 x 48 for higher resolution displays. The great thing about favicon.ico is that you can have all three of these little critters snuggled up in the same file. This saves resources and network calls compared to downloading three separate image files.

Then things got more complicated… people started using phones and tablets, each with different operating systems on. For various reasons. Apple, always like to be different, even though they will tell you it’s for the customer and ease of use. Don’t believe them. They’re big fat liars, look at how many times they said you can’t get photographs off a device that’s been in water. Yet a mom managed to do it in her kitchen and started ipadrehab, but that’s another story.

In short, just don’t believe billion dollar companies when they tell you something. On the other hand, you can always trust individuals like me who do have your best interest at hand!

Right, where was I? Awe yeah, if you want to be serve your favicon to everyone that you come across then it gets slightly more complicated. Nothing to worry about, however.

Creating a Website Manifest for a Progressive Web Application

The criteria for Progressive Web Apps or PWAs is more intense than for regular websites. If you run your website through Google’s Lighthouse website audit it will ask for a web manifest. Quick tip, always try and run Lighthouse using an Incognito window in Chrome browser, as it will give you cleaner results.

Webmanifest Contents for Sonic SEO PWA

*I’ve probably gone overboard on the icons, purely because I combined the results from two different authorities. Rather than miss something out I played it safe and included the extra icons.

Webmanifest Essentials — What Google Expects

Although I’ve suddenly flipped to webmanifests it’s because they go hand-in-glove with our beloved favicons. Essentially all a webmanifest does is include a list of all your favicons and desktop shortcut ions, plus a start URL for your browser. It’s not difficult once you are familiar with the contents.

The two actual websites that I used to create my own manifest were from Real Favicon Generator and also Firebase web app manifest generator, which is now owned by Google.

Whenever you combine two similar, but still different, pieces of advice or content you will always get conflicting results or opinions. I could be wrong, but in the end decided to combine the two offerings into one and am pleased with the results, as all my PWAs pass the Lighthouse audit for Apps and Manifests.

Real Favicon Generator or Firebase App?

A good example of when two pieces of info conflict is right here; Real Favicon Generator offered up a site.webmanifest file and Firebase offered a manifest.json. Which one is correct? They both are, but seen as though the first solution is actually called a .webmanifest that seemed like the winner to me! It’s a bit like calling an image or photography file .photo. Of course that sounds better than .jpg or .png doesn’t it?

Since I’ve double checked, however, Mozilla reference the JSON text file for the Web App Manifest , so its another one of them personal preference things.

Choice is always good, but when you’re a pedant choice can be annoying. In truth, both solutions are perfectly fine because a .webmanifest file is still written in JSON, even if the file type isn’t actually .json

Here’s Google’s take on the Web App Manifest.

It seems like the one I’m using is derived from the W3C.Org or World Wide Web Consortium… linking to a manifest and here are some more manifest examples.

Another quick tip — if you use Real Favicon Generator to create your manifest and favicons, it’s best to choose a start URL. They only ask you to do so as an option, but Lighthouse throws an error if you don’t include one. If in doubt, all you need to do is use your homepage URL.

Ensure you have all the basics covered, such as making sure your URL paths to the icons work out.

You’ll also need a service worker if you’re turning your website into a PWA, but I’ll go over this in a minute.

Basic Service Worker Implementation

Although this article is about Favicons, to install each version will require a manifest and if you’re doing that the natural progression is to a PWA and you’ll need a service worker for that. The documents and details are on the AMP website, follow this link below.

A service worker is nothing more than a few lines of code that can run independently to your website and even when your website is offline. It’s not a magician so don’t expect it to download code when your viewers have no signal in the middle of the Sahara Desert. That said, however, it will get enough code while it can to keep people happier than having no content at all. Google thinks they’re the next big thing apparently so I’m really interested in them.

Actually they have been around for a couple of years now, but because we’re already in a really good place with website technology, uptake of the service workers hasn’t been as fast as web pioneers would have liked. Let’s be real, there’s so many different software ideas all competing for brain space, it’s impossible for even the most tech-savvy folks to know about them, never mind ordinary Joe and Janice sat watching the Kardashians.

If you’re running AMP, there is a specific link to a service worker that you can use without creating your own, which is what I am using on all my AMP and PWA sites. That being said, I did manage to get my own version working from code that I cobbled together from Google Developer website.

You simply need to save a file in your website root folder as sw.js and include this code inside the file.

• importScripts(‘https://cdn.ampproject.org/sw/amp-sw.js’);
  AMP_SW.init();

Optional Service Worker Code

//This is the version I first used from Google Devs website instead of using the import script above. They both work, but I thought the import script was preferable as it’s ready made, although the one I made is still from code written by Googlers so it should be perfectly safe and I didn’t have any issues with it so use either one.

self.addEventListener(‘install’, function(event) <
// Perform install steps
>);

var CACHE_NAME = ‘parallax-cache’;
var urlsToCache = [
‘/’,
‘/wp-admin/css/’,
‘/wp-admin/js/’
];

self.addEventListener(‘install’, function(event) <
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) <
console.log(‘Opened cache’);
return cache.addAll(urlsToCache);
>)
);
>);

self.addEventListener(‘fetch’, function(event) <
event.respondWith(
caches.match(event.request)
.then(function(response) <
// Cache hit — return response
if (response) <
return response;
>

return fetch(event.request).then(
function(response) <
// Check if we received a valid response
if(!response || response.status !== 200 || response.type !== ‘basic’) <
return response;
>

// IMPORTANT: Clone the response. A response is a stream
// and because we want the browser to consume the response
// as well as the cache consuming the response, we need
// to clone it so we have two streams.
var responseToCache = response.clone();

caches.open(CACHE_NAME)
.then(function(cache) <
cache.put(event.request, responseToCache);
>);

Where to Upload Your Icons/Favicons

All you have to do is upload all your favicons to the root folder of your website. It doesn’t matter if that is WordPress or standard HTML. As long as their is some code in your site’s header or header.php file telling the browser where all your icons live it will work perfectly.

There is even a favicon checker, for peace of mind, to use once you’ve uploaded everything. If your results aren’t as expected, again make sure to check the basics such as flushing your caches. It might take a while before a clean version of your site gets through.

Favicon Links in Header.PHP File

If you’re using WordPress then include all your favicon links in your child theme’s header.php file. You don’t have to make a child theme, but it is best practice and using this plugin takes only seconds once you are used to using it. Honestly, I have found it that easy I’ve made a child theme for all of my websites.

Even though all the favicons are linked, your browser shouldn’t waste bandwidth downloading anything that it doesn’t need, unless you write code to tell it to do otherwise.

For example, if you run the same code as me and check your website in GT Metrix, it should only show that the favicon.ico file is downloaded. You shouldn’t need to preload or preconnect to a favicon.ico file because browsers look for a favicon automatically. If it can’t find one it will display the default blue box favicon.

Bear in mind that your favicon might not show up on your own computer until you’ve cleared your browser cache. Quite often I get a few weird results from the website speed checking tools, but once you go back the next day everything will be fine. You will be able to tell through experience whether it is generally the browser or caching issues that are affecting whether your favicons are getting displayed correctly or not.

Offloading Favicon Files to a CDN

If you’re not using Cloudflare you should be, it’s a free content delivery network. It also pairs up sweet with Stackpath, which is a paid CDN, but it’s only $10 dollars a month regardless of how many websites that you own. Well worth it in my opinion.

As you can see from lines 19/20 in the code above, I’m telling the browser that my favicon is available from my CDN, which is Stackpath and also Cloudflare, but my assets are stored on Stackpath. It’s not actually essential to call the link twice, because you’re really saying the same thing twice, but I got the idea from KeyCDN and thought that if it works for them then it should be okay for me. You can always experiment and delete the second call if you wish! Just check for duplicate calls in your performance reports and delete as necessary.

Conclusion

Let’s have a brief recap of what we’ve discussed and that you’ve learned, which is most important, because I’d have wasted your time otherwise…

1. How to Add a Favicon to WordPress.
2. What is a Favicon?
3. What is an ICO file?
4. Webmanifests and why Google requests them?
5. Service workers — manifests — favicons — how they all interlink.
6. How to offload your favicon to a CDN.
7. Linking to your favicons from header.php file.

Hopefully you’ve found at least some of this information useful. If so please give it a like and a share, as I’d be super stoked for your help in getting this out to as many WordPress geeks as possible. Favicons are only small and often they go unnoticed, but they really do need to be loaded correctly, otherwise it can impact the speed and performance of your website. That isn’t good for you or your readers.

Alternatively, there are a couple of other blog posts that you might find interesting.

Should you require any information or perhaps the answer to something WordPress related, then without doubt hit me up on my email address or comment below.

A big help would be if you enjoyed reading this then please share the original story from my blog over at Sonic SEO — How to Add a Favicon to WordPress.

4 Ways to Add a WordPress Favicon (Manually, Gutenberg and Block Editors + More)

A WordPress favicon represents your website on various platforms. It appears next to the website’s title in the browser tab, history, and bookmarks. Despite its small size, it has an important role in helping users identify your site.

This article will explain how to add a WordPress favicon using four different methods – manually, using Gutenberg block, Customizer, and a plugin. We will also discuss why WordPress favicon is important and offer useful tips on creating a custom WordPress favicon.

What Is WordPress Favicon

WordPress favicon is a unique icon associated with a website. It is typically a small square image with a design representing the site’s identity. WordPress favicon usually appears on the WordPress dashboard and browser tabs.

Why Adding a Favicon to Your Site is Important

A WordPress favicon represents the site identity, helping people recognize your site. While the icon image is small, it can greatly impact the user experience and your brand reputation. Here are some reasons why a favicon in WordPress site is important:

• Improve user experience. Many users have multiple tabs open in their web browsers. A favicon next to the site title helps users easily differentiate each tab and identify your site.
• Improve visibility. If set up correctly, your favicon will appear on the search results next to your WordPress website URL. This helps people notice your site and increases organic traffic.
• Improve mobile experience. Many mobile devices allow users to add any web page to their home screen. When they add a website to their mobile device home screen, it will display the favicon, allowing the user to locate your site among many app icons.
• Build trust. WordPress favicons make websites look more professional. If a website doesn’t have a favicon, the web browser will use a default icon that makes the website appear unfinished.

Creating a Favicon in WordPress

WordPress has a native favicon feature and lets you add one using various methods. However, before uploading a custom favicon file to WordPress, there are several preparations to make:

• Ensure the icon is a square image with a size of at least 512px x 512px. To change the image size, use an image editing software like Adobe Photoshop or online favicon generators like RealFaviconGenerator, Favicon.io, and Favicon-generator.org.
• Pick a background color for the favicon. A transparent background is best, especially if you have white space in the design.
• Choose the right image format. WordPress favicons usually use the ICO file format, but now you can also use JPEG and GIF. However, you must use PNG if your icon’s background is transparent.

Once the image is ready, add the new favicon to your WordPress site using one of the following methods.

Using a Gutenberg Block

The easiest way to add a favicon to WordPress is using the Gutenberg block editor. Note that this method is only possible if you use a WordPress block theme and WordPress 5.9 or higher. Here are the steps to do so:

1. Open the Site Editor by navigating to Appearance → Editor from your WordPress dashboard.
2. Hover the mouse over the area where you want to put the logo and click the block inserter (+). While you can add it anywhere on your site, we recommend adding it to the header area.
3. Search for the Site Logo block on the search bar and select it to add it to your site.

1. Click the Add a site logo button on the block to open the media library pop-up.

1. Upload your image file or select it from the media library. Click Select.

1. You’ll see the favicon image on the site logo block. Click the block and open its Settings at the top-right corner of the editor.
2. Open the Settings section and enable the Use as site icon toggle.

1. Click Save at the top-right corner of the editor.

Using WordPress Customizer

You can add a favicon by customizing the site identity in the WordPress Customizer. This method is more suitable for classic theme users with WordPress version 4.3 or higher, as they will have the site icon feature.

Follow these steps to add a favicon using WordPress Customizer:

1. Navigate to Appearance → Customizer from your dashboard. If the option is unavailable or you use a block theme, use the /wp-admin/customize.php slug to open it.
2. Choose the Site Identity tab on the left sidebar and click the Select site icon button.

1. The WordPress media library pop-up will appear. Upload your favicon or choose an existing image from the media library. Click Select.
2. You’ll immediately see from your browser tab that the new favicon is set. Click the Publish button to save the change.

Using a WordPress Favicon Plugin

Another method to add a favicon to WordPress is by using a plugin. There are several WordPress favicon plugins, but Favicon by RealFaviconGenerator is the top-rated one. Install and activate the plugin from the WordPress dashboard, then follow these steps:

1. Go to the Appearance → Favicon from your WordPress dashboard.
2. Click Select from the Media Library to upload or choose a favicon image. You don’t need to edit your image using image editing software because the plugin will do it for you. Ideally, your image should be at least 260 x 260 px in size.

1. Click Generate favicon. The plugin will take you to the RealFaviconGenerator website, where you can customize your image.
2. Select Use the original image as is if you don’t want to alter it. Alternatively, choose Add margins and a plain background if you want to add background color and modify the image size.

1. Scroll down to the bottom and click Generate your Favicon and HTML code. It will take you back to the WordPress admin dashboard.

Now your WordPress website’s favicon should be in place. You can also check your favicon in the plugin’s admin panel by clicking the Check your favicon button. It will take you to the RealFaviconGenerator website, which shows the previews of your favicon on various platforms.

Note that you should not deactivate this plugin, as it will automatically disable your favicon.

Manually Add a Favicon to a WordPress Site

Another method is manually adding a favicon in WordPress. This method requires some WordPress file modification. Therefore, we recommend testing in a WordPress staging environment before applying it to the live site.

You must use a generator such as RealFaviconGenerator to create the favicon package and code snippet. Here are the steps to do that:

1. Open the RealFaviconGenerator website and click the Select your Favicon image button to upload your image.

1. Scroll down to the Favicon Generator Options. In the Path tab, the default option is to place the favicon files in your site’s root directory. Choose the second option and define the path if you want to put it in another directory. Click Generate your Favicons and HTML code.

1. Download the icon files by clicking the Favicon package button. It contains the PNG and ICO files of your selected image. Keep this page open, as you must copy the favicon code later.

1. Use an FTP client or your hosting account’s file manager to access your site’s root directory and upload the favicon package. You should upload and extract it in the same folder as the wp-admin and wp-content folders.
2. Open your active theme’s folder. For example, if you’re using the Twenty Twenty theme, open /wp-content/themes/twentytwenty.

1. Open the header.php template file and paste the favicon code from the RealFaviconGenerator page. Make sure that you add your own URL in the href attribute. It should look like this:

1. Save the changes.

Important! A theme update can revert all modifications in the header.php file. Use a child theme if you want to modify your theme while keeping it up-to-date.

Tips for Creating a WordPress Favicon

Great site icons allow users to identify the web page quickly and build a long-lasting brand association. Here are some tips for creating a unique favicon:

• Avoid using long text. The size of the favicon is so small that even short text is hard to read. Consider creating a different design for the site’s favicon if your logo has a spelled-out site name. You can quickly create a custom favicon using AI tools such as logo generators.
• Don’t update it too frequently. A favicon helps customers associate the image with your brand. If you change the favicon too often, it will be hard for them to build that brand association.
• Choose the right color scheme. With the customizable browser appearance and the popularity of night mode, your favicon should look good regardless of the browser’s appearance. We recommend testing your favicon with various background colors like white, gray, and black.
• Read Google guidelines. Follow Google’s favicon guidelines to get your favicon shown on Google search results.

Conclusion

The favicon in WordPress is a small icon representing your site on browser tabs. Its presence is important in enhancing user experience and brand recognition.

WordPress CMS has a built-in site icon feature, and you can add a favicon icon using one of these methods:

• Using the site icon WordPress block in the Gutenberg editor. This method is ideal for block theme users.
• Using the WordPress Customizer by changing the site identity settings.
• Using the RealFaviconGenerator plugin. This method lets you upload and set the favicon easily. That said, you have to keep the plugin activated.
• Editing the theme’s files manually. We recommend using a child theme if you want to edit theme files.

Before uploading the image, ensure it has the right WordPress favicon size and aspect ratio.

We hope this step-by-step guide helps you set up a favicon for your WordPress site.

Как быстро и качественно установить favicon на WordPress: 3 подробных метода и пошаговые инструкции

В вордпресс существует стандартная функция. Чтобы добавить в панели WordPress заходим в Внешний вид > Настроить.

Вкладка настроить

Откроется окно (на сленге разработчиков) кастомайзера. Заходим в раздел Свойства сайта.

Свойства

Откроется новая вкладка, находим «Выберите значок сайта».

Выбор значка

Появится всплывающее окно с выбором файла изображения для установки или смены Favicon, можно загрузить с компьютера или выбрать с библиотеки имеющейся в базе.

Рекомендуется использовать размер не менее 512 на 512 пикселей (px).

Загрузка изображения

• Выбираем откуда загрузим изображение с жесткого диска или ранее доступных в библиотеке
• Отмечаем необходимое
• Жмем Выбрать

Появится окно в котором настраиваем отображение, область квадратная по умолчанию. Изменить размер и нажать обрезать.

Предварительный просмотр

В предварительном просмотре WordPress установит фавикон, и покажет, как он отображается в закладках браузера. Если все хорошо, то выбираем Опубликовать.

Публикуем

WordPress загрузит и сгенерирует несколько форматов для разных систем и браузеров, в зависимости откуда пришел посетитель:

1. Mac OS
2. Ios
3. Android
4. Приложения Windows

Установить favicon на WP с помощью плагина

Единственный вменяемый плагин это «Favicon by RealFaviconGenerator» , особенность заключается в том, что он проставляет фото для всех устройств:

• Mac
• Iphone
• Android
• IOS
• Surface

Устанавливаем стандартно и переходим к работе, в панели заходим Внешний вид > Favicon. В открывшемся окошке находим «Выберите из библиотеки мультимедиа».

Выбор изображения для плагина

Откроется форма с выбором картинки, можете загрузить собственное или воспользоваться ранее сохраненными в WordPress. Не забудьте заранее оптимизировать фото под WP.

Библиотека медиафайлов

Далее нажимаем кнопку Генерировать.

Генерация

Перекинет на официальный ресурс realfavicongenerator, если изображение выбрано правильно то нажимаем синюю кнопку «Continue with this picture».

Подтверждение и продолжение процесса

Смотрим, как будет отображение на разных устройствах и браузерах, если все нормально, то перелистываем страницу вниз и нажимаем Generate your favicon and HTML code.

отображение на разных устройствах

Ждем пока сервис обработает запрос и автоматически перебросит обратно в админку WordPress. Для надежности обновляем Ctrl+F5 и любуемся на установленный значок, который корректно отображается на всех устройствах.

Проверка работы плагина

Как поменять иконку кодом

Ввиду разнообразия тем, бывает что способы описанные выше не срабатывают. Тогда прибегнем к методу, прописываем favicon напрямую в тему.

Для начала нужно установить FTP соединение и в корень, обычно папка public_html, загружаем изображение, с каким расширением решайте сами, главное чтобы он был квадратным.

favicon.png в корне сайта

Даю код, который нужно добавить в раздел head в активной теме.

Идем в админпанели Внешний вид > Редактор и выбираем файл header.php то есть заголовок, и перед закрывающим тегом /head вставляем данный код.

Правильно устанавливаем фавикон в раздел head

1. Редактор тем
2. Заголовок header.php
3. Закрывающий тег </header>
4. Код для вставки
5. Обновляем файл

В примере разобран файл в формате png, но если в другом, например, jpg, то в код меняем таким образом.

Видим что изменился атрибут type он стал со значением jpg, а так же расширение картинки изменилось на другое. Обновляем и смотрим на работу кода.

Favicon в браузере

Важный момент, что большинство браузеров могут сами найти в корне сайта favicon, только необходимо чтобы он был в формате ico. Но не всегда срабатывает, потратьте 5 минут времени и установите элемент как надо. Полезно знать как вставлять шорткоды в темы. Чтобы увидеть все наглядно предлагая посмотреть мое видео.

Где хранится иконка

Задают вопросы где хранится иконка на сервере. Ответ прост, если размещали с помощью первых 2 методов, то расположение будет такое wp-content/uplouads .

папка на хостинге со всеми фото

В папках по годам, будут каталоги по месяцам, в них размещены все медиафайлы блога. Вспомните, когда производили установку и найдите объект на сервере.

Яндекс не видит значок

После внесения правок любым способом, описанных в статье, пользователи хотят наблюдать значок в выдаче поисковиков. Но Яндекс и Гугл не сразу обновят информацию, потому что это связано с индексированием ресурса. Смотрите когда у поисковых систем апдейты и следите за изменениями в выдаче.

Чтобы ускорить индексирование заносите главную страницу на переобход, это сократит время обновления базы. Так выглядит настройка в яндекс вебмастере. Время изменений в выдаче от 5 до 90 дней.

Переобход страниц в Яндексе

На этом урок закончу, потому что ответ на вопрос как установить favicon на wordpress разобран полностью, жду ваших рекомендаций в комментариях.