Самый эффективный техпроцесс для достижения ТОП 1 в Google в 2024 году Получить
logo
💥SEO-продвижение под Google в любых тематиках
💥Вывод в ТОП 1-3 от 1 недели👇
💥https://t.me/AleksSergienkoSEO
👉 Или свяжитесь со мной через форму обратной связи.
 

Как сделать favicon (иконку) для сайта?

Иконка для сайта

Доброго времени суток! А у вас есть  favicon на сайте? Это важный элемент сайта, он будет отображаться в поисковой выдаче! Про то, что это такое и как его установить за несколько минут — читайте в статье.

Фавикон — это иконка для сайта, неотъемлемый атрибут, индивидуальность вашего ресурса. С помощью faviсon читатель вашего онлайн-проекта с лёгкостью определит и найдёт его в «панели закладок» на своём браузере или в некоторых поисковых системах, например, Яндекс.

У меня на данный момент  favicon выглядит так:

Как сделать favicon (иконку) для сайта?

Теперь я думаю вы поняли что это за «штуковина» — favicon. Давайте разберём, как его сделать.

Как сделать favicon 

Вообще, favicon должен быть размером 16х16. Саму картинку под иконку вы можете сделать самостоятельно с помощью графического редактора Photoshop , либо найти картинку в интернете и уменьшить её до размера фавикона (16х16 в данном случае). Проблема лишь в том, что фотошоп, да и многие другие графические редакторы не сохраняют изображения в формате ICO, а нам нужен именно этот формат!

Но как говорится в поговорке: «Кто ищет — тот всегда найдёт«. И я нашёл решение — это онлайн сервис, который преобразует формат вашей картинки (фавикона), обычно это формат PNG или JPG, в формат ICO. Это сервис  image.online-convert.com.

Для того, чтобы преобразовать формат картинки в формат иконки ICO, нужно нажать на кнопку «Обзор«, выбрать картинку, установить размер пикселей 16х16 и нажать на кнопку «Преобразовать файл«.

Как сделать favicon (иконку) для сайта?

После вышепроделанного, сможете скачать файл на свой компьютер уже в формате ICO.

Если не хочется утруждать себя созданием фавикона, можете скачать его на различных сервисах в Интернете, уже в формате ICO. Например, сервис iconsearch.ru. Здесь можете найти  favicon, для этого нужно ввести в строку «Поиск» слово, которое несёт смысл вашей фавиконки. Например, «Деньги» — далее отобразятся все иконки, подходящие по смыслу.

Как сделать favicon (иконку) для сайта?

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

Загрузить нужно в корень сайта, обычно это папка public_html, как загружать файлы с помощью программы Total Commander можете узнать из этой статьи.

Далее, если Интернет-проект создан на движке WordPress, то нужно найти файл header.php.

Данный файл можете найти по адресу: wp-content/themes/папка с используемой вами темой.

Затем, когда откроете файл header.php, после тега <head> нужно будет вставить код:

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

Как сделать favicon (иконку) для сайта?

Сохраняете изменения. Всё favicon готов!

Ну что ж, теперь я думаю, вы можете легко создать и установить favicon. Желаю Вам успехов, будьте индивидуальнее)!

P.S.

Как вам статья? Рекомендую получать свежие статьи блога на e-mail, чтобы не пропустить много новой интересной информации!

С уважением, Александр Сергиенко

