Favicon на сайте WordPress


Содержание материала:

Как добавить фавикон на сайт wordpress

Поговорим о favicon иконке и том как прикрутить эту иконку к шаблону wordpress. Favicon — значок веб-сайта или веб-страницы. Этот значок отображается браузером во вкладке перед названием. Он отображается как минимум в 2 местах: во вкладке окна браузера, в поисковой выдаче google и yandex. Каждый сайт должен иметь свой фавикон. При поисковой выдаче перед текстом стоит фавикон иконка. Это очень важно для раскрутки сайта.

Как создать favicon. Тут масса способов и сервисов. Вы можете в любой графической программе нарисовать иконку. Тут надо учесть что размер будет иметь форму квадрата. Прямоугольник не получится сделать. Если вы сделаете логотип в форме прямоугольника, то он всё равно впишется в форму квадрата. Я всегда делал логотип в виде 32 х 32 px в png формате и конвертировал png в .ico на сайтах сервисах. Это достаточно простой способ. Вам нужно просто подготовить картинку, потом загрузить её на сайте. Сайт обработает картинку и выдаст вам favicon в нужном формате .ico.

Вот небольшой сервисов для конвертации картинок в ico.

  • favicon.cc. Здесь вы можете нарисовать вручную ваш favicon
  • pr-cy.ru/favicon. Тут вам нужно подготовить картинку и загрузить на сайт. Произойдёт конвертация картинки в .ico

Раньше я думал что размер иконки должен быть либо 16 х 16 px либо 32 х 32 px. Сейчас браузеры поддерживают разные размеры иконок. Даже 48 х 48 px. Посмотрите на блок ниже. Браузер сам выберет нужный ему формат иконки. Это не обязательно должен быть формат .ico. Можете использовать png с прозрачностью.

А теперь поговорим о способах встраивания иконки на сайт вордпрес. Более подробнее написано на странице добавить фавикон на сайт. Тут есть три способа:

Установка при помощи плагина

Установка при помощи плагина. Тут вам нужно установить специальный плагин All in One Favicon. Затем перейдите в настройки плагина и просто подгружаете понравившуюся вам картинку

Ручная установка

Загрузите вашу иконку в корень сайта. Вы можете сделать эту операцию вручную или через FTP соединение. Для FTP-соединения подойдёт программа FileZila. Перейдите в админке в раздел «Внешний вид» –> «Редактор». Найдите там файл header.php. Пропишите следующий код в этом файле.

Установка через тему WordPress

Найдите в вашей теме оформления специальный раздел отвечающий за настройки внешнего вида. Там возможно будет возможность напрямую подгрузить картинку на сайт. Если нет возможности подгрузки картинки, то есть ещё один способ. Загрузите скачанный фавикон в корень сайта и в настройках внешнего вида в разделе дополнительные коды в «header» прописываете фавикон:

Как добавить favicon в админку WordPress

Favicon (favorite icon) — добавляет уникальности и узнаваемости вашему сайту, эта пиктограмма видна в адресной строке вашего браузера, во кладке перед названием сайта, в избранном и в других элементах интерфейса. Её ставят на сайте, но почти никогда не ставят в админке.

Чтобы добавить пиктограмму вашего сайта на страницу авторизации и все страницы админки, достаточно такого небольшого сниппета в functions.php активной темы:

Если же хочется выводить пиктограмму, загруженную через кастомайзер (Внешний вид > Настроить > Свойства сайта), то код следует дописать:

Как быстро правильно создать и добавить фавикон на сайт WordPress

Здравствуйте, уважаемые читатели моего блога Start-Luck. Посетите всегда воспринимают визуальную информацию лучше. Если они во второй раз увидят картинку, то будут больше импонировать сайту. Вот почему сегодняшняя статья крайне полезна для молодых разработчиков.

В этой статье я в двух словах расскажу как создать для сайта на wordpress favicon, более подробное внимание этой теме я уделил в предыдущей своей публикации, а также объясню как установить его на сайт. Будет интересно, увлекательно и просто.

Создание и поиск картинки

Я уже подготовил три картинки для своего тестового сайта при помощи сервиса icoconverter.com . Здесь вы можете создать фавикон разного диаметра от 16 до 256 пикселей менее насыщенный (8 бит) или поярче 256, как сделал я.

Для иконки вам понадобится формат ICO. Его чаще всего используют, хотя некоторые способы предполагают PNG и даже JPG. Чуть позже вы увидите, что для одного из методов ico не подойдет. Не буду сейчас вдаваться в подробности.

