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

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

Доброго времени суток! В этой статье я расскажу как сделать иконку - фавикон для сайта.

Что такое фавикон и зачем он нужен?

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

Как сделать иконку (фавикон, favicon) для блога

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

Создание favicon из изображения

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

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

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

1. iconj.com - для скачивания favicon нажмите ICO напротив выбранной картики.

2. favicon.co.uk - на понравившуюся картинку нажмите правой кнопкой мыши, скачанную картинку переименуйте, как favicon.ico

3. www.audit4web.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

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

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

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