Favicon для сайта

Здравствуйте, уважаемые читатели. Сегодня, в продолжение темы «самостоятельное создание сайта» поговорим о создании и установке favicon для сайта. Своего рода это логотип сайта или блога, который виден в браузере и в результатах поиска Яндекс. Favicon — это значок веб-сайта или веб-страницы.

Иконка favicon

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

Favicon в закладках

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

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

По умолчанию – это маленькое изображение с размером сторон 16х16 пикселей, формата ICO. То есть это файл favicon.ico, расположенный в корневой папке сайта. Обнаружив этот файл в корневой папке сайта, многие современные браузеры способны отображать изображение иконки без внесения изменений в код шаблона Вашего сайта.

Но современные браузеры способны отображать иконки не только формата ICO но и PNG, GIF, JPEG, а также анимированные GIF. Но для этого в шаблон Вашего сайта потребуется прописать небольшую сточку кода. Но обо всём по порядку.

Какой самый быстрый способ получить favicon

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

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

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

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

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

Как создать favicon

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

Шаг 1. Поиск подходящей иконки

Для поиска я воспользуюсь уже упомянутым чуть выше сервисом IconFinder и найду иконку скажем для сайта занимающегося популяризацией электронной музыки.

Поисковый запрос

Для этого в поле поиска, вводим поисковый запрос и нажимаем кнопку Search (Поиск). Учтите, запрос тоже необходимо делать на английском языке, но это я думаю не проблема, ведь есть переводчик от Гугла :-).

Мне понравилась гитара, отмеченная на скриншоте.

Выбор иконки

Теперь нужно выбрать нужный нам размер 16х16 пикселей, формат ICO и сохраняем иконку на свой компьютер.

Скачиваем иконку 16х16

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

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

Шаг 2. Создание favicon

Если Вы скачали иконку нужного Вам размера и формата (16х16, ICO), то Вам достаточно переименовать скачанный файл в файл вот такого вида: favicon.ico

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

Итак, переходим на главную страницу этого генератора favicon.ico Generator.

Этот сервис позволяет создать иконку с нуля, нарисовав её прямо в специально отведённом окошке. Пример моего творчества ниже:

Создание иконки с нуля

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

Скачать иконку

Но нас интересует ещё она возможность данного генератора – это преобразование нашего, заранее подобранного изображения в иконку favicon. Для этого переходим на вкладку Import Image и загружаем нужное для преобразование изображение. В нашем случае, это гитара.

Преобразование изображения

Теперь, Вы можете, если это необходимо внести корректировки и сохранить готовый favicon на свой компьютер.

Скачать иконку favicon

Теперь, когда у нас есть готовый favicon.ico, надо этот файл скопировать в корневую папку Вашего сайта.

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

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

Но как же скопировать файл на сайт? Для этого можно использовать FTP соединение в любом из файловых менеджеров (Total Commander или FileZilla). А также можно использовать файловый менеджер в панели управления Вашего хостинга. Пример использования файлового менеджера на хостинге, можно посмотреть здесь.

Я же использую для таких целей файловый менеджер Total Commander. Для начала нужно настроить FTP соединение:

Настройка FTP соединения

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

После настройки соединения, подключаемся к сайту.

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

Теперь нужно открыть папку Вашего сайта, как правило, это /public_html/папка вашего сайта/ и скопировать в эту папку файл favicon.ico.

Копируем favicon на сайт

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

Очистка кэша

Как прописать путь к favicon в шаблоне WordPress

Для начала открываем административную панель WordPress и переходим в раздел «Внешний вид» — «Редактор». Где нужно открыть файл заголовка (header.php) и вставить вот такой код:

<link href="/favicon.ico" rel="shortcut icon" />

между тегами <head>…</head>

Редактор шаблона

По большому счёту это всё. Но следует рассказать ещё о нескольких возможностях установки favicon.ico. Так если Вы захотите установить иконку в формате GIF, PNG или JPEG, следует добавить тип файла в вышеуказанный код. Кстати, Вы также можете установить анимированный favicon в формате GIF. Но такая иконка будет, двигаться только в браузере Firefox. И надёжней будет прописать в коде шаблона второй путь к иконке в формате ICO.

Примеры:

иконка в формате PNG

<link href="/image.png" rel="icon" type="image/png" />

иконка в формате GIF

<link href="/ikonka.gif" rel="shortcut icon" type="image/gif" />

Вам не обязательно использовать имя файла favicon. Достаточно правильно указать тип файла (type) и путь к этому файлу (href)

<link href="/site/image/ico.png" rel="shortcut icon" type="image/png" />

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

<link href="http://timvet.ru/img/icon.png" rel="shortcut icon" type="image/png" />

Вот теперь вроде всё. Если, что упустил, прошу, добавьте в комментариях. Желаю удачи с установкой favicon.