Помимо сайта, через который я создавал фавикон, могу оставить еще одну ссылку iconsearch.ru , где можно найти уже готовые иконки в меню, закладку и многое другое. Большинство из них подходит для коммерческого использования. Можете не бояться за нарушение авторских прав.

Нарисовать свою иконку с нуля и в восьмибитном формате можно на сайте favicon.ru .

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

Установка

Существует три метода установки иконки на сайт – при помощи стандартного меню вордпресс, плагина для этой же CMS и кода. Третий метод подойдет вне зависимости от того, какой движок вы используете.

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

Стандартное меню

Нет ничего проще, чем установить иконку. Для начала Зайдите во «Внешний вид», а затем нажмите «Настроить». Кнопку можно найти двумя способами. Не важно какому вы отдадите предпочтение.

Далее переходим в раздел «Свойства сайта».

Открылся визуальный редактор, если его можно так назвать. Видите, в самом низу «Выбрать изображение» — нажмите на него.

Стандартное окно библиотеки медиа. Вам нужна вкладка «Загрузить файлы». Затем перетащите рисунок. Скажу сразу, ico не подойдет.

Видите, вордпресс не понимает что это такое, миниатюра не отображается.

Даже если вы, невзирая ни на что, щелкните «Обрезать» — панель управления выдаст ошибку.

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

Смотрите, сейчас я использовал PNG, размером 512х512, как рекомендует система.

В одно мгновение иконка загрузилась на сайт.

Можно использовать и jpeg большего формата. Просто выберите рисунок, посмотрите как это будет выглядеть в браузере, а затем нажмите «Обрезать».

Не забудьте сохранить изменения и опубликовать.

Если вы пользуетесь шаблоном, то разработчик должен был побеспокоиться о том, как вы будете вставлять фавикон. Убежден, что найти нужный раздел не составит большого труда. К примеру, можете посмотреть на скриншоте внизу совсем другая тема, но путь тот же «Тема» — «Настроить» и категория соответствующая имеется.

Плагин

Могу предложить вам плагин Insert Headers and Footers для решения той же задачи. Согласитесь, предыдущий вариант был не так уж сложен. Тот метод, о котором я сейчас буду рассказывать в разы труднее. И тем не менее давайте познакомимся со всеми вариантами.

Итак, для начала находим и устанавливаем плагин. Переходим в соответствующий раздел, выбираем «Добавить новый», скачиваем первое приложение. Не забудьте активировать.

В категории «Настройки» появилась новая функция, но для начала вам нужно зайти на хостинг и внести в корневую папку кое-какие изменения. Недавно я рассказывал о программе FileZilla. Она легкая, удобная, простая и бесплатная. Позволяет быстренько попадать в личный кабинет хостинга по FTP. Можно действовать через нее, или, воспользоваться стандартным методом.

Итак, я захожу в личный кабинет хостинга TimeWeb , именно на нем размещены практически все мои сайты. Он очень удобен для новичка, но, думаю, что у вас уже скорее всего есть хостинг, который вас устраивает. Итак, открывают «Файловый менеджер», затем папку сайта и public_html.

Загружаю картинку. Будьте внимательны. Она должна быть не больше 12х12 пикселей, возможно придется подрезать в фотошопе. Там же можно поменять формат на ico, но можно использовать и PNG. Название должно быть обязательно именно favicon. Иначе возникнут трудности, код, который я для вас подготовил, не подойдет.

Возвращаемся в админку сайта и открываем плагин. Вводим в верхнее поле следующий код. Замените «адрес-вашего-сайта» на что вы думаете? Правильно, на адрес вашего сайта.

Если используете в качестве иконки картинку в форме PNG, то код будет несколько отличаться.

Подключение favicon к сайту

Я подключаю favicon не зависимо, будь то статический HTML сайт или CMS напрямую, между тегами head , не мудрствуя лукаво.

На данный момент на WordPress фавикон подключается из админпанели сайта. Раздел Настроить > Свойства сайта > Иконка сайта . Там сказано, что значки сайта должны быть квадратными и как минимум размером в 512 × 512 пикселей, это сделано для того, чтобы фавикон генерировался для всех устройств.

Генератор кода фавиконов для всех устройств

Если нужно создать фавикон для HTML страницы, то вот отличный генератор фавиконов для всех устройств. Генератор не создает иконки сайта, а генерирует код и сами иконки из исходника. Код, полученный на сервисе нужно подключить в head страницы. А иконки положить в корневой каталог сайта.

Просто загрузите картинку, размером не менее 260px (иначе сервис выдаст ошибку). И следуйте дальнейшим инструкциям. Сервис выдаст вам нужный код и архив с фавиконами, который нужно будет закинуть в корневую папку сайта.

Подключение favicon в формате ICO

