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

Автор: | Рубрика: Создание и ведение сайта | Обновлено: 2019-02-28
Просмотров: 10705
Как задать фавикон для сайта

Доброго времени суток, уважаемый читатель блога inetsovety.ru! В этой статье я расскажу как создать и установить фавикон на сайт. Мы рассмотрим сайт генератор favicon.ico и подборки готовых иконок для скачивания.

Что такое фавикон для сайта и зачем он нужен?

Favicon (фавиконка) - это картинка, изображение которой показывается перед адресом сайта в адресной строке, а также слева от названия сайта на вкладке браузера. Размеры favicon 16 на 16 пикселей. Наглядно смотрите на картинке:

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

к оглавлению ↑

Как сделать фавикон из картинки онлайн

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

Где создать favicon ico для сайта онлайн и сгенерировать из картинки

Загружайте на сайт свою картинку. Кликаете "создать Favicon" и потом нажимайте на кнопку "Скачать favicon.ico". Выбирайте картинку по крупнее и квадратного размера, так как размер фавиконки очень маленький, и если на большой картинке хорошо просматривались мелкие детали, то на иконке они будут незаметны. Как будет отображаться ваша картинка в строке браузера показано на примере.

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

к оглавлению ↑

Где скачать готовый favicon.ico для сайта

Если Вы не хотите самостоятельно создавать иконку  favicon, то Вы можете скачать готовые фавиконы из следующих сайтов:

  • iconj.com - для скачивания favicon нажмите ICO напротив выбранной картинки.
  • findicons.com - введите в поле поиска ключевое слово по тематике, на понравившуюся картинку нажмите правой кнопкой мыши, скачанную картинку переименуйте, как favicon.ico
  • faviconka.ru - еще один сервис, содержащий множество иконок favicon для скачивания. Аналогично предыдущему сайту, сохраните картинку на компьютер и переименуйте ее.
к оглавлению ↑

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

Того, чтобы поставить иконку favicon, необходимо полученный  файл favicon.ico загрузить на хостинг. Для этого через FTP клиент загрузите файл иконки в корневую папку Вашего сайта(это папка в которой находятся файлы index.php, sitemap.xml, а также основные папки wp-admin, wp-content). Подробно, где найти корневую папку сайта на хостинге читайте в статье по ссылке http://inetsovety.ru/kornevoy-katalog-sayta/

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

<link rel="shortcut icon" href="http://inetsovety.ru/favicon.ico" type="image/x-icon" />
<link rel="icon" href="http://inetsovety.ru/favicon.ico" type="image/x-icon" />

Замените адрес моего блога inetsovety.ru, адресом своего блога. Данный код вставляйте то место, где увидите такие строчки <link rel=......./>

Сохраните изменения в файле шаблона header.php. Обновите страницу и фавикон должен поставиться. Если в текущем браузере фавикон не отобразился, то попробуйте открыть свой сайт через другой браузер. У меня, например, в браузере Мозилла иконка отобразилаь только после перезапуска браузера, хотя у других браузерах все работало сразу же после установки. Если же favicon не отображается ни в одном из браузеров, значит Вы сделали что-то не так.

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

С уважением, Виктория – блог inetsovety.ru

Поделиться ссылкой на пост в соц. сетях
Получать уведомления о новых статьях на e-mail
Комментариев: 20 к статье "Как сделать favicon.ico для сайта и установить на сайт"
  • Алексей 2016-10-24 в 20:50

    Без проблем положил фавиконку в корневую папку и без прописки кодов он появился на вкладке.

    Ответить
  • Sergey 2013-04-09 в 15:25

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

    Ответить
    • alf2012 2013-07-04 в 11:40

      Для тех, кто не владеет фотошопом favicon.ru будет очень хорошим вариантом — в нем можно не только делать фавикон из картинки, но легко и просто рисовать самому 😉

      Ответить
      • Ната Дегтярева 2016-03-29 в 09:21

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

        А вы обращаете внимание на фавиконы сайтов-блогов, которые читаете?

        Ответить
      • Игорь 2016-10-26 в 18:29

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

        Ответить
      • Анатолий 2017-07-30 в 16:58

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

        Ответить
    • Люся 2016-10-30 в 16:35

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

      Ответить
  • Надежда Введенская 2013-03-29 в 13:05

    Очень приятно, когда видишь реальные лица своих комментаторов. Не понимаю тех, кто пытается скрываться на картинками.

    Ответить
    • Люся 2016-10-30 в 16:37

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

      Ответить
  • Андрей 2013-02-27 в 19:43

    А у меня фавикон в виде желудя. все получилось. Спасибо!

    Ответить
  • Сергей 2012-03-03 в 20:21

    В корень сайта я загрузил favicon.ico в папку public/html и у меня сразу начал отображаться favicon в браузере.

    Ответить
  • Сергей 2012-03-03 в 17:07

    А при чем здесь header.php и отображение фавикона в браузере на компьютере?
    Может я что-то не понимаю, но у меня отображается фавикон безо всяких вставок кода. Поэтому и задал вопрос, но вопрос так и остался без ответа. Извините за беспокойство.

    Ответить
    • Виктория 2012-03-03 в 18:00

      Да у Вас в коде действительно нет этих строк для вывода фавикона. Непонятно как-то. У Вас в корне сайта есть файл фавикона?

      Ответить
  • Сергей 2012-03-03 в 14:56

    Поясните пожалуйста для чего нужны манипуляции с кодом? Он что не вставляется без вставки кода? Или у кого как? Если это так, то чем это вызвано?

    Ответить
    • Виктория 2012-03-03 в 16:33

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

      Ответить
      • alf2012 2013-07-04 в 11:48

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

        Ответить
      • Игорь 2015-01-29 в 19:22

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

        Ответить
      • Юлия 2015-09-15 в 13:19

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

        Ответить
      • Игорь 2016-10-26 в 18:31

        Да знаю я это Юлия.У меня фавиконка прямо в админке установлена, хотя раньше плагин использовал

        Ответить
      • Анатолий 2017-07-30 в 17:00

        Если удобнее плагином, тому плагин подойдёт. Кому самостоятельно хочется, значит так им удобнее.

        Ответить
Оставить комментарий
Нажмите, чтобы отменить ответ.

Комментарий появится после проверки. Комментарии, содержащие спам и ненормативную лексику будут удалены!