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


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

Как установить фавикон на сайт 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.ico на любой сайт.

Что такое Фавикон

Favicon (favicon.ico, фавикон, фавиконка) – это маленькая иконка сайта, которая отображается в поисковой выдачи, рядом с названием. Размер фавикона для сайта должен быть 16×16, 32×32 или 120×120 пикселей.

Рекомендуемый тип файла – это *.ico. Но может быть других форматов gif, jpeg, png, bmp. Я на всех своих сайтах использую файл с расширением *.ico.

А еще фавиконка отображается во вкладках и закладках браузера. Маленькая иконка, по которой можно легко узнать интернет-ресурс.

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

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

Создание favicon.ico

Самые распространенные способы – это с помощью онлайн сервисов или знаменитого растрового редактора – Adobe Photoshop.

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

Создать фавиконку можно с помощью онлайн-сервисов, подойдет любой которые найдете, но я использую www.favicon.by. Интерфейс простой, есть готовая коллекция фавиконов, можно заказать даже анимированную фавиконку, а также есть полная инструкция по установке.

Интерфейс сервиса состоит из следующих разделов:

  1. Нарисовать самостоятельно – в этом разделе есть все что необходимо для самостоятельно рисования фавиконки (карандаш, ластик, пипетка, заливка, переместить).
  2. Импорт из файла – выбираете любой рисунок и сервис сам создает фавикон.
  3. Импорт с сайта – создаст favicon.ico на основе импорта фавиконки с сайта.
  4. Область для рисования.
  5. Готовый результат – сразу можете оценить, как будет выглядеть favicon.
  6. Скачать готовую фавиконку.

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

Adobe Photoshop

Я выбираю именно фотошоп, потому что редактирую в нем все картинки для блога. Если у Вас нет опыта работы с Adobe Photoshop, не переживайте, я все подробно покажу.

Открывает программу, создаем документ с размером 32×32 пикселей.

Далее с помощью инструментов можно:

  1. сделать заливку;
  2. написать текст;
  3. создать фигуру.

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

  • Для этого открываем меню Файл -> Открыть, далее выбираем свою картинку и нажимаем кнопку Открыть.
  • После, инструментом выделение, отмечаем нужную часть логотипа, далее меню Редактирование -> Копировать.
  • Закрываем логотип, открываем документ с нашей будущей фавиконкой, нажимаем меню Редактирование -> Вставить.
  • Далее на клавиатуре нажимаем сочетание клавиш Ctrl+T (eng), подгоняем картинку под наши размеры. Готово.

Фавиконку сохраняем, выбрав меню Файл -> Сохранить как…, указываем имя favicon и выбираем расширение .png или .jpeg или .jpg.

После сохранения можно устанавливать, но рекомендуется файл с расширением .ico. Поэтому наш favicon.png конвертируем в favicon.ico.

Открываем ресурс https://convertio.co/ru/ и загружаем наш файл.

Далее нажимаем кнопку Конвертировать, ждем и можем скачивать готовую фавиконку.

Вот теперь можно поставить фавикон на сайт.

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

Я покажу два способа установки, первый подойдет для всей сайтов, например, для сайта на HTML или WordPress, Второй способ только для проектов на движке WordPress.

Первый способ

Для начала нужно поместить созданный favicon.ico в корень сайта. Подключаемся к хостингу по FTP-соединению с помощью клиента FileZilla, перемещаем файл в корневую папку.

После этого открываем главную страницу сайта с помощью любого редактора кода, в Вордпресс это можно сделать, открыв меню Внешний вид -> Редактор тем, файл header.php и размещаем следующий код в разделе :

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

Второй способ

Как я говорила ранее этот способ подойдет только для установки на CMS WordPress.

Открываем меню Внешний вид, далее выбираем шаблон, нажимаем настроить, далее Свойства сайта. Загружаем иконку на и сразу можем увидеть результат.

Изменить или удалить фавикон

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

А потом дождитесь пока поисковый робот посетит ваш ресурс и добавить новую иконку в свою базу, на это может уйти до 2 недель.

По факту, иконка поменялась за пару дней.

А для удаления – просто удаляем файл и опять ждем робота в гости.

Вот и все, теперь знаете, как установить фавикон на свой сайт, как нарисовать и какие требования к фавикону.

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

Как сделать 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» и задать размер готового изображения.

Топ-пост этого месяца:  Самоучитель по основам Html

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

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

Этап 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 можно нарисовать. Далее разберемся в том, какой размер должен быть у логотипа, в конце расскажу, как вставить созданную иконку на сайт.

Что такое фавикон и почему он важен для СЕО