Фавикон не обязательно должен быть в формате ico. Допускаются форматы изображения в PNG и GIF

Подключение favicon в формате PNG или GIF

При этом необходимо сменить значение атрибута type на image/gif или image/png , в зависимости от типа изображения.

Как Добавить Фавикон В WordPress

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

Эта маленькая деталь имеет важное значение для вашей личности в интернете. Мы обсудим значок WordPress Favicon и расскажем, как добавить фавикон в WordPress.

Почему важно добавить Favicon на ваш сайт

Favicon WordPress — это в основном идентификатор вашего сайта; поэтому там должен быть ваш собственный логотип. Игнорирование его присутствия на вашем сайте — действительно грубая ошибка.

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

Вот несколько причин, почему Favicon WordPress жизненно важен для вашего сайта.

Выделяется как узнаваемость бренда

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

Построить доверие

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

Улучшить мобильный опыт

Это эра мобильного опыта. Наличие адаптивного веб-сайта может оказаться недостаточным для того, чтобы порадовать мобильных пользователей, в основном потому, что сейчас растёт число веб-приложений.
Пользователи могут просто сделать закладку веб-сайта на главном экране своего телефона. Больше не нужно набирать URL!
В этой ситуации хорошо сделанный фавикон будет служить вам двумя различными способами. Во-первых, значок будет использоваться как значок приложения, а во-вторых — люди, использующие ваше веб-приложение, запомнят ваш значок. Поэтому ваш значок будет связан с вашим сайтом.

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

Обычно ваш значок — это логотип вашего бренда. Для изображения WordPress рекомендует использовать квадрат размером 512 х 512 пикселей.

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

Чтобы создать изображение размером 512 x 512 пикселей, вы можете использовать любое программное обеспечение для редактирования изображений, такое как Adobe Photoshop (платное) и Gimp (бесплатное) или онлайн фавикон генератор.

Вы можете выбрать цвет фона для вашего значка WordPress, но лучше использывать прозрачный фон. Вы можете использовать форматы файлов .jpeg, .ico, .gif или .png (убедитесь, что вы используете формат .png, если используете прозрачный фон).

После того как изображение будет готово, вы можете добавить его на свой сайт WordPress одним из следующих трёх способов:

1. Добавление WordPress Favicon через настройщик WordPress

Начиная с версии WordPress 4.3, вы можете просто добавить значок WordPress из вашей админки. Чтобы сделать это, выполните следующие действия:

  1. Перейдите к вашей Консоли
  2. Наведите курсор мыши на Внешний вид -> Настроить
  3. Выберите Свойства сайта
  4. Нажмите кнопку Изменить изображение в разделе Значок сайта
  5. Загрузите ваш фавикон, который был заранее подготовлен
  6. Нажмите кнопку Опубликовать, чтобы сохранить изменения.

Если вы сделали всё правильно, ваш значок появится рядом с названием вашего сайта. Чтобы настроить на мобильном устройстве, перейдите на свой веб-сайт со своего телефона и выберите Добавить на главный экран.

Ваш значок теперь появится на главном экране.

2. Добавление WordPress Favicon на сайт с помощью плагина

Вы также можете добавить значок в WordPress с помощью плагина Favicon от RealFaviconGenerator. Он прост в использовании и предлагает больше функциональности. Это необходимые шаги:

  1. Перейдите к вашей Консоли
  2. Выберите Плагин -> Добавить новый
  3. Введите Favicon от RealFaviconGenerator в поле поиска
  4. Установите и активируйте плагин
  5. После активации зайдите во Внешний вид -> Фавикон
  6. Загрузите изображение, которое вы хотите установить в качестве избранного. Вам не нужно подгонять изображение с помощью программного обеспечения для редактирования изображений. Плагин сделает это за вас. Просто убедитесь, что ваше изображение размером не менее 70 х 70 пикселей. Еще лучше, если оно больше 260 х 260 пикселей.
  7. Как только вы загрузите изображение, нажмите кнопку Создать Favicon.
  8. После того, как вы нажмёте кнопку, плагин перенесёт вас на сайт RealFaviconGenerator.
  9. На веб-сайте найдите и нажмите кнопку Создать код Favicon и HTML.
  10. Плагин вернёт вас на ваш сайт. Вы получите уведомление о том, что ваш favicon настроен.
  11. Проверьте, как выглядит значок в вашем браузере и на мобильном устройстве.

3. Как добавить фавикон в WordPress на сайт вручную

