Favicon — это маленькое изображение, которое находится возле названия страницы сайта в браузере. Такой значок помогает посетителям идентифицировать ваш сайт среди других, и сегодня мы расскажем, как быстро установить его на свой WordPress-сайт.

Зачем вообще нужен favicon? Ведя поиск в интернете, часто пользователи открывают множество вкладок в браузере. С большим количеством вкладок названия страниц сайтов будут спрятаны. Если вы установите favicon, то пользователь сможет отыскать ваш сайт без необходимости проверять каждую открытую вкладку. Это улучшает удобство работы с сайтами и поможет узнаваемым среди пользователей.

Как создать favicon

Лучше всего в качестве фавикона использовать логотип вашего сайта или бренда. Обратите внимание, что фавикон отображается маленьким значком, поэтому не стоит использовать в нем очень мелкие графические элементы, иначе он будет непонятен пользователям.

Как установить favicon на WordPress

Установка favicon на WordPress может осуществляться несколькими методами. Рассмотрим каждый из них.

Метод 1. С помощью панели управления WordPress

Если у вас версия Wordpress 4.3 и выше, вы можете добавить favicon непосредственно в администраторской панели управления: выполните вход в панель управления WordPress и перейдите в меню Внешний вид >> Настроить .

Вы попадете в меню Настройки текущей темы вашего сайта. Теперь перейдите в меню Свойства сайта .

Нажмите на Выбрать Изображение и загрузите изображение, которое хотите использовать для favicon.

Если изображение не подходит по размеру, то вы сможете обрезать его непосредственно после выбора картинки, а также посмотреть, как favicon будет выглядеть в браузере.

После этого не забудьте нажать на кнопку Сохранить и опубликовать .

Теперь вы можете открыть ваш сайт и увидеть добавленный favicon.

Метод 2. С помощью плагина All In One Favicon

Для начала нужно установить сам плагин. Перейдите в меню Плагины >> Добавить Новый и установите All In One Favicon.

После установки плагина, перейдите в меню Настройки >> All in one Favicon .

Загрузите изображение в строках ICO Frontend и ICO Backend, а затем сохраните настройки.

Теперь обновите страницу вашего сайта и вы увидите добавленный favicon.

Метод 3. С помощью изменения header.php файла

Выполните вход в контрольную панель вашего хостинга. Рассмотрим этот пример на .

Перейдите в меню cPanel >> Диспетчер файлов .

Найдите корневую директорию сайта и загрузите favicon с вашего локального компьютера. Убедитесь, что загружаемый файл называется favicon.ico.

После этого favicon должен отобразиться автоматически.

Однако в некоторых случаях вам необходимо будет внести ручные изменения. Всё зависит от особенностей вашей .

Важно: перед тем, как вносить какие-либо изменения, убедитесь, что у вас есть резервная копия темы.

Перейдите в меню Внешний вид >> Редактор .

Выберите для редактирования Заголовок Темы (файл header.php) .

Отредактируйте или добавьте следующие строки в код, как это показано на скриншоте:

Не забудьте поменять “yourdomain.com” на ваш домен.

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

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

То есть, это элемент вашего сайта, который играет в пользу его узнаваемости. Когда в браузере открыто множество вкладок, фавикон помогает отличить один сайт от другого. А когда ваш сайт видя в поисковой выдаче, его сразу узнают.

Как вставить фавикон в WordPress

Для того чтобы вставить фавикон в WordPress, найдите или сделайте его, и загрузите на свой сайт в корневую папку. После этого поместите в файл активированного шаблона после тега один из следующих кодов:

#для иконки в форме.ico: #для иконки в форме.png: #для иконки в форме.gif:

где httр://examnple.com/favicon.ico – это путь к файла иконки с расширением.

После этого можно проверить, как отображается это изображение.

Если иконки в WordPress не видно после установки кода, то очистите кеш вашего браузера и повторите попытку.

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

Требования для фавикон

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

• Размер фавикон должен быть 16х16 или 32х32 пикселей. Делать больше не рекомендуется и смысла мало, в браузере картинка всё равно будет маленькой. Слишком большая картинка может отображаться не везде.
• Формат изображения должен быть.ico, .png или.gif. Рекомендуется.ico.
• Частенько можно видеть сайты с анимированными иконками. Выглядит красиво, но смысла мало. Тем более что сегодня такие иконки отображаются корректно только в FireFox.
• Не нужно делать какую-то сложную картинку в фавикон. Помните, что она будет очень мелкой. В таком размере хорошо будет смотреться какой-то логотип или буква.

Как сделать фавикон

Для того чтобы сделать фавикон в WordPress, можно воспользоваться тремя способами.

Favicon для сайта WordPress можно установить разными способами. Я уже рассказывал, как при помощи плагинов и установить специальные коды в шаблон сайта. В этой статье я опишу еще один способ установки favicon для сайта WordPress. Установим специальный код в файл functions.php шаблона.

Вступление

Favicon для сайта WordPress (favorites icon) или иконка сайта, придает сайту индивидуальность и, через узнаваемость закладок, может влиять на его посещаемость. Однако, неудачно установленный favicon может увеличивать время загрузки сайта. В этой статье рассмотрим установку иконки сайта через файл functions.php.

favicon для сайта WordPress: этапы установки

Одним из вариантов установки иконки является размещение иконки в корневом каталоге, с добавлением кода в файл functions.php . Для этого способа установки favicon на сайт нужно сделать три шага.

• Сделать картинку favicon.ico на любом генераторе favicon;
• Загрузить картинку favicon.ico в корневой каталог сайта;
• Поместить код в файле functions.php.

Остановимся на каждом шаге подробнее.

Сделать картинку favicon.ico на любом генераторе favicon