Фавикон (favicon) – значок веб-сайта размером 16 x 16 (или 32 x 32, но не более). Он отображается во вкладке браузера. Выглядит это так:

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

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

Подведем небольшие итоги:

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

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

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

Где скачать готовый вариант

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

Просто вводим в поисковик нужный запрос, что-то типа “Скачать готовый favicon”, после этого вам будет представлено огромное количество самых разных вариаций.

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

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

Но я еще раз повторюсь, что лучше будет создать фавикон самостоятельно.

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

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

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

Например, Favicon.by. Он позволяет вам нарисовать логотип при помощи простых инструментов. Сервис создает иконку в формате ICO.

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

Как только мы закончим наши художества, прокручиваем страницу вниз и скачиваем нашу картинку.

Обратите внимание на левую часть окна “Ваш результат”. Там вы посмотрите, как будет выглядеть ваша иконка во вкладке браузера.

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

Adobe Photoshop

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

Итак, у нас есть два варианта:

  1. Сделать фавикон из картинки (логотипа компании или других).
  2. Просто выбрать шрифт и сделать его в виде буквы.

Второй вариант используется наиболее часто. Наверное, больше половины сайтов просто создают квадрат размером 16 на 16 или 32 на 32, выбирают шрифт (как правило, Roboto или Open Sans), цвет, соответствующий гамме проекта. И все – favicon готов.

Открываем Фотошоп, после чего сразу идем в “Меню” – “Создать”.

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

Размер должен быть 16 x 16 или 32 x 32 (в пикселях). Все остальное – по вашему усмотрению, но я бы советовал выставить так, как показано на скриншоте.

Нажимаем кнопку “Создать”, после чего у нас перед глазами появляется область с заданным размером. Сейчас мы будем творить.

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

Фон как на скриншоте показывает, что я выбрал вариант “прозрачный” на первом этапе создания картинки.

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

Цвет я регулировал при помощи специального инструмента в правом верхнем углу. Здесь вы можете выбрать абсолютно любой вариант при помощи мыши. В верхней панели также есть инструменты для выбора шрифта и размера. На картинке 32 x 32 оптимальным размером буквы будет 8 – 10 Пт.

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

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

Тут можно придать своей букве интересный вид. Например, настроить тени, сделать обводку или же градиентный цвет.

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

Далее нам нужно сохранить наше творение. Идем в “Файл” – “Сохранить как”. Выбираем нужный формат (PNG, GIF или JPEG) и название – favicon, нажимаем “Сохранить”.

При установке через плагины или тему можно использовать любое название и формат. Однако в случае с корневым каталогом файл должен иметь название favicon и формат – ICO.

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

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

Самый простой и доступный – через корневой каталог. Его мы рассмотрим в первую очередь.

С помощью корневого каталога

Для начала нам нужно конвертировать файл в ICO. Это можно сделать при помощи любого онлайн-сервиса, достаточно ввести в поисковую строку: “Конвертация в ICO” или “PNG в ICO”. Загружаем туда фотографию, получаем favicon.ico.

Важно: размер должен быть 16 x 16 или 32 x 32. Название favicon, а расширение *.ico.

Теперь мы должны загрузить этот файлик в корень нашего сайта. Можно сделать это при помощи FTP-клиента или файлового менеджера.

Корень сайта, как правило – public_html. Независимо от платформы. Но в некоторых темах могут наблюдаться проблемы с отображением фавиконки. Чтобы пофиксить их, мы должны вручную добавить в header.php следующий код:

Для этого идем во “Внешний вид” – “Редактор”, находим в боковой панели нужный файл и кликаем для редактирования. Код мы должны вставить внутри тега .

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

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

Через тему WordPress

Заходим в настройки темы, используя верхнюю панель на сайте (“Внешний вид” – “Темы”). Далее идем в “Свойства сайта”.

Вот тут-то мы и настраиваем фавиконку. Просто нажимаем на “Выбрать/изменить изображение”, далее откроется менеджер, через который мы и загружаем нашу картинку.

Плагины

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

Идем в “Плагины”, выбираем “Добавить новый”. Откроется страница каталога, где в окно поиска мы должны ввести ключевое слово – Favicon. Нашему взору будет представлено большое количество всевозможных плагинов. Все они работают примерно одинаково, но я все же позволю себе объяснить, как все это делается, на примере одного из самых популярных – All in One Favicon.

Нажимаем на кнопку “Установить”, а после активируем нужное расширение.

После того как плагин будет установлен и активирован, мы должны перейти в настройки. Они представлены в таком виде.