Мы рекомендуем вам сначала проверить это на своём локальном сайте разработки, прежде чем он будет запущен.

  1. Доступ к файлам вашей темы через FTP-клиент или файловый менеджер
  2. Найдите папку /wp-content/themes/your-theme
  3. Загрузите ваш значок в папку с темой. Рекомендуется загрузить его в подпапку, например, Assets
  4. Запомните этот путь к файлу
  5. Найдите файл с именем function.php и добавьте следующий код
  1. function add_favicon ( ) <
  2. echo ‘
  3. . get_template_directory_uri ( ) . ‘/assets/favicon.png” />’ ;
  4. >
  5. add_action ( ‘wp_head’ , ‘add_favicon’ ) ;
  • Строка после href=”‘.get_template_directory_uri() должна указывать путь к вашему значку. Убедитесь, что вы указали правильное имя файла. Если вы используете формат файла .ico, то это будет один:
  1. function add_favicon ( ) <
  2. echo ‘
  3. . get_template_directory_uri ( ) . ‘/assets/favicon.ico” />’ ;
  4. >
  5. add_action ( ‘wp_head’ , ‘add_favicon’ ) ;

Заключение

Фавикон для сайта нужен обязательно! Особенно, когда его так просто создать и добавить в WordPress.

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

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

Здравствуйте, дорогие друзья!
Сегодня расскажу, как установить favicon на сайт, а так же как его создать. Если вы заметили, у моего блога теперь новый фавикон. Пора и вам этому научиться. Из данной статьи вы узнаете, как сделать иконку с помощью favicon online generator или нарисовать самостоятельно, какого она должна быть размера и почему она так необходима каждому сайту. Если на вашем WordPress блоге до сих пор не установлен фавикон, сделаете это прямо сейчас.

Что такое favicon иконка

Вы еще не знаете, что такое favicon и зачем он нужен?

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

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

Зачем нужен favicon.ico для сайта

Нужен он обязательно — это лицо вашего сайта. Он повышает CTR и помогает вашему сайту выделиться из общей массы, поэтому должен быть ярким и запоминающимся!

  • Пользователи, просматривая выдачу ПС, чаще кликают на сайты с привлекающим внимание фавиконом. Как видно из предыдущего скриншота, третий сайт без фавикона выглядит безликим и не привлекает внимания.
  • Пользователи, которые уже переходили на ваш блог через поисковые системы, запоминают вашу иконку. И в следующий раз, увидя ее в выдаче, обязательно кликнут по ссылке рядом.

Как сделать favicon и где его взять:

  • Нарисовать фавикон можно самостоятельно, если вы обладаете художественными навыками.
  • Или подобрать готовую картинку и конвертировать ее в файл favicon.ico для сайта.
  • Можно найти готовый фавикон в формате .ico.

Размеры favicon для WordPress

Favicon имеет стандартный размер 16×16 пикселей. Конечно же, это и для Worpdpress и для чёрта в ступе. Но можно сделать и больше, например, 24×24, 32×32, 48×48 или 64×64 пикселей. В этом случае иконка просто сожмется до стандартного размера. При этом, если кто-то захочет ее сохранить себе на компьютер, она опять станет большого размера и будет хорошо смотреться в виде ярлыка на рабочем столе:)

Favicon как сделать самостоятельно

Нарисовать иконку вы можете в привычном для вас графическом редакторе (Paint, Photosh0p), как обычную картинку. А затем преобразовать эту картинку в файл .ico с помощью онлайн генератора. Это не совсем удобно, т.к. в обычном редакторе вы не чувствуете масштаба и при конвертировании может пострадать качество.

Другой вариант того, как сделать favicon — нарисовать, используя онлайн сервис.

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

Favicon online generator

Для того, чтобы преобразовать обычную картинку в фавикон, есть различные сервисы.

favicon.co.uk — я всегда пользуюсь только этим сервисом, для меня он наиболее удобен. Не пугайтесь, что он англоязычный, там ничего не нужно читать и настраивать. Просто выберите файл с жесткого диска и кликните «Generate favicon».

favicon-generator.org – еще один аналогичный сервис, favicon online generator. Здесь так же можно преобразовать обычную картинку в файл favicon.ico. А кроме того, есть возможность нарисовать иконку самостоятельно или выбрать уже готовую из галереи.

Не буду учить вас, как искать готовые иконки в интернете. Надеюсь, вы и сами умеете гуглить. Скажу лишь, что есть множество сервисов, предлагающих готовые иконки бесплатно. Если там хорошенько покопаться, то можно найти что-то подходящее. Это может быть полезным, если у вас нет своего логотипа. Давайте переходить к созданию favicon для WordPress.

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

Осталось узнать самое важное, как добавить favicon в WordPress. В большинстве готовых тем он уже установлен. Если у вас он уже есть, то нужно отыскать его в папке активной темы. Скорее всего он лежит в папке с картинками (Img или images). Просто замените там файл favicon.ico на новый.