Читай этот блог и ты узнаешь много полезного! Читай и ты!
Поделитесь с друзьями:
Комментарии пользователей ( 32)
  1. geka1990
    в 11:34

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

    Ответить
  2. Angel
    в 14:51

    Я думаю это здорово когда кто нибуть тебе расскажет, и покажет как зделать иконку favicon.

    Ответить
  3. Ирина Сергеевна
    в 17:27

    Всё это понятно — рисуем, подгоняем размер, конвертируем в ICO. Но могу предложить более простой способ создания иконок. Выполняем всё написанное в статье до момента сохранения. Сохраняем картинку в формате BMP. Затем меняем расширение файла на ICO и иконка готова. Проверялось неоднократно при создания иконок для файлов, но, честно говоря, для сайтов ещё не пробовала — как-то не было необходимости.

    Ответить
  4. Taras
    в 19:28

    Многие современные браузеры не требуют явного указания на favicon.ico в коде страницы. В случае отсутствия такого указания браузер пытается загрузить favicon.ico из корня сайта. Так что с даным значок веб-сайта проблем не будет. Только создавать и пользоватся.

    Ответить
  5. Gothards
    в 02:24

    Далее, если Ваш сайт или блог создан на движке WordPress, Вам нужно найти файл header.php.

    Данный файл Вы можете найти по адресу: wp-content/themes/папка с используемой Вами темой.

    Затем, когда Вы откроете файл header.php, после тега Вам нужно будет вставить код:

    А я то думал надо файл atribyte.ico((После проверки действительно помогло!
    Этого не знал огромное спасибо! Удачи в продвижении сайта! Успехов в написании новый программ!

    Ответить
  6. Алена
    в 10:43

    Супер! Как раз искала такую информацию: все четко и подробно расписано. Оказывается, это не так уж и сложно. Спасибо автору!

    Ответить
  7. Натали
    в 14:15

    Я в восторге, все думала как иконку на своем сайте сделать! Оказалось все очень просто! Теперь я знаю что иконка на сайте называется фавикон! Классное описание действий, спасибо! Блог отличный, создателям зачет!

    Ответить
  8. Сергей
    в 12:22

    Познавательная стятья! Я на конец то узнал как мне сделать фавикон для своего сайта и как сохранить изображение в формате ICO. Спасибо автору! Продолжайте в том же духе!

    Ответить
  9. Юрий
    в 08:53

    А у меня на блоге стандартный стоял. Шаблон уже предусматривал. Давно искал информацию по тому, как фавикон создать. Как-нибудь попробую.

    Ответить
  10. Владимир (34)
    в 01:17

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

    Ответить
  11. Мозгунова Ирина
    в 12:50

    Установила фавиконы на два своих сайта, но не очень нравятся. А на третий пока не могу придумать.
    Последую Вашим рекомендациям. Они очень понятно написаны.

    Ответить
  12. Аянбек
    в 00:21

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

    Ответить
    • Александр Сергиенко
      в 12:27

      А Вы код прежнего фавикона удалили?

      Ответить
      • Аянбек
        в 13:17

        Вроде удалял, только что начал копаться в коде шапки, который выглядит так:

        <meta http-equiv="Content-Type" content="; charset=» />


        <link rel="stylesheet" type="text/css" src="/fonts/arbat.css»/>
        <link rel="shortcut icon" href="/favicon.ico» type=»image/x-icon» />
        <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="» />
        <link rel="alternate" type="text/xml" title="RSS .92" href="» />
        <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="» />
        <link rel="pingback" href="» />

        <!— @import url( ); —>

        Прошу обратить внимание на вот эту ссылку с шапки: , очень странно, в коде моей шапки блога прописан какой то блог турецкого человека, кто нибудь может мне пояснить в чем тут дело?

        Ответить
        • Аянбек
          в 13:23

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

          Ответить
          • Александр Сергиенко
            в 13:26
            Ответить
  13. Юрий
    в 10:03

    Фавикон установить, но вот подобрать имидж иконки бывает затруднительно. %)

    Ответить
  14. Юрий Йосифович
    в 00:46

    Интересует такой вопрос — иконка задается исключительно 16*16 (это такой стандарт?) — или нужно делать её во всех популярных размерах (32*32, 128*128,…)?

    Ответить
    • Александр Сергиенко
      в 13:24

      Стандарт такой.

      Ответить
  15. Лёля
    в 11:44

    Инструкция более чем доступна! Спасибо))))

    Ответить
    • Александр Сергиенко
      в 06:18

      Рад, что Вам помогли мои рекомендации.

      Ответить
  16. Алексей
    в 09:17

    Быстро всё получилось.
    Спасибо.
    Теперь на сайте красивая иконка.

    Ответить
  17. Диана
    в 19:08

    Ой раньше для меня этот фавикон был проблемой, я не очень понимала, как его сделать.) Хоть и статьи читала, а сейчас уже как рыба в воде.)) Хоть 100 фавиконов сделаю.)) :-))
    У меня к тому же в настройке шаблона есть уже пунктик, куда просто надо залить свой фавикон, и он уже сразу же работать начинает.)

    Ответить
  18. Елена
    в 20:43

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

    Ответить
    • Александр Сергиенко
      в 15:10

      Пожалуйста, Елена :)

      Ответить
  19. Виктор
    в 11:55

    Спасибо! Попробую! 8)

    Ответить
  20. Николай Вилков
    в 01:41

    Я фавикон себе сам нарисовал в увеличенных пикселах раскрыл, нарисовал и посмотрел сразу на результат, понравилось, сохранил. Теперь я знаю. что у меня он точно уникальный, поскольку повторить такой полёт мысли мимолетной просто нереально)) :)

    Ответить
    • Александр Сергиенко
      в 10:41

      :)

      Ответить
  21. Андрей
    в 13:14

    Здравствуйте! Я давно читаю Ваши статьи, всегда актуальные для меня темы. В действительности получаю очень полезную информацию. Очень много фишек для продвижения сайта, стараюсь сразу внедрять. Спасибо за Ваш труд. ;( ;(

    Ответить
    • Александр Сергиенко
      в 21:30

      Всегда рад помочь!

      Ответить
  22. Виталик
    в 20:42

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

    Ответить
    • Александр Сергиенко
      в 21:31

      Спасибо. Будем идти до победного :)

      Ответить
Ваше Имя
E-mail (не публикуется на сайте)     Поле обязательно для заполнения
Адрес вашего сайта (если есть)
Текст комментария

Статистика сайта блога Александра Сергиенко