Грамотная оптимизация сайтов состоит из множества разных действий. Чтобы ресурс был идеальным, необходимо настроить каждый параметр и учесть все мелочи.
Казалось бы, какая разница, какая иконка расположена во вкладке с сайтом? Но это очень важно, ведь логотип часто является брендом и запоминается.
Как установить Favicon на WordPress? Большинство начинающих вебмастеров используют именно этот движок, поэтому мы решили подробно ответить на данный вопрос.
Изменить иконку можно разными способами, мы рассмотрим 3 лучших варианта. Возможно, у вас получится сменить Favicon только каким-то одним способом.
Меняем фавикон на Вордпрессе
Что вообще такое Favicon, спросят некоторые новички. Это небольшой логотип, который отображается во вкладках браузера и поисковой выдаче:
С его помощью намного удобнее работать по вкладкам, ведь когда их открыто много, текст уже не видно. Шаблонный фавикон можно отнести к , профессионалы всегда его меняют. Где взять небольшую и красивую иконку? Её можно найти в сети или нарисовать самостоятельно.
Через поисковые системы можно найти иконки размера 32x32 или 16x16 , скачать их и установить себе Favicon на WordPress. Если хотите что-то оригинальное, тогда favicon.cc и нарисуйте иконку:
Абсолютно бесплатно вы получите уникальную иконку и уже через пару минут сможете установить её для своего сайта. Если хотите, то просто уменьшите любую картинку до нужных размеров.
Установка Favicon на WordPress
Чтобы поставить готовую иконку на свой сайт, вы можете воспользоваться одним из следующих способов:
- Плагин All In One Favicon .
Нет проще способа для загрузки иконки на сайт, чем использование данного плагина. Устанавливается он стандартно, а после перехода к настройкам Frontend Settings они отвечают за отображение фавикона для посетителей. Можно использовать разные форматы изображения:
- Настройки шаблона.
Практически во всех темах есть некоторые настройки, в том числе и функционал для добавления Favicon. Заходите в пункт «Внешний вид» и переходите на вкладку «Настройка темы». Там должен быть какой-нибудь параметр, в котором указано слово Favicon:
- Ручное добавление.
Если плагины устанавливать не хочется, а в теме нет настройки фавикона, тогда остается верный способ - добавление иконки через код. Сначала вам нужно загрузить изображение на хостинг (желательно в корневую папку).
Затем открывайте папку с вашей темой /wp-content/themes/ тема/ и редактируйте файл header.php. После тега
нужно вставить пару строчек:Обратите внимание, что в коде прописаны адреса к изображениям в формате ico, если у вас он другой, вносите изменение в код.
Пускай установка Favicon в WordPress и не является сложной процедурой, проделать её нужно обязательно. На оптимизацию влияет каждая мелочь, а помимо добавления иконки, используйте социальные кнопки от UpToLike . Потратьте несколько минут, чтобы посетители вашего сайта могли делиться записями, лайкать их и так далее.
Приветствую уважаемый посетитель. В данной статье/уроке поговорим о иконке сайта, другими словами favicon.
Данная иконка выделяет ваш сайт wordpress от других сайтов во вкладке браузера, тем самым пользователь с легкостью сможет найти его. Вставить favicon в wordpress можно 3 различными способами, давайте разберем все.
Перед тем как перейти к установке, нам необходимо создать иконку. Для этого необходимо выбрать понравившуюся вам картинку, после чего перейти на страницу поисковой системы. В строке поиска вводим «генератор favicon онлайн» и переходим на любой сайт, к примеру pr-cy.ru
После чего нажимаем кнопку «обзор»(1), выбираем картинку, которую вы хотите использовать в качестве favicon на wordpress сайте, после чего нажимаем кнопку «создать Favicon»(2), затем «скачать»(3). Готовая иконка сайта успешно сохранена на ваш компьютер, после чего можно переходить к самой установке.
Как вставить favicon в wordpress через настройки темы wordpress:
Практически каждая снабжена своими настройками, которые предусматривают смену, либо установку favicon.ico. Необходимо перейти в настройки вашей темы, обычно расположение следующее «Внешний вид — Название вашей темы(настройки)».В настройках темы необходимо нажать кнопку «Загрузить», выбрать favicon.ico на вашем компьютере, после чего сохранить настройки темы. Таким простейшим образом вставляется favicon на wordpress через настройки темы. Если в вашей теме нет таких настроек, переходим к установке иконки favicon через плагин.
Установка,смена favicon.ico на wordpress через плагин «Insert Headers and Footers».
Использовать данный вариант установки рекомендую только в том случае, если 1 и 3 вариант вам не подошли. «Insert Headers and Footers». После чего переходим к настройкам плагина «Параметры» - «Insert Headers and Footers». В поле «script in header» вставляем следующий код:
< link rel = "icon" href = "http://адрес-вашего-сайта.ru/favicon.ico" type = "image/x-icon" />
< link rel = "shortcut icon" href = "http://адрес-вашего-сайта.ru/favicon.ico" type = "image/x-icon" />
После чего сохраняем(2).
После того, как пути к иконке прописаны необходимо перейти на хостинг и загрузить иконку favicon в корневой каталог сайта wordpress(имя вашей папки/public_html).
Если у вас не получилось установить плагин, либо после его настройки favicon не отображается, переходим к 3 варианту вставки favicon на wordpress.
Вставка favicon.ico вручную на wordpress(редактирование файла темы header.php)
Данный вариант установки следует проводить аккуратно, не повредив файл вашего шаблона. , после чего выбираем «Внешний вид — Редактор». В правой части находим файл header.php, переходим в него. До тега вставляем следующий код:
< link rel = "icon" href = "http://адрес-вашего-сайта.ru/favicon.ico" type = "image/x-icon" />
Как установить фавикон. Вы, наверное, обратили внимание на то, что на многих сайтах во вкладках установлена маленькая иконка? Она называется – фавикон (от англ. FAVorites ICON – «иконка для избранного»). Фавикон это индивидуальный значок веб-сайта. Он отображается браузером на вкладках и перед URL страницы. Очень симпатично, и если этот значок подобран в тему, то по этой иконке можно сразу определить, о чем сайт. Но главное, что поисковики любят, когда установлен такой значок. А раз так, то значит, его обязательно необходимо установить.
Сначала фавикон необходимо создать. Для этого заходим на сайт по изготовлению фавиконов. Сайт больше не работает. Но в интернете есть много других похожих сервисов.
- Выбираем Сделать favicon из изображения и нажимаем кнопку Выберите файл ;
- Выбираем графический файл на своем компьютере и жмем кнопку Открыть ;
- Если необходимо, редактируем картинку и жмем кнопку Далее ;
- Можно сделать фон фавикону;
- После всех необходимых манипуляций опять жмем кнопку СКАЧАТЬ FAVICON ;
- На следующей странице опять жмем кнопку СКАЧАТЬ ;
Теперь необходимо загрузить фавикон в корневую папку вашего сайта. Для этого заходите по паролю на свой хостинг, находите там в панели управления Файловый менеджер, и открываете папку с названием вашего сайта.
Вот наш загруженный файл.
Его можно закинуть в любую папку вашего сайта, но тогда необходимо будет правильно прописать путь к нему в коде, который мы пропишем для поисковиков.
Теперь идем в свою админку на WordPress, выбираем — Внешний вид – Редактор – файл Заголовок (header. php) , и вставляем код
перед тегом head> . Замените адрес http://chudokompik.ru на свой.
Этот код нужен для поисковых роботов, а иконка у вас будет отображаться и без него.
Не забудьте после всех этих действий обновить свою страницу в браузере.
Вот мы и установили фавикон на свои страницы.
Посмотрите видео о том, как установить фавикон на сайт:
Если вам нужен надежный хостинг для своего сайта, то переходите по ссылке ниже.
И где можно скачать готовые иконки для сайта ico. Надеюсь, вы уже подобрали себе подходящую картинку? Если нет, то в следующей статье я расскажу, с помощью онлайн генераторов. Не пропустите. Сегодня же поговорим о том, как установить favicon на сайт или заменить его, если он вам не нравится. Эта процедура одинакова для любых веб-ресурсов, но я покажу весь процесс установки на примере CMS WordPress.
Выбирая или создавая иконку, позаботьтесь о том, чтобы она была уникальной и привлекала внимание. Вы же не забыли, что в поисковой выдаче Яндекс favicon показывается рядом с вашим сайтом. Оригинальный фавикон может увеличить количество переходов на сайт, что не может не радовать.
Как установить favicon на WordPress
При установке иконок для сайта возможны три варианта развития событий:
- из админки блога Вордпресс, используя настройки шаблона;
- обычная установка без плагина;
- с помощью плагина.
Вставляем фавикон на блог из админки
Это самый простой способ. Во многих премиум-шаблонах WordPress есть возможность устанавливать логотипы и иконки. Для этого идем в настройки темы, выбираем нужный файл на компьютере и жмем “Загрузить “. Сохраняем изменения и любуемся результатом. В моей теме можно загружать картинки в формате png или gif размером 16х16.
Установка favicon на сайт без плагина
Допустим, что у нас уже есть готовый фавикон. Это может быть картинка с любым названием в форматах GIF, JPEG, PNG или BMP. Однако напомню, что лучше всего, если это будет файл изображения в формате.ICO с размером 16×16 пикселей favicon.ico . Переименуйте, если у вас не так.
Добавить Favicon на сайт очень легко. Надо просто скопировать его в корневую директорию сайта по FTP. На Вордпресс это папка public_html (там, куда устанавливали robots.txt). Как заливать файлы на хостинг с помощью FTP-клиента FileZilla, читаем .
В принципе, можно больше ничего не делать. Современные браузеры сами найдут пиктограмму, если она расположена в корневой папке блога. Но мы ведь хотим, чтобы наша иконка отображалась и в поисковой выдаче. Поэтому, будет лучше, если указать специальному роботу Яндекса путь к файлу favicon.ico. Для этого в html-коде страниц блога между тегами
надо прописать такой код:В данном примере файл находится в корне сайта, а его адрес прописан в виде относительной ссылки. Если вы загрузили картинку в другую папку, то укажите полный путь к ней в атрибуте href . Если картинка не в формате.ico, то укажите это в атрибуте type , заменив x-icon на нужный формат.
Многие советуют вставлять обе строки, но я считаю это лишним и советую прописывать только верхнюю строчку. Поясню, для Internet Explorer пишем значение “shortcut icon “, остальные браузеры понимают “icon “, которое уже входит в это значение.
Как прописать код favicon для WordPress :
- Идем в админку “Внешний вид ” – “Редактор “.
- Открываем файл header.php.
- Вставляем код до закрывающего тега .
- Жмем “Обновить файл “.
Как поменять иконку сайта
Если на сайте уже установлен favicon, но вы хотите заменить его другим, то просто открываем по FTP корневую папку блога и меняем существующий файл на новый с таким же названием и форматом.
Если картинка расположена в другом месте, то делаем следующее:
- Открываем в браузере код страницы сайта (Ctrl+U).
- Ищем строку, где прописан адрес фавикона.
- Заменяем файл по указанному адресу.
Почему не отображается favicon
Если favicon не отображается в браузере после установки или замены, надо:
- перезапустить браузер;
- обновить кеш;
- проверить правильность пути к пиктограмме сайта.
В поисковой выдаче Яндекса favicon появится только после того, как сайт посетит специальный робот. После этого фавиконка преобразуется в формат PNG и добавляется на сервер Яндекса по адресу http://favicon.yandex.. Чтобы увидеть иконку своего сайта, замените имя моего домена своим. Бывает, что Яндекс долго не отображает пиктограмму в выдаче. Надо подождать и, если через месяц иконка не появится, можно задать вопрос в тех.поддержку.
Easy Favicons – Wordpress плагин для установки фавикона
Считаю, что использовать плагин для установки favicon на WordPress, это лишнее. Тем не менее, такая возможность для особо ленивых есть. Существует много подобных плагинов, но я покажу один, которым сам когда-то пользовался. Он называется Easy Favicons . Скачать его можно по .
Устанавливаем и активируем плагин (). Открываем в админке страницу с настройками.
Как видно выше, есть возможность установить фавикон тремя способами:
- использовать свой Gravatar;
- указать путь к картинке;
- выбрать иконку для сайта из установленного набора.
Вот и все дела. Теперь, надеюсь, понятно, как установить фавикон на сайт. Какой бы способ вы не выбрали, помните, что любой популярный сайт должен иметь свою узнаваемую иконку. Кроме того, ее можно периодически обновлять. Например, во время каких-то интересных событий или праздников. Представьте, если под Новый год человеку в поиске попадется ваш блог с картинкой Деда Мороза. Это может лишний раз привлечь внимание пользователя и заставить его выбрать именно ваш ресурс.
Ну вот, хотел покороче, получилось, как всегда. А как вы установили favicon на свой сайт?
От автора:
приветствую, вас, уважаемые читатели. В статье вы найдете информацию о том, как добавить favicon на сайт WordPress или как поменять favicon, который уже установлен. Представленный материал будет полезен как владельцам сайтов WordPress, так и владельцам любых других сайтов.
Итак, начнем с того, что же такое есть этот самый Favicon. Собственно, определение термина можно найти в Википедии. Из определения понятно, что favicon — ни что иное, как иконка сайта, показывающаяся (если она, конечно, имеется на сайте) во вкладке браузера слева от названия сайта. Если такая иконка не установлена, тогда на вкладке вы увидите только название сайта.
Согласитесь, наличие такой иконки делает сайт более узнаваемым. Особенно это касается брендовых проектов, которые могут знать и регулярно посещать многие пользователи. Наличие favicon на сайте имеет еще один, порой значительный, плюс — эта иконка показывается в результатах отдельных поисковых сервисов. Например, Яндекс Поиск показывает favicon.
Выгода здесь очень простая: пользователь что-то ищет, набирает поисковый запрос, получает результаты поиска, среди которых, допустим, будет и ваш сайт, но, скажем на пятом месте. При этом пользователь знает ваш сайт, посещает его. Как вы думаете, какова вероятность того, что пользователь, увидев в результатах поиска знакомую иконку, выберет ваш сайт? Думаю, вероятность достаточно высока. Именно поэтому иметь favicon на сайте, особенно брендовом проекте, крайне желательно.
КАК СДЕЛАТЬ FAVICON
Итак, если на вашем сайте WordPress все еще нет иконки, тогда самое время добавить ее. Однако перед добавлением, ее необходимо сделать. Для начала мы рассмотрим универсальные способы создания favicon, ну а чуть ниже вы узнаете, как добавить favicon на сайт WordPress (в WordPress сделать это вообще крайне просто).
Для создания favicon можно использовать любую подходящую программу. Однако можно поступить гораздо проще — воспользоваться онлайн сервисами для создания favicon. Таких сервисов не меньше, чем программ, и работа с ними проста и понятна. По запросу «favicon online» Гугл или Яндекс подскажут вам множество вариантов, на любой вкус.
Как неплохой вариант, можете попробовать сервис http://favicon.ru/. Здесь вы можете как создать иконку из имеющегося изображения, так и нарисовать ее сами с чистого листа. Кроме того, на этом же сервисе вы можете заказать услугу создания иконки. Вариантов, как видите много. Кстати, вы можете задать вполне логичный вопрос — А что, я не могу сделать иконку в редакторе Photoshop? А вот здесь не все так просто. Проблема в том, что для иконки favicon предъявляется ряд требований.
Начнем с расширения favicon. Традиционно это должен быть файл с расширением ico. Почему традиционно спросите вы? Да потому что прочие расширения для favicon могут быть некроссбраузерными. Например, браузер Internet Explorer до 11-ой версии не поддерживает никаких других форматов для favicon, кроме формата ico. Ну а Photoshop из коробки просто не поддерживает работу с файлами ico.
Что касается прочих форматов, то лучше всего в этом плане работает Firefox, он распознает все популярные форматы изображений (png, gif, jpg и пр.). К слову, поддержка формата gif означает, что мы можем создать для сайта анимированный favicon. Не уверен, что это хорошая идея, но на некоторых сайтах я встречал и такой favicon. Вот только увидеть анимацию можно не во всех браузерах (опять таки, проблема кроссбраузерности). Chrome, к примеру, не поддерживает анимацию иконки favicon, он просто покажет первый кадр анимации, т.е. на вкладке мы увидим статичную иконку.
Из этого выходит, что если для вас важна кроссбраузерность (в частности, поддержка старых версий IE), тогда для favicon желательно использовать формат ico. Если же поддержка старых версий IE в плане показа иконки не критична, тогда лучше использовать png. На текущий момент все популярные современные браузеры способны отобразить favicon и других форматов. Сам же формат ico на сегодняшний день уже можно считать устаревшим.
Среди других требований можно назвать размеры favicon. Это будут традиционные 16х16 пикселей. Однако они также уже несколько устарели. По той простой причине, что сайт могут просматривать на десятках различных платформ и устройств. Именно поэтому можно сделать иконки различных размеров и подключать ту или иную в зависимости от устройства (различные варианты в документации). Зачастую будет достаточно одной иконки 16х16. Если вам необходимо учесть все возможные устройства, тогда можете попробовать сервис Real Favicon Generator . Загружаете картинку — на выходите получаете целый пак иконок различных размеров и код для их подключения.
КАК ПОДКЛЮЧИТЬ FAVICON
Раньше здесь было все просто. Вы могли создать иконку favicon.ico и просто положить ее в корень сайта. Этого уже было достаточно, чтобы favicon отобразился во вкладке, т.е. в HTML не нужно было писать ни строчки кода. Все потому, что браузеры по умолчанию ищут этот самый favicon.ico в корневой директории сайта.
Также можно было прописать код подключения favicon в коде HTML следующей строкой:
< link rel = "shortcut icon" href = "/favicon.ico" type = "image/x-icon" > |
Как вы понимаете, в атрибуте href указывается путь к иконке, которая в нашем случае помещена в корень сайта. Соответственно, ее можно положить не обязательно корневую директорию, можно в любую папку, прописав корректный путь.
Так было раньше. Но сейчас все не намного сложнее. С появлением в HTML5 атрибута sizes мы можем указать несколько вариантов для подключения той или иной иконки. Выше я писал, что сервис Real Favicon Generator сгенерировал мне целый пак изображений и выдал примерно такой код для подключения favicon на сайт:
Как видим из кода, здесь используются различные варианты и размеры favicon. Код объемен, но благодаря замечательному сервису нам не нужно писать его вручную. Вообще же, для большинства сайтов будет вполне достаточно единственной иконки и строки кода, подключающей ее (можно и без атрибута sizes):
< link rel = "icon" type = "image/png" href = "/favicon-32x32.png" sizes = "32x32" > |
FAVICON НА САЙТ WORDPRESS
В заключение хотел бы показать вам, как добавить favicon на сайт WordPress. Как я уже отмечал, сделать это предельно просто. В фотошопе я нарисовал простенькую картинку с литерой S (будем считать ее логотипом сайта) и сохранил ее в формате png.
В открывшемся меню нажимаем кнопку Выберите файл, чтобы загрузить файл или выбрать его из библиотеки файлов вашего сайта. Обратите внимание, что WordPress рекомендует использовать картинку квадратных пропорций с размером стороны не менее 512 пикселей. Выбираем или загружаем картинку — остальное WordPress сделает за нас.