Теперь рассмотрим ситуацию, когда в вашей теме блога нет фавикона.

  1. Для начала зайдите в корневую папку сайта (у меня это папка “public_html ”) и загрузите туда ваш новый favicon.ico для сайта.
  2. Откройте файл header.php и вставьте туда следующий код сразу после открывающегося тега :

Favicon не отображается в Яндексе

Мои клиенты по сайтам часто задают мне вопрос: «почему favicon не отображается в яндексе? установите его туда!». Мне остается только посмеяться над такой постановкой вопроса и ответить, что на работу Яндекса я повлиять не могу.

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

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

Что такое фавикон? И как добавить Favicon в WordPress

2 min

Фавикон, что означает «любимый значок», также может называться значком сайта. Если вы посмотрите на страницу своего браузера сейчас, скорее всего, будет отображаться количество значков. Тем не менее, вы, возможно, никогда не замечали значимых значков, знайте, что они из себя представляют или что они делают. Итак, что такое favicon и зачем он нужен вашему сайту WordPress?

В этой статье мы собираемся объяснить, что такое favicon и как он может принести пользу вашему бизнесу или блогу. Затем мы рассмотрим, как вы можете быстро и легко добавить его на свой веб-сайт WordPress.

Что такое фавикон?

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

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

Важность использования фавикон

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

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

Как видите, преимущества использования favicon огромны. Итак, давайте теперь выясним, как вы можете создать значок и добавить его на свой сайт WordPress …

Создание Фавикон

Первым шагом в процессе favicon является создание подходящего изображения. Как уже упоминалось, в идеале фавикон должен быть тем же изображением, что и логотип вашего веб-сайта, чтобы посетители могли его сразу узнать.

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

Проектирование или редактирование изображения Favicon

Согласно Кодексу WordPress, изображения фавиконов должны иметь квадратную форму и размер не менее 512 x 512 пикселей. Хотя изображения могут быть обрезаны в WordPress, я бы посоветовал отредактировать ваше изображение заранее, используя программное обеспечение для редактирования.

Если вы хотите создать новое изображение с нуля, или ваш логотип нуждается в серьезных корректировках, то лучше всего использовать профессиональную программу редактирования. Photoshop или GIMP — отличные варианты.

Использование Canva

Тем не менее, для тех, у кого меньше опыта в разработке, более простым решением является использование Canva. Этот бесплатный веб-сайт инструмента графического дизайна позволит вам легко отредактировать изображение и сделать его готовым к использованию. Измените размер своего логотипа или измените цвет или прозрачность, чтобы создать изображение favicon, которое будет работать на вашем сайте.

Если вы довольны изображением, которое собираетесь использовать в качестве значка, его необходимо сохранить в формате gif, png или jpeg. Теперь вы готовы загрузить свой значок на свой веб-сайт WordPress …

Как добавить Favicon на ваш сайт WordPress

Раньше лучше всего добавлять значок сайта веб-разработчикам и тем, у кого есть глубокие знания в области кодирования. Однако, к счастью, после выпуска WordPress 4.3, добавление значка избранного стало чрезвычайно простым и понятным.

Откройте панель управления WordPress и в меню выберите Внешний вид> Настройка, Это откроет живой настройщик WordPress с предварительным просмотром домашней страницы вашего сайта.

Выбрать Идентичность сайта, Здесь вы увидите отображаемое название сайта и значок сайта.

Под Иконка сайта Вы можете добавить, изменить или удалить свой значок. Нажмите на Выберите изображение,

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

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

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

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

Другие способы добавления Favicon на ваш сайт WordPress

Есть, конечно, ряд других способов добавить значок сайта на ваш сайт WordPress. Давайте посмотрим на несколько различных вариантов …

Фавикон от RealFaviconGenerator

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

Установите плагин на свой веб-сайт WordPress, а затем просто укажите и щелкните, чтобы загрузить изображение и добавить его в качестве значка. Затем RealFaviconGenerator сгенерирует все значки, необходимые для различных браузеров и устройств. Это простой плагин, который можно бесплатно загрузить и использовать.

Загрузка через страницу настроек вашей темы

Многие из новых тем имеют множество функций и возможностей, благодаря которым люди могут быстро и легко создавать новые веб-сайты WordPress. Некоторые из этих тем теперь имеют возможность добавить иконку для вас. Проверьте страницу настроек вашей темы, чтобы увидеть, предлагает ли эта функция эту функцию. Например, тема Total WordPress включает опции для вашего Favicon (и устройства разных размеров) во встроенной панели тем.