В статье я подробно рассказывал, как сделать картинку favicon.ico. В этом нет ничего сложного. Делается она на любом генераторе иконок, в режиме on-line. Не требуется устанавливать на компьютер дополнительных программ. Делается картинка в формате .ico из картинки любого размера и любого формата.

Если вы хотите сами нарисовать свою иконку, можно воспользоваться расширенным online сервисом для изготовления иконок favicon.cc . На нем можно не только сделать иконку из заранее подготовленной фотографии, но и попробовать себя в точечном рисовании.

Еще один расширенный инструмент для создания иконок это favicon.ru .На нем можно не только рисовать, но и заказать изготовление уникального favicon.

Мало? Держите список сервисов для создания иконок:

Iconfinder.com
freepik.com/free-icons
fian.my.id
ru.iconka.com
genericons.com
materialdesignicons.com
flaticons.net
iconbird.com
iconizer.net
webhostinghub.com
iconspedia.com
iconsearch.ru
icons8.com
glyphicons.com
findicons.com
icomoon.io
iconarchive.com
themify.me
fontawesome.io
thenounproject.com
flaticon.com
fontello.com

Загрузить картинку favicon.ico в корневой каталог сайта

Сделанный Favicon для сайта WordPress, при помощи FTP соединения, закачиваем в корневой каталог вашего сайта, скорее всего в папку или .

Проверьте, чтобы в этой папке не было старых иконок. Если они есть, удалите их. Жалко удалять, переименуйте. Также проверьте папку с рабочим шаблоном. Из нее также удалите файл ico если есть.

Разместить код в файле functions.php

Остается поместить код в шаблоне сайта. Для этого авторизуемся в административной панели. В консоли открываем: Внешний вид →Редактор.

В редакторе справа из списка файлов шаблона доступных для редактирования, ищем файл . Открываем его для редактирования. Не забывайте, перед редактированием сделать резервную копию сайта. Также, без опыта, редактируйте файлы на из консоли, а в любом текстовом редакторе, например, Notepad++.

В любое место раздела THEME SETUP вставляем следующий код

// add a favicon to your function my_favicon() { echo ""; } add_action("wp_head", "my_favicon");

Не забываем сохраняться.

После перегрузки страницы сайта иконка появляется рядом с вашим сайтом. Если вы удалили все «чужие» иконки из каталога сайта, включая каталоги тем, а ваша иконка все равно не появляется, очистите кэш вашего браузера.

На этом все! Тему Favicon для сайта WordPress закрываю. На сайте получились три статьи, где я рассказывал о трех вариантах установки уникальной иконки на свой сайт WP. Читать другие статьи.

Иконка для сайта сама по себе с первого взгляда кажется незаметной мелочью, которую можно проигнорировать. Но это не так! Многие современные и очень успешные ресурсы узнаются людьми за счет картинки favicon, которая отображается в поисковой выдаче Яндекса.

Что же такое favicon?

Favicon – это картинка размером 16х16 пикселей, которая имеет расширения «.ico».

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

Узнаваемость – это основной принцип действия иконки сайта.

Методы создания favicon для движка WordPress

Сейчас мы с вами рассмотрим основные сервисы, которые можно использовать для того чтобы сделать иконку для сайта. Во-первых, можно классифицировать их на две группы: онлайн сервисы и десктопные программы.

Онлайн сервисы

Существует огромное количество таких онлайн сервисов, но все они имеют разный функционал. Наиболее популярным сервисом в рунете является – favicon.ru.

Давайте рассмотрим, какой функционал он предоставляет. В первую очередь – это генерация иконки из готового изображения, например, из логотипа вашего сайта. При этом присутсвует функция корректировки готово файла, что не может не радовать.

Также, вы можете самостоятельно нарисовать favicon для своего сайта.

Как видно из картинки, вы можете выбрать цвет, делать заливку, стирать ненужные пиксели, двигать ваш рисунок и при этом всем, сразу же наблюдать ваш favicon в действии в поле «Предпросмотр».

Очень удобный сервис.

Еще можно вделить:

www.favicon.cc – этот сервис является копией предыдущего, или предыдущей этого, я уже не вникал в подробности. Они даже внешне похожи.

www.degraeve.com – вот вам еще один, довольно многофункциональный онлайн сервис для генерации иконок для сайтов, но только зарубежный. Разобраться в нем думаю, будет не сложно, там все понятно чисто на интуитивном уровне.

Десктопные сервисы

Из десктопных сервисов, которые перегоняют картинки в формат «.ico» и делают размер иконки 16х16 пикселей можно выделить: IcoFX, Photoshop.

Но, честно говоря, работать с онлайн сервисами намного проще.

Я не хочу заморачиватся с созданием favicon для своего блога на WordPress, что мне тогда делать?

Специально для вас, никто не отменял галереи favicon’ов. Вы запросто можете скачать картинки на любой вкус абсолютно бесплатно. Где же это можно сделать?

Favicon.cc - эта галерея насчитывает просто огромное количество фавиконов на любой вкус и разные тематики. В наличии имеются и анимированные иконки.

audit4web - галерея сбольшим количеством иконок для сайта, включает в себя более 15000 изображений.

С тем, где взять фавикон мы разобрались. Теперь давайте рассмотрим, как установить favicon на WordPress .

Для начала вам нужно заказать готовое изображение в папку вашего шаблона, он находится по адресу — /wp-content/themes/имя вашей темы .

После чего нужно вставить одну строчку кода между тегами .

/favicon.ico"/>

Для этого переходим в раздел «Внешний вид» — «Редактор» , ищем, справа шаблон (header.php), у всех он может называться по-разному, и нажимаем на него.

От автора: приветствую, вас, уважаемые читатели. В статье вы найдете информацию о том, как добавить 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 сделает за нас.