Шаг №42.Как поставить иконку на сайт?

Привет друзья. Вы никогда не задавались вопросом о том, как поставить иконку на сайт?Если Вас в данный момент интересует именно этот вопрос, то вы попали правильно по адресу.

Начнем с того, что такое иконка сайта, и каково ее основное назначение на сайте.

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

Иконка сайта – это небольшое изображение,которое владелец сайта может назначить для своего сайта.После добавления иконки сайта, она будет отображаться в заголовке вкладок браузеров, в истории и закладках браузера, а также иконку сайта можно встретить в различных RSS лентах(установка RSS ленты на сайт), а также в многочисленных сайтах анализаторах и статистики(установка счетчика посетителей).

Посмотрите на рисунок, я стрелочкой указал иконку моего сайта,которая находится в заголовке вкладки браузера Chrome.

Установка иконки сайта на сайт

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

Иконка сайта в поисковой выдаче

Где взять красивую иконку для сайта?

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

Впишите в поисковую строку тему Вашего сайта, и укажите размер в 16 пикселей, и также установите прозрачность.

Настройка поиска иконок на сайте Iconfinder.com

В списке появившихся изображений, выберите интересующее и скачайте его в формате ico.

Скачиваем иконку для сайта в формате ICO

Скачанный файл переименуйте в favicon.ico.

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

Вот мы вплотную и подобрались к волнующему моменту установки иконки на сайт.

Для начала загружаем иконку сайта, которую мы переименовали в favicon.ico в корень сайта.

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

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

Код который подключает иконку к сайту:

<link href="http://адрес_сайта/favicon.ico" rel="shortcut icon" type="image/x-icon" />

После всех манипуляций сохраните файл header.php, и обновите его на сервере, либо загрузите его повторно.
Теперь откройте Ваш сайт, и проверьте отображается ли Ваша иконка на сайте.
Записал первый видео урок, не судите строго.