Использование кода

Если вы предпочитаете кодировать свой веб-сайт, вы можете загрузить свое изображение favicon в корневой каталог вашего сайта. Затем необходимо добавить код в ваш файл header.php. Для получения дополнительной информации об этом процессе, а также сведений о размере изображения и типе файла, в котором вы хотите его сохранить, см. Документацию поддержки WordPress.

Последние мысли

Как видите, загрузка значка сайта на сайт WordPress — очень простой процесс. Преимущества наличия favicon впечатляют, это маркетинговая тактика, которая позволит вашим пользователям идентифицировать ваш сайт, просто заметив ваше изображение. Поэтому уделите первостепенное внимание поиску свободного получаса в вашем дне и настройте свой сайт с помощью значка.

Вы уже запустили свой фавикон? Пожалуйста, поделитесь, как вы попали в комментарии ниже …

Как сделать favicon иконку в фотошопе для сайта без знаний программы

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

Как сделать favicon иконку для сайта

Что такое favicon и для он нужен

Favicon (слово является сокращением от фразы Favorites Icon, что означает «значок избранного».) – это специальная иконка небольшого размера. Пользователи могут наблюдать ее слева от ссылки на сайт в адресной строке браузера или на открытой вкладке, закладке.

Помимо этого, данный значок используется для сохранения ссылки на ресурс на рабочий стол пользователя или другие любые папки операционной системы. Иконка очень маленькая, ее стандартным размером является 16х16 пикселей. Значок необходим для того, чтобы сделать сайт узнаваемым и уникальным. Также он облегчает пользователю поиск информации.

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

Чтобы значок начал отображаться на сайте, необходимо поместить готовую иконку в формате .ico в корневую папку ресурса. Многие браузеры поддерживают иконки в разных форматах, в том числе GIF (даже анимированные значки) и PNG (с прозрачным фоном).

Как создать favicon иконку для сайта

Favicon можно сделать самостоятельно разными способами и при помощи различных ресурсов и программ.

Как создать фавикон в Фотошоп

Сделать favicon иконку в фотошопе достаточно просто. Весь процесс можно разделить на несколько этапов.

Этап 1. Технические требования

Прежде чем приступить к созданию непосредственно иконки для сайта, необходимо позаботиться о технических параметрах. Дело в том, что без специального плагина фотошоп не сможет понимать, а значит и сохранять файлы в расширении Windows Icon (ICO).

Плагин необходимо скачать и распаковать архив, скопировать его содержимое в папку с плагинами фотошопа. Путь к такой папке выглядит следующим образом “ С: \ Program Files \ Adobe \ Adobe Photoshop CS5.1 \ Плагины \ Форматы файлов \ ”.

Этап 2. Размеры

Для начала нужно открыть фотошоп и задать размер поля для нового проекта. Но не следует задавать размеры по иконке (16х16). На таком маленьком холсте не получиться сделать качественное изображение.

Лучше выбрать размеры побольше, а после того, как значок будет готов, его можно сжать до необходимых параметров. Чтобы задать размеры рабочего поля требуется перейти в Файл – Новый. Также это окно можно вызвать сочетанием клавиш Ctrl + N .

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

Этап 3. Создание

Создание иконки — это достаточно простое дело, пользователю необязательно иметь художественные навыки или полностью владеть инструментами фотошопа. Иконка такого типа не должна быть сложной, в ней нужно поместить изюминку сайта, по которой его можно узнать. Фафикон иконки мега популярных ресурсов выглядят односложно.

Например, видео хостинг ютуб имеет фавикон иконку в виде красного квадрата, внутри которого помещен белый треугольник. А у многих социальный сетей фавикон значок – это просто буквы (фейсбук, вконтакте).

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

В таком случае лучше создать рабочее поле в фотошопе размером не менее 64х64 пикселей и в основных цветах сайта передать его главную идею. При создании favicon иконки следует руководствоваться правилом: чем проще – тем лучше.

Когда эскиз будет готов, его следует протестировать, оптимизировать и проверить как он выглядит в стандартном для иконки размере. Для этого необходимо нажать комбинацию клавиш «Alt+Ctrl+I» и задать размер готового изображения.

Рекомендуется также выставить интерполяцию бикубическую. Этот параметр позволит определить поплывет рисунок при уменьшении или нет.

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

Этап 4. Сохранение

После того, как иконка будет полностью готова, ее требуется правильно сохранить. Для этого нужно кликнуть на «Файл» в верхнем левом углу и из выпадающего меню выбрать «Сохранить как». Также это окно можно вызвать сочетанием клавиш « Shift + Ctrl + S ».