P.S. В WordPress все описанные манипуляции в этой статье, можно сделать в два клика использую специальные плагины, к примеру Favicons. Эти плагины Вы без труда отыщите в поисковике. Но я всё же не сторонник большого количества плагинов, так как каждый из них оказывает дополнительную нагрузку на сервер.

С уважением, Максим Зайцев.

Понравилась статья? Поделиться с друзьями:
Комментарии: 31
  1. Елена

    Полезная статья. и столько полезных ресурсов!Спасибо.

    1. Максим Зайцев (автор)

      Елена, рад, что статья получилась полезная. Грамотно оформленный Favicon Ваш плюс при ранжировании сайта.

  2. Ирина

    Спасибо, сделала по вашему совету, теперь одним плагином меньше будет на сайте!

  3. Виталий

    А какой плюс в ранжировании от фавикона? Я всегда думал что он делает сайт более привлекательным в поисковой выдаче, но не ранжирует выше других от того что есть фавикон.

    1. Максим Зайцев (автор)

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

      1. Виталий

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

        1. Максим Зайцев (автор)

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

  4. Ирина

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

    1. Максим Зайцев (автор)

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

      1. Ирина

        ОК, Спасибо, понятно!

  5. Михаил

    Спасибо,статья действительно полезная и поучительная. Я захожу в архи-
    ватор,так у меня этих фавиконов отГугл пожалуй больше,чем хранящихся
    там файлов! Я даже пытался задать вопрос на сайте-можно ли их удалять?
    Конечно же,ответа не получил!!! А сейчас всё ясно и понятно.

    1. Максим Зайцев (автор)

      Спасибо, Михаил. Очень рад, что смог помочь.

  6. Андрей

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

    1. Максим Зайцев (автор)

      Спасибо, Андрей.

  7. Катерина

    А у меня такой вопрос. Правда я, к сожалению, не знаю правильного названия. Раньше я думала что это и есть Фавикон, потом поняла, что нет… )) Как называется и как установить маленькую картинку, чтобы она отображалась в адресной строке браузера перед адресом сайта? Обычно там прямоугольный белый листочек выведен, с загнутым кончиком, а у Гугла и Фейсбука — зеленый замочек. Просто я видела, что ставят картинки, наподобие Фавикона.
    Спасибо.

    1. Максим Зайцев (автор)

      Катя, Вы правы. Эта маленькая картинка в адресной строке браузера, тот же самый favicon. Если у Вас favicon отображается во вкладках и закладках, но не отображается в адресной строке, это связано с настройками браузера. В современных браузерах очень много блокируется по умолчанию, в том числе всплывающие окна и фавикон. И под этой иконкой в адресной строке подразумевается не только показ фавикон, но и сведений о сайте. У меня к примеру в Файрфоксе и Хроме отображается фавикон в адресной строке, а в Опере нет. Сейчас разбираюсь с этим парадоксом.

      1. Катерина

        Спасибо за ответ, Максим. У меня вот тоже Хром, но ничего не отображается… Кстати, и ваш Фавикон только во вкладке у меня виден. Видимо тут еще играют роль региональные настройки Хрома и Гугла. Нужно тоже в этом покопаться. :)

        1. Максим Зайцев (автор)

          Постараюсь найти этому решение. Как только найду, обязательно дополню статью. Спасибо, Катя.

  8. николай

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

    1. Максим Зайцев (автор)

      Николай, всегда пожалуйста. Заходите ещё.

  9. Ольга Собянина

    Максим, привет. Спасибо тебе огромное. Давно мечтала сделать фавиконку в виде моего фото, но не знала как это осуществить. Теперь все получилось. Спасибо огромное!

    1. Максим Зайцев (автор)

      Оля, пожалуйста.

  10. Юрий

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

    1. Максим Зайцев (автор)

      Здравствуйте, Юрий. Вы точно прописали путь к файлу с иконкой в header.php. Похоже на то, что вы прописали это путь в файле index.php. И ещё очистите кэш браузера. Должно помочь.

  11. Юрий

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

    1. Максим Зайцев (автор)

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

  12. Юрий

    Спасибо,надо бы и себе так делать.

  13. Елена

    Хорошая штука-фавикон. на последнем сайте еще не установила. Все руки не доходят. Вот почитала статью и завтра начну работу над ним.

    1. Максим Зайцев (автор)

      Вроде мелочь, а смотрится достойно. Да и узнаваемость сайта повышается.

  14. Ксения

    Давно хотела сделать вывод фавикона без плагина, и вот Ваша статья как раз кстати подвернулась. Спасибо, все сделала по инструкции. Получилось!

    1. Максим Зайцев (автор)

      Очень этому рад, Ксения. :-)

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