Если у Вас не получилось поставить иконку на сайт, обратитесь ко мне в комментариях,и я по возможности помогу.

  • ильдар

    с первым видеоуроком на сайте!

    • http://wpcreate.ru Артем Петрусенко

      Спасибо, по возможности буду больше видео инструкций делать на сайте.

      • http://gb1.yalta.ua Иван

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

  • павел

    все сделал по инструкции,но иконка с мозиле и хроме появилась толко наверху где видны открытые закладки. а вот где поле адрес не отображается и также при поиске сайта в яндевсе например сайт находит, но без иконки.
    Кеш чистил!
    А и сайт у меня в зоне рф и есть несколько зелкал в стандартной зоне ru
    Но темы и контент лежит в папре в зоне рф и все всегда работало!
    адрес вводил с помощью конвертера http://www.wwhois.ru/punycode.php
    Хэлп!
    заранее спасибо.

    • ильдар

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

      • павел

        я так и делал удалил в панели вордпресс и за все время в хроме и мозиле
        Может не сразу именно эта иконка обновляется?

    • http://wpcreate.ru Артем Петрусенко

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

      • павел

        спасибо! попробую! подожду

  • http://www.md52.ru/blog/ Игорь

    А нет смайлика, который головой в стену бьётся с досады ? Ни чё у меня не вышло, делал точь в точь как в видео инструкции 🙁

    • ильдар

      наверняка забли очистить кеш.
      вы такой фавикон ставили? (лопата с киргой кажется)? http://smotr.im/9cz3

      • http://www.md52.ru/blog/ Игорь

        Да нет , в том то и дело что хотел эту кирку убрать а другой поставить. 🙂 Только потом у меня кодировка упала, поменял тему, обновил WordPress и всё бес толку . Не ну так как я ещё только учусь но уже чувствую во мне начал просыпаться мега программист 😉 то ща доковыряюсь до полного уничтожения блога, а потом начну всё заново. 🙁 Кстати где то видел отличную статью по Бекапу , надо попробовать 😉

  • http://klientydlyasalona.ru Григорий

    Я все проделал один в один
    — картинка favicon.iso
    — загрузка в папку с названием сайта на хостинге,
    — в шапку шаблона Designfolio сразу после тега прописал строку сохранил
    = ничего не изменилось.
    почистил кэш, посмотрел в эксплорере, мозиле яндексе и гугле — ничего.

    • http://wpcreate.ru Артем Петрусенко

      Расширение файла должно быть не favicon.iso а favicon.ico!

      • http://klientydlyasalona.ru Григорий

        да, прошу прощения — опечатка. Название файла в каталоге такое, как должно быть — icо

        • http://wpcreate.ru Артем Петрусенко

          Картинка не рабочая, я ее скачал и не могу открыть,нужно загрузить рабочую картинку, также можно добавить картинку в формате Png тогда и в коде нужно изменить с ico на png.

  • http://klientydlyasalona.ru Григорий

    Картинка открывается, другая так же не работает ни в ico ни png с соответствующими заменами в коде в шапке.
    думаю, моя ошибка где-то в другом месте, но не могу понять, где это место)) все же просто до невозможности)
    может быть по почте в частном порядке вы сможете помочь разобраться, что бы не «засорять эфир»?

  • http://klientydlyasalona.ru Григорий

    Артем, благодарю за помощь!
    Хороший ресурс — много почерпнул, вишу на подписке.
    Желаю успехов!

    • http://wpcreate.ru Артем Петрусенко

      Всегда пожалуйста, обращайтесь!

  • http://www.aliexpress-info.ru Иван

    Привет,не знал куда написать,пишу сюда,проблема в следующем,на сайта http://www.aliexpress-info.ru ,в шапке сайта,есть страницы,и первая страница » Главная» ,не где её нет,как её редактировать или удалить??? Не как не могу найти,подскажи пожалуйста.

    • http://wpcreate.ru Артем Петрусенко

      Иван, в ближайшее время напишу на эту тему урок, а сейчас советую подписаться на обновления, что бы собственно не пропустить этот урок!

      • http://aliexpress-info.ru IVan

        Всё разобрался уже))

  • http://big-bigmoney.ru Залина

    ой… ой… эмоции хлещут через край!! Как же клево, когда у тебя все получается!!! Вот честное слово, если бы не видеоурок, то я б замыла вопросами. А с ним все настолько просто, что аж… что аж слов нет. Спасибо огромное, Артем, за такую клевую штуку!!!!
    Кстати, поздравляю сайт с первым Днем Рождения! Желаю еще больше посетителей и таких же классных статей!!!

    • http://wpcreate.ru Артем Петрусенко

      Спасибо Залина за поздравления=)

  • Эдгар

    Иконка показывается и в Chrome и в Mozile, но не в explorer. В чём проблема?

    • http://wpcreate.ru Артем Петрусенко

      Все так и должно быть. Експлорер в старых версиях не отображает иконок.

  • Эдгар

    Но у меня новая версия, и на всех остальных сайтах показыает(

    • http://wpcreate.ru Артем Петрусенко

      Ну можно так попробовать подключить фавикон:

      <link  rel="shortcut icon" href="адрес иконки">
  • http://hitrosty.ru/ Елена

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

  • http://knigapovarov.ru/ Sergsavych

    Спасибо за инструкцию. Только сначала я запарился с тем, куда нужно было закачать файл, т.к. не подключался по ftp, а заходил через панель управления хостинга. В итоге, файл выложил не просто в корень (/domains/имя_сайта), а чуть глубже — (/domains/имя_сайта/public_html). Может кому пригодиться. Удачи.

  • Светлана

    Артем! Спасибо!!! Твой видеоурок очень мне помог!!! Всё понятно, наглядно! Класс!!! 😉

  • Анастасия

    Добрый день, у меня такой вопрос. Что делать,если при соединении происходит «Критическая ошибка»? 😳 😥 Что может быть за причина? Спасибо заранее за ответ!

    • http://wpcreate.ru Артем Петрусенко

      Анастасия, скорее всего неправильно ввели имя или пароль к ftp 😐

      • Анастасия

        Спасибо, разобралась в чём причина! 🙂 Урок полезный! Видео инструкция простая и понятная на самом деле! Главное не ошибиться! Спасибо! 😳

  • http://vuzvpolske.ru Сергей

    Здравствуйте, почему то не смог поставить иконку на сайт. Подскажите почему?

    • http://wpcreate.ru Артем Петрусенко

      Все делали по инструкции?Видео смотрели?

  • http://www.shkolanovoesoznanie.ru Елена

    Все сделала, иконка не появляется 😐

  • http://gotovlydoma.ru/ георгий

    Чего то у меня как то не хочет иконка вставать и видео смотрел и делал вроде как правильно и кэш чистил а ее все нет и нет. 😥

  • http://gotovlydoma.ru/ георгий

    Все, разобрался! Я лопухнулся сюсють!

  • http://webis.org.ua/ pikasso

    где то видел скрипт где можно менять каждый час иконки фавиконов…вы такой не встречали?

    • http://wpcreate.ru Артем Петрусенко

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

  • http://www.sitehere.ru Юрий

    Спасибо

  • http://odetyah.com Ольга

    Здравствуйте! Первый урок — это здорово! Все понятно записано. Спасибо. Все сделала по образцу но почему-то не отображается — иконка должна сразу отобразиться после обновления?делаю в хроме. odetyah.com

    • http://wpcreate.ru Артем Петрусенко

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

      • http://odetyah.com Ольга

        А, да ! все получилось, не в сам корень положила файл! Спасибо!!!!!!!! Так долго не получалось — теперь радости еще больше. Мелочь, а приятно!!!

        • http://wpcreate.ru Артем Петрусенко

          Пожалуйста!

  • Олег

    Артем, добрый день.
    Не получилось у меня увидеть фавикон. Сделал все как на видео.
    Вот скриншот.
    http://gyazo.com/efcd246248bac3f87a79eb2528555a45
    Скажите что делать?

  • http://webdirect.at.ua/ Дмитрий

    Отображает нужную иконку во всех браузерах, кроме «Хрома» без входа на сайт (http://webdirect.at.ua/), а в «Хроме» иконка появляется только после входа на сайт, подскажите почему? Пишите ответы сюда: enterhere@mail.ua

  • alostraelia

    спасибо огромное за инструкцию, Ваша самая внятная и по ней сразу все получилось, ура!

  • http://zvukomaniya.ru фыпал

    http://zvukomaniya.ru на моем сайте получилось спс!!!!

  • http://crimea-biz.ru/ Саша

    получилось. спасибо!!!!
    но я менял в прямо в админке: дизайн/редактор/ header.php.

  • http://moydomick.ru/ Анатолий

    Все сделал как на видео,а иконка не появилась.
    Может не там прописал?
    Кеш не чистил.
    Что делать, может она появится со временем?

  • Elka

    Всё работает! Спасибо большое!

  • http://wedfwefwef.ru cdscsdvsdvsd
    <pre lang="css" escaped="true">

    body{
    backgroung: red;
    }

     
  • Алексей

    Приветствую.
    Подскажите пожалуйста в чем может быть проблема? Сайт на вордпресс, вот так «адрес_сайта/favicon.ico» не во всех браузерах видно иконку, так «favicon.ico» без ссылки на сайт видно везде кроме хрома и то не на всех страницах сайта(( кеш чистил везде от начала работы браузера. Вот мой сайт http://prohitech.ru/ сайту чуть больше недели. Пожалуйста помогите!!! 😕

  • A A N

    Большое вам спасибо за Ваши уроки)

    • A A N

      Только вот у меня проблемка, видео не показывает, там выходит строчка «Это личное видео» 🙁

  • http://отзастройщиков.рф Мария

    Добрый день!
    Помогите пжт установить иконку, я пробую пробую, у меня не получается(((
    пожалуйста помогите.
    как ее Вам прислать?
    Спасибо

  • http://www.dietas24.ru иван

    Спасибо за информацию

  • http://martinezshow.ru марина

    Не получается 😮 .Вроде бы все сделала.
    Код подключения куда именно вставлять?
    если возможно ответь в личку, чтобы не обременять остальных моим ❓
    Заранее благодарна…

  • марина

    Извините, получилось на «ты» — опечатка. 😐