В поле «Имя файла» требуется указать «favicon.ico». А в строке «Тип файла» выбрать формат ICO из выпадающего меню. Такой пункт будет доступен только при правильной установке соответствующего плагина.

В случае, если плагин по каким-то причинам не удается установить, можно поступить другим образом. Сохранить готовый значок в формате PNG. После чего зайти на любой сайт онлайн конвектора изображений. И переделать favicon иконку из PNG в .ico.

Онлайн генератор

Есть специальные сервисы, которые автоматизируют создание favicon. Такие онлайн генераторы анализируют логотип сайта, который требуется загрузить на сервис, и выдают различные иконки на его основе.

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

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

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

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

Как правило, это рабочее поле 16х16, поделенное на клеточки. Пользователь сможет самостоятельно сделать простую пиксельную картинку при помощи раскрашивания клеток (пикселей). После чего останется скачать готовый favicon и установить на сайт.

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

Существует несколько способов установить favicon на сайт wordpress. Рассмотрим самые простые методы, которые не требуют много времени на реализацию.

Способ 1. Панель управления

Для вставки потребуется сделать следующее:

Зайти на панель управления. Перейти к «Внешний вид» — «Настроить».

Зайти в меню «Свойства сайта».

Кликнуть на выбор изображения и вставить иконку в размере не менее 512х512.

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

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

Способ 2. Использование специального плагина

Для установки иконки через специальный плагин требуется сделать следующее:

Зайти на главную панель wordpress. Перейти по «Плагины» — «Добавить новый».

В поиске найти « All In One Favicon » и установить его.

После установки плагина нужно перейти к его настройке.

В строках с пометкой ICO вставить изображение иконки и сохранить изменения. Сразу же после этого фавикон начнет отображаться.

Этот плагин позволит быстро установить фавикон. Если после установки иконка не отображается, то требуется несколько раз перезагрузить сайт и значок появится.

Заключение

Favicon — это индивидуальная метка сайта, которая должна легко запоминаться посетителями ресурса. Иконку можно сделать самостоятельно в любом графическом редакторе. А на сегодня у меня, всё! Остались вопросы? Пишите в комментариях! Хотите больше статей, подпишитесь на обновление блога . Пока.

Как установить favicon на сайт. Установка фавикона на WordPress

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

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

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

При установке иконок для сайта возможны три варианта развития событий:

  1. из админки блога Вордпресс, используя настройки шаблона;
  2. обычная установка без плагина;
  3. с помощью плагина.

Вставляем фавикон на блог из админки

Это самый простой способ. Во многих премиум-шаблонах 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.net/favicon/blogibiznes.ru . Чтобы увидеть иконку своего сайта, замените имя моего домена своим. Бывает, что Яндекс долго не отображает пиктограмму в выдаче. Надо подождать и, если через месяц иконка не появится, можно задать вопрос в тех.поддержку.

Easy Favicons – WordPress плагин для установки фавикона

Считаю, что использовать плагин для установки favicon на WordPress, это лишнее. Тем не менее, такая возможность для особо ленивых есть. Существует много подобных плагинов, но я покажу один, которым сам когда-то пользовался. Он называется Easy Favicons. Скачать его можно по этой ссылке.

Устанавливаем и активируем плагин (как установить плагин Вордпресс). Открываем в админке страницу с настройками.

Как видно выше, есть возможность установить фавикон тремя способами:

  1. использовать свой Gravatar;
  2. указать путь к картинке;
  3. выбрать иконку для сайта из установленного набора.

После не хитрых настроек нажмите “ Сохранить изменения ” и Favicon будет установлен.

Вот и все дела. Теперь, надеюсь, понятно, как установить фавикон на сайт. Какой бы способ вы не выбрали, помните, что любой популярный сайт должен иметь свою узнаваемую иконку. Кроме того, ее можно периодически обновлять. Например, во время каких-то интересных событий или праздников. Представьте, если под Новый год человеку в поиске попадется ваш блог с картинкой Деда Мороза. Это может лишний раз привлечь внимание пользователя и заставить его выбрать именно ваш ресурс.

Ну вот, хотел покороче, получилось, как всегда. А как вы установили favicon на свой сайт?

Как установить favicon для сайта на WordPress

Если вы до сих пор не добавили favicon для своего сайта и не знаете, что это такое, то сделайте это прямо сейчас, потому что это как паспорт для вашего сайта. Этот пост-инструкция по установке favicon (или как еще называют — favicon.ico) для обычного сайта (например, одностраничника) или WordPress.

Favicon — это мини иконка вашего сайта, которая показывается во вкладке браузера и в закладках. Если вы зайдете на любой популярный сайт, то во вкладке вы должны увидеть иконка этого ресурса.

