Устанавливаем фавикон на сайт лёгким способом без плагина.

favicon

 

Иконка сайта (faviсon) – является очень важным элементом дизайна сайта или блога. Установка этого значка заметно выделяет  ваш ресурс из общей массы и  делает его запоминающимся на вкладках, в избранном и в результатах поисковой выдачи.

 favicon1-300x203

Впервые фавикон стали применять в 1999 году, а стандарт ICO – был зарегистрирован в 2003 году. Собственно с тех пор любой сайт без фавикона воспринимается несколько обезличенно,  всё равно что паспорт гражданина без фотографии.

 

Создать уникальный фавикон можно на сайте www.favicon.ru. Здесь можно нарисовать фавикон самому или заказать у профессионального дизайнера. Также есть возможность загрузить имеющееся у вас изображение, отредактировать на свой вкус и скачать на компьютер.

 

На сайтах faviconca.ru  и findicons.com – предлагаются для скачивания огромные коллекции  готовых фавиконов на любой вкус. В общем, в интернете без труда можно найти сервис для создания иконки или скачать готовую коллекцию. Хорошим помощником в таком деле может стать программа Snagit, в ней вы можете работать с изображениями в формате ico, изменять их  размер и переформатировать любой формат в ico. Вообще программа Snagit – незаменима для вебмастера.

 

Я же хочу рассказать о лёгком способе установки скачанного или созданного фавикона на сайт WordPress.

 

Разумеется  самый лёгкий способ установки фавикона —  с помощью плагина. Но мы все боремся за скорость загрузки сайта, которая влияет на ранжирование в поисковой выдаче, а следственно на посещаемость. Тот факт, что плагины замедляют загрузку – далеко не пустые слова. Отключение и удаление плагина выводящего фавикон (раз мы об этом говорим) повысило показатель загрузки главной страницы моего сайта на 3 пункта по Page Speed Score.  Многие “коллеги” утверждали, что более 90% разогнать сайт не реально, но показатель моего – 98%. И это не может не радовать.

Читать также:  Конструктор шаблонов WordPress

 

Устанавливаем фавикон на WordPress без плагина.

 

 

Честно скажу, перепробовал я огромное количество вариантов, но на мой шаблон(HTML-5)  не ложились скрипты предлагаемые в большинстве случаев. Или строчка кода вылезала из шаблона, или фавикон не устанавливался, а шаблон не поддерживает его установку.  После долгих мучений, я начал подумывать о возвращении к плагину, но способ решения нашёлся и я спешу им с вами поделиться.

 

Прежде всего, созданный вами файл с расширением ico надо так и назвать — favicon.ico и залить на хостинг в корневую папку, у меня это public_html. Просто положите его среди файлов. Сделать быстро это можно с помощью Ftp-клиента FileZilla или используя вход через CPanel.

 

Далее, откройте для редактирования в шаблоне вашего сайта файл header.php. В панели вкладок “Админки” сайта нажмите Дизайн(Внешний вид) – Редактор. Затем в правой колонке, выберите header.php.

 

В самом начале файла найдите такие строчки:

 

favicon-code

В это место, отмеченное красным маркером, между второй и третьей строкой, надо вставить такую строчку:

 

<link rel="shortcut icon" href="http://www.имя_сайта.ru/favicon.ico" />

 

Обязательно укажите имя своего сайта.

 

Хочу напомнить, что редактировать файлы шаблона лучше всего текстовым редактором Notepad++, сохранив на всякий случай копию оригинал. Но если вы уверены, что рука не дрогнет и кошка не прыгнет на клавиатуру во время редактирования – вставьте эту строчку прямо в админке и быстро нажмите кнопку “Обновить файл”.

 

В результате должно получиться так:

 

<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<link rel="shortcut icon" href="http://www.имя-сайта.ru/favicon.ico" />
<title><?php wp_title( '|', true, 'right' ); ?></title>

 

Теперь открываете свой сайт в браузере и любуетесь фавиконом.

Читать также:  Редактирование файлов шаблона WordPress. Значение кодов.

 

А если вам не нравится его вид – можете быстро поменять картинку, пока она не индексируется поисковиками. Для этого вам надо перезалить файл на хостинг и дать ему такое же имя.

 

Иконка сайта для мобильных устройств  Apple-Touch-Icon.

 

В последнее время, мобильные гаджеты приобретают всё большую популярность. В том числе, для посещения интернет ресурсов. Компания Google придаёт этому факту очень большое значение и судя по финансовым отчётам за 2013 год – не напрасно. При проверке  сайта в сервисе Page Speed inside,  или в кабинете для вебмастеров Google вы видели, что сайт тестируется в двух аспектах: для настольных компьютеров и для мобильных устройств.

 

При каждом посещении любого интернет ресурса, мобильное устройство ищет в корневой папке  этого сайта иконку, которая после визита, сохранится в “избранном”, на десктопе гаджета. Такая иконка носит название apple-touch-icon.png – это картинка в формате PNG размером 57х57 пикселей и предназначена для всех устройств на базе Android (не только для Apple). Размеров таких иконок несколько для разного вида устройств и для каждого из них надо вставить в шаблон сайта соответствующую строку, как для фавикона.

 

Впервые, я задался вопросом по поводу этого изображения, просматривая журнал регистрации ошибок 404, представляемый плагином безопасности iThemes Security.  В этом представляются ошибки сканирования сайта ботами поисковых систем по ссылкам на удалённые записи или изображения. Также можно увидеть “битые” ссылки и попытки несанкционированного проникновения в админку сайта.

 

Ссылка на описываемое здесь изображение, в журнале выглядела так: /apple-touch-icon.png. У меня на сайте никогда  не было изображения с таким названием и я игнорировал это сообщение полагая, что поисковый бот сканирует сайт по ошибочной ссылке. Как выяснилось – мой сайт посещали с мобильного устройства.

Читать также:  Как восстановить удаленные фотографии

 

Чтобы решить эту проблему, создайте подходящее для вашего сайта изображение PNG, назовите его apple-touch-icon.png и загрузите в корневой каталог своего сайта.

 

Ошибка 404 появляться больше не будет, а для владельцев мобильных устройств ваш сайт будет узнаваемым благодаря красивой, уникальной иконке.

 

На этом всё. Желаю вам удачи.

 

Если не затруднит – кликните пожалуйста на социальную кнопку. Спасибо!

Закладка постоянная ссылка.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *