Favicon как сделать и добавить в WordPress блог


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

Как добавить favicon в свой блог WordPress

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

Для начала, нужно пояснить, откуда пошло загадочное слово favicon. Итак, favicon – это сокращение двух слов – «favorite» и, собственно, «icon». Другими словами, при добавлении блога в закладки, рядом с названием сайта будет располагаться красивые маленькие иконки, коими не пренебрегают владельцы крупных сайтов рунета. При этом favicon будет располагаться не только в списке избранных сайтов, но и в самой адресной строке, непосредственно перед URL-ом открытого сайта. Да и в самой поисковой системе в большинстве случаев отображается иконка перед строчкой с найденным сайтом. Это очень удобно в том случае, если нужный результат поиска не находится на первых строчках поисковых запросов. Конечно, если вы только что создали favicon для сайта и прикрутили его к своему блогу WordPress, то не стоит ожидать, что он моментально появится в поисковых запросах. Как правило, индексация таких иконок проводится раз в несколько дней. В отдельных случаях, срок может увеличиться до одного месяца.

Каким должен быть favicon для сайта?

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

Как сделать и где скачать favicon?

Для создания faivcon для сайта нужно обладать некоторыми дизайнерскими навыками, хотя с помощью современных сервисов этот процесс не составит особого труда даже для новичков. Получившаяся в результате иконка должна соответствовать определенным требованиям. Так, размеры графического файла не должны быть больше или меньше 16х16 пикселей. Сам файл должен иметь формат ico, что очень важно. Собственно, картинку 16х16 можно без проблем создать и собственными руками, с помощью того же Фотошопа. Вот только переименовывать получившийся файл в *.ico вам придется вручную, поскольку Фотошоп этому не обучен.

Если же вы не хотите работать с Фотошопом, можете использовать множество различных сервисов, в число которых входит знаменитый favicon.cc и не менее популярный favicon.ru. Здесь вам будет предоставлено удобное поле деятельности для создания иконок. Мало того, вы можете даже не рисовать вручную, а просто преобразовать любую картинку в иконку. Только помните, что картинка должна быть крупной и выразительной. Если же вам неудобны эти сайты, можете найти еще массу других. Благо, интернет просто переполнен подобными ресурсами, и навскидку можно назвать, как минимум десяток.

Если процесс создания favicon для сайта покажется вам сложным, вы всегда можете скачать готовую иконку с одного из вышеуказанных ресурсов. Особо крупной базой данных может похвастаться сайт favicon.cc, который включает в себя коллекцию из 55 000 разных иконок, разбитых по темам. Здесь можно даже скачать анимированный favicon, который добавит вашему сайту разнообразия. Правда сама анимация будет различима только лишь в Mozilla FireFox.

Как прикрутить favicon для сайта к блогу WordPress?

Рассмотрим процесс прикручивания иконки к вашему блогу WordPress. Собственно, сложностей здесь у вас возникнуть не должно. Ищете на сервере файл под названием header.php, который обычно находится в папке с использующимся шаблоном. После этого, вам нужно открыть его в текстовом редакторе с возможностью работы c HTML. В первой же строчке вы заметите открытый тег HEAD. Так вот, до его закрытия вам нужно написать две строчки, в которых будет прописан путь к нужному 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 (самого популярного блог движка в мире).

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

    Favicon на сайте WordPress

    Дата публикации: 2015-12-17

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

    Итак, начнем с того, что же такое есть этот самый Favicon. Собственно, определение термина можно найти в Википедии. Из определения понятно, что favicon — ни что иное, как иконка сайта, показывающаяся (если она, конечно, имеется на сайте) во вкладке браузера слева от названия сайта. Если такая иконка не установлена, тогда на вкладке вы увидите только название сайта.

    Согласитесь, наличие такой иконки делает сайт более узнаваемым. Особенно это касается брендовых проектов, которые могут знать и регулярно посещать многие пользователи. Наличие favicon на сайте имеет еще один, порой значительный, плюс — эта иконка показывается в результатах отдельных поисковых сервисов. Например, Яндекс Поиск показывает favicon.

    Выгода здесь очень простая: пользователь что-то ищет, набирает поисковый запрос, получает результаты поиска, среди которых, допустим, будет и ваш сайт, но, скажем на пятом месте. При этом пользователь знает ваш сайт, посещает его. Как вы думаете, какова вероятность того, что пользователь, увидев в результатах поиска знакомую иконку, выберет ваш сайт? Думаю, вероятность достаточно высока. Именно поэтому иметь favicon на сайте, особенно брендовом проекте, крайне желательно.

    Бесплатный курс «Основы создания тем WordPress»

    Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц

    КАК СДЕЛАТЬ 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 следующей строкой:

    Как быстро правильно создать и добавить фавикон на сайт 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, то код будет несколько отличаться.

    Как установить фавикон на блог WordPress и на сайт-одностраничник

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

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

    Где можно найти или нарисовать иконку для сайта

    Простую иконку для сайта можно нарисовать самому, с помощью графических редакторов или онлайн генераторов иконок типа:

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

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

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

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

    Добавить favicon в WordPress можно разными способами, с помощью чистого HTML кода и с помощью специальных функций WordPress.
    Сначала рассмотрим вариант с помощью специальных функций движка, так как этот вариант наиболее универсальный.

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

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

    Как установить фавикон на сайт в Вордпресс?

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

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

    Где взять фавикон?


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

    Картинку создавайте квадратной размером 512х512 px. Можно и на прозрачном (png), и на белом (jpg) фоне. Далее воспользуйтесь генератором, например этим: pr-cy.ru/favicon.

    Загрузите свою картинку через кнопку «Выбрать изображение с компьютера», нажмите «Создать favicon». Вы увидите, как будет смотреться ваш значок в браузере и сможете его скачать.

    Генератор уменьшает иконку до нужных размеров и придает файлу специальный формат ico.

    Есть также онлайн-сервисы, позволяющие создать свою иконку. Например, favicon.ru. Он предоставляет простенький редактор для рисования фавикона при помощи заливки цветом квадратиков на полотне.

    Кроме того, можно скачать уже готовый значок под тематику вашего сайта на специальных ресурсах. Один из таких – англоязычный findicons.com. Поиск иконок осуществляется по ключевым словам или облаку тегов. Для пользования сайтом вам понадобится базовое знание английского или переводчик.

    Иконки можно фильтровать по цвету, лицензии на использование, прочим критериям. Есть возможность скачать иконку сразу в формате ico, а также в png, выбрав размер (самый большой 256Х256 px). Это удобно, если вы захотите ее подредактировать. Есть и другие форматы, например jpeg, но почему-то иконка скачивается в нем некорректно – с полосами, разводами.

    Русский аналог – iconsearch.ru. Здесь все похоже, также ищем иконки по облаку тегов или ключевым словам, фильтруем по размерам. Скачиваем в формате png или ico.

    И еще один русскоязычный сайт с иконками pngicon.ru. Упомянула его по той причине, что здесь вы найдете иконки большего размера 512х512 px в формате png. Они подходят для установки на сайт в качестве фавикона средствами Вордпресс (об этом ниже).

    Установка фавикона на сайт

    Способ 1. Загрузка в корневую папку сайта значка в формате ico.

    Итак, вы скачали фавикон в формате ico или сделали его из обычной картинки при помощи онлайн-генератора. Чтобы установить его на свой сайт, вам нужно загрузить этот значок в корневую папку сайта при помощи файлового менеджера (если он предусмотрен на вашем хостинге) или ftp-клиента (FileZilla, например).

    Пример загрузки иконки через файловый менеджер хостинга Офферхост:

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

    Способ 2. Установка фавикона в настройках Вордпресс.

    Авторизовавшись в админке своего сайта, зайдите во вкладку «Настроить»:

    Выберите «Свойства сайта»:

    Откроется возможность выбрать и загрузить изображение в качестве фавикона. Для загрузки этим способом картинка должна иметь размеры 512х512px. Если вы загрузите маленькую иконку, то она растянется и потеряет качество.

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

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

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

    Наглядное видео к статье смотрите ниже:

    Как всегда, рада вашим вопросам и комментариям.

    Как добавить favicon к своему WordPress сайту

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

    Зачем добавлять favicon к WordPress-сайту?

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

    У большинства пользователей обычно открыто много вкладок в браузере. Чем больше вкладок, тем хуже виден заголовок вашего сайта. С помощью favicon пользователь может быстро опознать ваш сайт и перейти к соответствующей вкладке.

    Как создать favicon

    Favicon – это простое квадратное изображение. В идеале оно может иметь размеры либо 32×32 пикселей, либо 16×16 пикселей. Откройте Photoshop или любой другой графический редактор, создайте квадратное изображение 128х128 пикселей, чтобы можно было легко с ним работать. После создания нужного изображения вы можете затем изменить его размеры до 32×32 пикселей и сохранить его в формате PNG.

    Даже учитывая тот факт, что большинство современных браузеров работает с favicon в формате PNG, старые версии IE этого не делают. Чтобы ваш favicon нормально отображался во всех современных браузерах, мы рекомендуем преобразовать его в 16×16 пикселей и сохранить в формате .ico. Чтобы преобразовать PNG-файл в .ico, вы можете использовать favicon generator от Dynamic Drive.

    Добавление favicon к своему сайту

    Загрузите свой favicon в корневой каталог вашего сайта с помощью FTP. После этого вы можете вставить следующий код в файл header.php темы:

    Замените wpbeginner.com на URL вашего сайта. Если в вашей теме нет файла header.php или вы не можете найти его, не переживайте – для этого существует плагин. Установите и активируйте плагин Insert Headers and Footers. После активации плагина перейдите в раздел Параметры – Insert Headers and Footers и вставьте код, представленный выше, в секцию хэдера, после чего сохраните ваши настройки.

    Если вы не хотите работать с FTP, то вы можете воспользоваться плагином All in One Favicon.

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

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

    Мы предлагаем:

    Новые тарифы хостинга — «Минимальный» и «Безлимитный»

    — Всего 60 рублей за ГОД;

    — Идеально подойдет небольшим сайтам;

    — Поддержка популярных CMS

    190 рублей в месяц;

    — Количество сайтов — не ограничено;

    — Дисковое пространство — не ограничено;

    — Базы данных — не ограничено;

    Содержание

    Что такое favicon, почему плохо, если он отсутствует?

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

    Фавикон (от английского словосочетания favorite icon) – это маленькая квадратная картинка, которая визуально представляет ваш сайт и отображается в ярлыках страниц в браузере, в закладках на страницу, и в адресной строке рядом с именем сайта. Правильно подобранный фавикон соответствует логотипу сайта или тематике информации, которая на нем содержится. При взгляде на фавикон пользователь должен безошибочно определять ваш сайт среди остальных, даже не видя его названия. Наш фавикон в закладке браузера выглядит так:

    В качестве формата файла для фавикона в современных браузерах используются ico, png или gif. Некоторые браузеры поддерживают загрузку иконки в формате jpg, а Opera и Firefox могут отображать анимированный gif. Картинка фавикона бывает разных габаритов, обычно применяются размеры 16×16, 32×32, 48×48, 64×64, 128×128 или 512×512 пикселей. Для сайтов, предназначенных для просмотра на мобильных устройствах, размер иконки может отличаться.

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

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

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

    Виртуальный хостинг сайтов для популярных CMS:

    Поставить favicon средствами ВордПресс

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

    1. В меню «Внешний вид» войдите в пункт «Настроить» и выберите «Свойства сайта».
    2. В предложенном списке действий можно настроить отображение иконки сайта. Нажмите кнопку «Выбрать изображение» и загрузите файл с нужной картинкой.
    3. Чтобы применить настройку к сайту, нажмите кнопку «Сохранить и опубликовать». Убедитесь, что на ярлыке страницы в браузере появился фавикон.

    Вставить фавикон используя возможности WordPress шаблона

    В некоторых темах WordPress заложена дополнительная возможность по установке иконки сайта.

    1. Войдите в меню «Внешний вид» и выберите пункт «Настроить».
    2. Дальнейший путь к настройкам зависит от используемого шаблона. Как правило, фавикон устанавливается в общих настройках темы. Найдите соответствующую команду и загрузите файл с картинкой.
    3. Не забудьте подтвердить изменения нажатием кнопки «Сохранить и опубликовать».

    Добавить в файл header.php

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

    1. С помощью файлового менеджера подключитесь к серверу хостинга и скопируйте в корневую директорию вашего сайта подготовленный файл с именем favicon.
    2. В админке WordPress зайдите в меню «Внешний вид» (1) и выберите пункт «Редактор» (2).
    3. В списке шаблонов откройте файл заголовка header.php (3).
    4. После открывающего тега вставьте строку (4), в которой проверьте формат загруженного файла с иконкой (png или другой), при необходимости замените на свой вариант.
    5. Нажмите кнопку «Обновить файл» (5), чтобы применить иконку к сайту.

    Установка favicon используя плагин Favicon by RealFaviconGenerator

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

    В меню «Плагины» выберите пункт «Добавить новый». Найдите, установите и активируйте плагин Favicon by RealFaviconGenerator. Затем зайдите в меню «Внешний вид» (1), после установки плагина в нем появится пункт Favicon (2) для загрузки иконки. Нажмите кнопку «Выберите из библиотеки мультимедиа» (3) и укажите расположение файла с иконкой на вашем компьютере. Нажмите кнопку «Генерировать favicon» (4).

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

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

    Почему лучше установить без использования плагина?

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

    Как установить фавикон на сайт WordPress и где скачать уже готовые иконки

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

    Где скачать

    Ниже я приведу примеры нескольких ресурсов, на которых можно подобрать и скачать уже готовые к установке картинки:

    • Findicons – сервис со множеством готовых картинок. Здесь их более 400 тысяч на любой вид, вкус и цвет. К тому же все можно скачать абсолютно бесплатно.
    • Iconj – еще один огромный каталог готовых изображений. Единственное НО — здесь нет поиска. Все придется листать и смотреть вручную, что не очень удобно и затратно по времени. А еще он периодически отваливается, поэтому тут как повезет.
    • Faviconka – еще один ресурс с кучей картинок. Увы, их здесь не так много, как в первых двух случаях, но все равно можно найти что-нибудь интересное.

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

    Установка

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

    1. При помощи плагина.
    2. Через шаблон WordPress.
    3. Вручную – ввод кода через редактор в админке.

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

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

    Начнем с самого простого и наиболее понятного метода — установка фавикона при помощи плагина. Главный плюс данного метода — с ним справится кто угодно, даже если он полный 0 в создании сайтов. Говорю по личному опыту.

    Итак, для начала нужно скачать и установить плагин All in One Favicon. Вот ссылка на скачивание. Ну а если вы вдруг забыли, как это делается, то вот моя статья на эту тему.

    Скачали? Установили? Отлично, просто переходите в настройки плагина и подгружайте понравившуюся картинку. На этом все, дело сделано. Остается только дождаться, когда она начнет отображаться. И не забудьте очистить кэш браузера!

    Через шаблон WordPress

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

    Если у вас такого нет, можно сделать немного по другому. Подгружаете изображение в корень сайта и в настройках внешнего вида в разделе дополнительные коды в «header» прописываете:

    Не забудьте добавить в href=»» ваш домен! Иначе ничего работать не будет!

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

    Прописываем код

    Ну и последний способ — поставить фавикон на сайт вручную, прописав специальный код в редакторе. Для этого нужно:

    • Подгрузить изображение в корень сайта. Это можно сделать вручную или через FTP соединение.
    • Перейти в раздел «Внешний вид» – «Редактор» и найти там файл header.php. В этом файле необходимо прописать следующий html код:
    • Сделали? Отлично, все готово.

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

    Заключение

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

    Создать favicon и установить его на блог WordPress

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

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

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

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

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

    Создать favicon. Фавикон – это графическое изображение, сохраненное в формате ICO, имеющее размер 16×16, 32×32, 48×48 пикселей. Для этого я выбрал размер поменьше, так как он будет иметь меньший вес, а значит будет быстрее подгружаться в браузер. Создают файл favicon.ico с помощью специализированный интернет – сервисов, программы Фотошоп с специальным плагином.

    Я решил пойти самым коротким путем – буду использовать интернет-сервис, потому что это самое легкое. Зачем на 3- минутную работу тратить полчаса. Для начала я выбираю фотографию с собой, уж так я пожелал. Так как я выбрал большую фотографию, я ее открыл Фотошопом, обрезал ее так, чтобы осталось лицо, плечи и немного фона. затем ее уменьшил до размера 150 х 150, скажу только файл имеет расширение .jpg.

    С помощью этой панели я могу сразу создать favicon а могу поиздеваться над моим файлом, здесь есть маленький простенький редактор. Но всякое искусство редактирования файлов изображения не по мне, потому сразу создаю иконку для блога.

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

    Созданный favicon после нажатия кнопку Create, скачивается на жесткий диск компьютера по нажатию появившейся ссылке.

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

    Для тех кому не повезло – можно поступить проще, закинуть его в корневую папку на хосте и все, дело сделано.

    Теперь я должен побеспокоиться о том, чтобы она загружалась. Для этого Вы должны, и я должен сделал следующее. Зашел в каталог с файлами установленной темой на блоге. Открыл файл header.php и нашел такую вот строку. Ориентируетесь на слово favicon.ico.

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

    После сохранения этого файла иконка будет использоваться моим блогом. Путь к файлу может быть длинным или не очень, состоять из 3 или 4 названий каталогов и подкаталогов. Все зависит от того, где размещен файл favicon.ico. Если Вы не можете понять как этот путь прописать, сделайте как выше, поместите его в корень блога, каталог у меня имеет название public_html. У вас я не знаю, ведь у разных хостингов они называются по-разному.

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

    Дальше будет интересней.

    Приветствую Вас, на блоге seomans.ru

    Зарегистрируйтесь, чтобы получать рекомендации по созданию блогов и сайтов от seomans.ru

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

    Топ-пост этого месяца:  Новые функции в Node js 10 упрощение обработки ошибок, повышение производительности и многое другое
    Добавить комментарий