Для каждого формата здесь есть соответствующая вкладка. Допустим, вы создали иконку в формате GIF и хотите, чтобы именно она отображалась во вкладке. Соответственно идем во вторую по счету строку, нажимаем “Загрузить” и в файловом менеджере выбираем наш файл. То же касается и других форматов.

Отдельного внимания заслуживает вкладка “Apple Touch Icon Frontend”. В ней вы сможете задать иконку для устройств от Apple. В отличие от обычного фавикона, логотип для Айфонов или Макбуков имеет большее разрешение и качество. То есть вам, чтобы загрузить картинку, придется создать еще один вариант. Уже в разрешении 512 x 512 или 1 024 x 1 024. Однако для мелких сайтов, в принципе, нет нужды проделывать подобное.

Заключение

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

Многие вебмастеры, к сожалению, упускают этот момент. Вместе с ним из вида выпадают и другие, не менее важные нюансы. Если вы новичок и готовы учиться создавать крутые сайты и зарабатывать на них, то я приглашаю вас на курс Василия Блинова “Как создать блог”.

Топ-пост этого месяца:  Как правильно выбирать хостинг

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

Способы добавления Favicon на сайт

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

Добавление Favicon на сайт

Чтобы добавить рассматриваемый тип иконки на сайт, вам придется для начала создать подходящее изображение квадратной формы. Это можно сделать как с использованием специальных графических программ, например, Photoshop, так и прибегнув к некоторым онлайн-сервисам. Кроме того, подготовленный значок желательно заранее преобразовать в формат ICO и уменьшить до размера 512×512 px.

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

Вариант 1: Добавление вручную

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


Способ 1: Загрузка Favicon

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

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

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

Способ 2: Редактирование кода

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

    Между тегами «HEAD» добавьте следующую строку, где «*/favicon.ico» необходимо заменить на URL-адрес вашего изображения.

Лучше всего использовать абсолютную ссылку с указанием префикса вместо относительной.

В некоторых случаях значение «rel» можно изменить на «shortcut icon», увеличив тем самым совместимость с веб-браузерами.

Значение «type» также может быть вами изменено в зависимости от формата используемого изображения:

Примечание: Наиболее универсальным является ICO-формат.

  • ICO – «image/x-icon» либо «image/vnd.microsoft.icon»;

Если ваш ресурс нацелен на преимущественно последние версии браузеров, строку можно сократить.

Для достижения наибольшей совместимости вы можете добавить сразу несколько строк с указанием ссылки на Favicon сайта.

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

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

Вариант 2: Средства WordPress

При работе с WordPress вы можете прибегнуть к ранее описанному варианту, добавив упомянутый код в файл «header.php» или воспользовавшись специальными инструментами. Благодаря этому иконка гарантировано будет представлена на вкладке сайта вне зависимости от браузера.

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

    Через главное меню разверните список «Внешний вид» и выберите раздел «Настроить».

На открывшейся странице необходимо воспользоваться кнопкой «Свойства сайта».

Пролистайте раздел «Настройка» до низа и в блоке «Иконка сайта» нажмите кнопку «Выбрать изображение». В данном случае картинка должна иметь разрешение 512×512 px.

Через окно «Выбрать изображение» загрузите нужную картинку в галерею либо выберите ранее добавленную.

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

Установив нужное действие через соответствующее меню, нажмите кнопку «Сохранить» или «Опубликовать».

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

Способ 2: All In One Favicon

    В «Панели управления» сайтом выберите пункт «Плагины» и перейдите к странице «Добавить новый».

Заполните поисковое поле в соответствии с наименованием нужного плагина — all in one favicon — и в блоке с подходящим расширением нажмите кнопку «Установить».

Процесс добавления займет некоторое время.

Теперь необходимо кликнуть по кнопке «Активировать».

После автоматического перенаправления вам нужно перейти к разделу с настройками. Сделать это можно через «Настройки», выбрав из списка «All in one Favicon» либо воспользовавшись ссылкой «Settings» на странице «Плагины» в блоке с нужным расширением.

В разделе с параметрами плагина следует добавить иконку в одну из представленных строк. Это нужно повторить как в блоке «Frontend Settings», так и в «Backend Settings».

Нажмите кнопку «Сохранить изменения», когда изображение будет добавлено.

По завершении обновления страницы картинке будет присвоена уникальная ссылка и она отобразится на вкладке браузера.

Этот вариант является наиболее простым в реализации. Надеемся, у вас получилось установить Favicon на сайт через панель управления 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

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

