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

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

Реферальные банеры

Доброго времени суток, уважаемый читатель блога 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). Подробно, где найти корневую папку сайта на хостинге читайте в статье по ссылке https://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 не отображается ни в одном из браузеров, значит Вы сделали что-то не так.

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

Понравилась статья? Поделиться с друзьями:
Как заработать деньги в интернете
Комментарии: 20
  1. Алексей

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

  2. Sergey

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

    1. alf2012

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

      1. Ната Дегтярева

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

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

      2. Игорь

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

      3. Анатолий

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

    2. Люся

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

  3. Надежда Введенская

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

    1. Люся

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

  4. Андрей

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

  5. Сергей

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

  6. Сергей

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

    1. Виктория (автор)

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

  7. Сергей

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

    1. Виктория (автор)

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

      1. alf2012

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

      2. Игорь

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

      3. Юлия

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

      4. Игорь

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

      5. Анатолий

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:
Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности. Комментарий появится после проверки. Комментарии, содержащие спам и ненормативную лексику будут удалены!

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