Картинка ниже показывает как это выглядит в жизни при просмотре с браузера Google Chrome.

Человек зашедший на ваш сайт, вероятнее всего потом оставит его во вкладках (если он интересный или нужный), чтобы чуть позже прочитать информацию или же вовсе добавит его в закладки.

Для того, чтобы пользователю было проще визуально найти ваш сайт среди других 10-20 вкладок браузера — добавьте яркий, запоминающийся favicon. В этой записи я покажу как её придумать и установить для обычного или WordPress сайта.

Рисуем и используем генератор favicon

Для начала нужно придумать как будет выглядеть favicon. На моем блог — это синий фон (основной цвет сайта) и буква «B» — первая буква домменого имени и его названия. Вот как это выглядит в жизни:

В вашем случае — это может быть тоже самое, только в сочетании с вашими названиями и цветами.

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

Создание favicon

После того как вы придумали как он будет выглядеть, нужно использовать инструмент на подобии Photoshop или Ilustrator для его создания. Минимальный размер — это 512x512px.

Почему такой большой? Потому что favicon будет использоваться генератором для создания сразу множества вариантов (для Android, iOS устройств, разных браузеров и остальных форматов).

Генератор favicon

Чтобы не создавать разные форматы favicon вручную (никто это не любит) можно воспользоваться генератором, который сделает всю сложную работу за вас.

Я использую Dan’s Tools Favicon Generator (английский сайт) и вам советую.

Все что вам нужно это:

  1. Зайти на сайт
  2. Выбрать favicon
  3. Нажать кнопку «Create Favicon» справа от поля выбора картинки
  4. Подождать

1 минуту, пока сервис закончит зарузку и форматирование

После того как вы немного подождали, у вас должна появиться страница похожая на скриншот ниже.

  1. Нажмите на «Download the generated favicon», чтобы скачать архив (это все что вам понадобиться).
  2. После заголовка «What’s next?» вы увидите поле с кодом, его нужно скопировать, потому что его нужно будет вставить между , но это делается по разному для CMS и обычных сайтов.

И далее выберите тип вашего сайта:

  • Если у вас WordPress сайт, тогда следуйте «Для WordPress».
  • Если у вас обычный сайт, тогда пропустите «Для WordPress» и следуйте «Для обычного сайта»

Для WordPress

Все favicon добавляются в голову вашего сайт (между тегами), но не нужно в WordPress портить структуру и лезть напрямую в файл header.php , чтобы там добавить код, потому что это НЕ правильно. Я покажу вам как добавить favicon в WordPress используя functions.php следуя корректной логике разработки.

  • Загрузите картинки из архива на ваш сайт в папку /wp-content/themes/ВАША_ТЕМА/img . Если этой папки нет, то создайте ее. Или же загрузите в другую папку на ваш выбор, только не забудьте поменять пути из функции, которая будет описана ниже.
  • Откройте файл functions.php и после любой из функций добавьте следующий код. Вместе моего HTML кода (строки 3-19) впишите скопированный вами код из генератора.

Функция get_theme_file_url() вернет ссылку (например: http://example.ru/wp-content/themes/bologer/ ) до папки с вашей темой и вам останется указать путь до картинки, что в нашем случае — это всего лишь /img/название_картинки.png и один .json файл.

  • Теперь остается проверить сработало это или нет. Зайдите на свой сайт, нажмите Ctrl + R, чтобы обновить страницу с кешем (у некоторых может быть Ctrl + f5). И если иконка появилась — поздравляю вас, все прошло успешно.
  • Если у вас не показывается favicon:

    • проверьте код функции на ошибки, возможно у вас есть опечатка
    • подождите некоторое время, чтобы favicon появился
    • если не хотите ждать, то добавьте ?ver=1.0 после .png и .json . Каждая картинка и файл должны выглядеть следующим образом: название_картинки.png?ver=1.0 или .json?ver=1.0

    После этого favicon точно должен работать.

    Для обычного сайта

    В случае если у вас нет CMS или движка для сайт, то все проще. Вам нужно зайти:

    1. Загрузить все картинки в папку со всеми картинками, например img
    2. В главном файле сайта (например, index.php или index.html) между указать код от генератора, например, который написан ниже.
    3. Сохранить файл, зайти на сайт и проверить наличие favicon.

    Вывод и вопросы

    Установить favicon не такой сложный процесс как это может показаться для множества людей. В этой записи я расписал два распространенных способа — для обычного сайта (без CMS) и для WordPress (самого популярного блог движка в мире).

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

    Топ-пост этого месяца:  Меню как в Facebook’е (адаптивное)
    Добавить комментарий