Эта маленькая деталь имеет важное значение для вашей личности в интернете. Мы обсудим значок 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. Проверьте, как выглядит значок в вашем браузере и на мобильном устройстве.
Топ-пост этого месяца:  Минимизация CSS использование инструмента Optimizer, примеры кода


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

В прошлой статье речь шла о том, что такое фавиконы и где можно скачать готовые иконки для сайта 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 на свой сайт?

Как добавить фавикон на сайт 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.ico на любой сайт.

Что такое Фавикон

Favicon (favicon.ico, фавикон, фавиконка) – это маленькая иконка сайта, которая отображается в поисковой выдачи, рядом с названием. Размер фавикона для сайта должен быть 16×16, 32×32 или 120×120 пикселей.

Рекомендуемый тип файла – это *.ico. Но может быть других форматов gif, jpeg, png, bmp. Я на всех своих сайтах использую файл с расширением *.ico.

А еще фавиконка отображается во вкладках и закладках браузера. Маленькая иконка, по которой можно легко узнать интернет-ресурс.

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

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

Создание favicon.ico

Самые распространенные способы – это с помощью онлайн сервисов или знаменитого растрового редактора – Adobe Photoshop.

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

Создать фавиконку можно с помощью онлайн-сервисов, подойдет любой которые найдете, но я использую www.favicon.by. Интерфейс простой, есть готовая коллекция фавиконов, можно заказать даже анимированную фавиконку, а также есть полная инструкция по установке.

Интерфейс сервиса состоит из следующих разделов:

  1. Нарисовать самостоятельно – в этом разделе есть все что необходимо для самостоятельно рисования фавиконки (карандаш, ластик, пипетка, заливка, переместить).
  2. Импорт из файла – выбираете любой рисунок и сервис сам создает фавикон.
  3. Импорт с сайта – создаст favicon.ico на основе импорта фавиконки с сайта.
  4. Область для рисования.
  5. Готовый результат – сразу можете оценить, как будет выглядеть favicon.
  6. Скачать готовую фавиконку.

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

Adobe Photoshop

Я выбираю именно фотошоп, потому что редактирую в нем все картинки для блога. Если у Вас нет опыта работы с Adobe Photoshop, не переживайте, я все подробно покажу.

Открывает программу, создаем документ с размером 32×32 пикселей.

Далее с помощью инструментов можно:

  1. сделать заливку;
  2. написать текст;
  3. создать фигуру.

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

  • Для этого открываем меню Файл -> Открыть, далее выбираем свою картинку и нажимаем кнопку Открыть.
  • После, инструментом выделение, отмечаем нужную часть логотипа, далее меню Редактирование -> Копировать.
  • Закрываем логотип, открываем документ с нашей будущей фавиконкой, нажимаем меню Редактирование -> Вставить.
  • Далее на клавиатуре нажимаем сочетание клавиш Ctrl+T (eng), подгоняем картинку под наши размеры. Готово.

Фавиконку сохраняем, выбрав меню Файл -> Сохранить как…, указываем имя favicon и выбираем расширение .png или .jpeg или .jpg.

После сохранения можно устанавливать, но рекомендуется файл с расширением .ico. Поэтому наш favicon.png конвертируем в favicon.ico.

Открываем ресурс https://convertio.co/ru/ и загружаем наш файл.

Далее нажимаем кнопку Конвертировать, ждем и можем скачивать готовую фавиконку.

Вот теперь можно поставить фавикон на сайт.

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

Я покажу два способа установки, первый подойдет для всей сайтов, например, для сайта на HTML или WordPress, Второй способ только для проектов на движке WordPress.

Первый способ

Для начала нужно поместить созданный favicon.ico в корень сайта. Подключаемся к хостингу по FTP-соединению с помощью клиента FileZilla, перемещаем файл в корневую папку.

После этого открываем главную страницу сайта с помощью любого редактора кода, в Вордпресс это можно сделать, открыв меню Внешний вид -> Редактор тем, файл header.php и размещаем следующий код в разделе :

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

Второй способ

Как я говорила ранее этот способ подойдет только для установки на CMS WordPress.

Открываем меню Внешний вид, далее выбираем шаблон, нажимаем настроить, далее Свойства сайта. Загружаем иконку на и сразу можем увидеть результат.

Изменить или удалить фавикон

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

А потом дождитесь пока поисковый робот посетит ваш ресурс и добавить новую иконку в свою базу, на это может уйти до 2 недель.

По факту, иконка поменялась за пару дней.

А для удаления – просто удаляем файл и опять ждем робота в гости.

Вот и все, теперь знаете, как установить фавикон на свой сайт, как нарисовать и какие требования к фавикону.

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

Добавить комментарий