Загрузка и установка favicon на WordPress
Грамотная оптимизация сайтов состоит из множества разных действий. Чтобы ресурс был идеальным, необходимо настроить каждый параметр и учесть все мелочи.
Казалось бы, какая разница, какая иконка расположена во вкладке с сайтом? Но это очень важно, ведь логотип часто является брендом и запоминается.
Как установить 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. Установим специальный код в файл 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. Читать другие статьи.
Как установить фавикон. Вы, наверное, обратили внимание на то, что на многих сайтах во вкладках установлена маленькая иконка? Она называется – фавикон (от англ. FAVorites ICON – «иконка для избранного»). Фавикон это индивидуальный значок веб-сайта. Он отображается браузером на вкладках и перед URL страницы. Очень симпатично, и если этот значок подобран в тему, то по этой иконке можно сразу определить, о чем сайт. Но главное, что поисковики любят, когда установлен такой значок. А раз так, то значит, его обязательно необходимо установить.
Сначала фавикон необходимо создать. Для этого заходим на сайт по изготовлению фавиконов. Сайт больше не работает. Но в интернете есть много других похожих сервисов.
- Выбираем Сделать favicon из изображения и нажимаем кнопку Выберите файл ;
- Выбираем графический файл на своем компьютере и жмем кнопку Открыть ;
- Если необходимо, редактируем картинку и жмем кнопку Далее ;
- Можно сделать фон фавикону;
- После всех необходимых манипуляций опять жмем кнопку СКАЧАТЬ FAVICON ;
- На следующей странице опять жмем кнопку СКАЧАТЬ ;
Теперь необходимо загрузить фавикон в корневую папку вашего сайта. Для этого заходите по паролю на свой хостинг, находите там в панели управления Файловый менеджер, и открываете папку с названием вашего сайта.
Вот наш загруженный файл.
Его можно закинуть в любую папку вашего сайта, но тогда необходимо будет правильно прописать путь к нему в коде, который мы пропишем для поисковиков.
Теперь идем в свою админку на WordPress, выбираем — Внешний вид – Редактор – файл Заголовок (header. php) , и вставляем код
перед тегом head> . Замените адрес http://chudokompik.ru на свой.
Этот код нужен для поисковых роботов, а иконка у вас будет отображаться и без него.
Не забудьте после всех этих действий обновить свою страницу в браузере.
Вот мы и установили фавикон на свои страницы.
Посмотрите видео о том, как установить фавикон на сайт:
Если вам нужен надежный хостинг для своего сайта, то переходите по ссылке ниже.
Favicon.ico – это небольшая картинка (иконка) в специальном формате, которая отображается рядом с адресом вашего сайта в адресной строке браузера и рядом с названием вашего сайта в «Избранном» или в «Закладках» вместо стандартной, общей для всех иконки. Эта маленькая картинка привлекает к себе внимание и кратко отражает суть вашего сайта. Формат ICO подразумевает наличие в файле нескольких картинок разных размеров и разного качества. Основной формат картинки для favicon.ico – 16х16 пикселей, 256 цветов или TrueColor. Именно эта картинка будет показываться в адресной строке браузера, на таб-баре и в «Избранном» (Закладках).
Далее я приведу перевод с некоторой адаптацией небольшой инструкции из кодекса WordPress , которая пошагово разъясняет, как создать иконку, используя абсолютно любую картинку, и как модифицировать шаблон WordPress для ее дальнейшего использования.
Создаем иконку
1. Подберите изображение, которое должно представлять ваш сайт. Сейчас не важен размер и формат картинки (если конечно она не больше 2 Мб, в этом случае ее надо бы немного уменьшить).
2. Теперь можно воспользоваться генератором иконок, например, www.favicon.co.uk или http://favicon.ru/ 3. Загрузите изображение на сайт и выберите будущий размер иконки.
4. После того, как картинка сгенерирована, вы увидите пример того, как она будет выглядеть, а также ссылку на загрузку иконки. Сохраните файл на компьютер, и убедитесь, что он называется favicon.ico.
5. Теперь переходим к установке иконки на сайт.
Установка иконки в WordPress
1. Быть может в папке с вашим шаблоном уже есть старая иконка, ее необходимо удалить.
2. Загрузите новый файл favicon.ico в папку вашей темы.
3. Скопируйте favicon.ico также в корень сайта (например, http://example.com/favicon.ico). Это позволит отображать иконку в RSS.
4. Чтобы иконка отображалась в некоторых старых версиях браузеров, вам необходимо отредактировать файл шаблона header.php.
5. Откройте header.php и найдите код, который начинается с . Замените его кодом, приведенным ниже. Если вы не можете найти ничего похожего, просто вставьте следующий код где-то между тегами
/favicon.ico» />
6. Сохраните изменения.
7. Если вы используете кэш для WordPress, очистите его, затем очистите кэш вашего браузера. Теперь икока должна отображаться в адресной строке после загрузки вашего сайта. Примечание. Некоторые браузеры с трудом воспринимают новые иконки. Вы можете попробовать добавить страницу в избранное, и через ссылку с избранного открыть страницу снова, если и это не помогает, очистите кэш еще раз и перезагрузите компьютер.
Кстати, сервис www.favicon.co.uk довольно неплох, единственный его недостаток в том, что иконки генерируются только со второго раза (из личных наблюдений).
Можно также воспользоваться таким вариантом. Положите иконку в основную (корневую) - предпочтительнее - или в любую другую папку вашего сайта; добавьте следующие строки в каждую страницу вашего сайта внутрь секции
(не обязательно):
Что ж, думаю, инструкция очень детально и доступно все разъясняет, и будет полезна для новичков.
Оцени пост!
От автора:
приветствую, вас, уважаемые читатели. В статье вы найдете информацию о том, как добавить 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 сделает за нас.