Как поменять иконку сайта? Инструкция как сделать и установить иконку для сайта самостоятельно

Иконка веб сайта в браузере и в поисковике

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

<link rel="SHORTCUT ICON" href="/favicon.ico" type="image/x-icon">

Название «Favicon» — это английское сокращение от слов FAVorites ICON, что в переводе обозначает «значок для избранного». Иконка веб сайта в браузере отображается в адресной строке, непосредственно перед url-адресом страницы. Так же иконку веб сайта в браузере можно увидеть во вкладках и рядом с закладками.

иконка сайта в браузере

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

иконка в браузере по умолчанию

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

иконка сайта в Яндексе

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

Создание иконки для сайта

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

Как еще сделать иконку для сайта? Весьма популярно создание иконки для web сайта с помощью специальных программ, позволяющих редактировать изображения по своему усмотрению. Обычно программы отличаются между собой инструментами, встроенным функционалом и, конечно, пользовательским интерфейсом. Одни программы для создания иконок на сайт позволяют одновременно редактировать несколько картинок, другие дают возможность использовать градиентную заливку или 3D эффекты, а третьи имеют простой и понятный интерфейс. Скачать программу для создания иконок можно как здесь, выбрав любую из предложенных, так и поискав в поисковиках:

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

Для того, чтобы сохранить нарисованную иконку для сайта в фотошопе, нужно нажать «сохранить как» и выбрать специальный формат .ico.
Если вы не обнаружили у себя этот формат, не отчаивайтесь — просто стандартный набор форматов изображений Photoshop’а не включает его в себя. Но его очень легко добавить, достаточно лишь скачать плагин ico-формата и распаковать его в папкуC:ProgramFilesAdobeAdobePhotoshopCS2Plug-InsFileFormats, после чего при сохранении изображений командой «Сохранить как» в списке доступных форматов появится строчка ICO (Windowsicon)(*.ICO).

Иконки для сайта: размер 16х16 или 32х32?

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

Формат иконки для сайта

На сегодняшний день универсальным форматом иконки для сайта считается формат .ico, так как именно его поддерживают все самые популярные браузеры: Google Chrome, Internet Explorer, Firefox, Opera и Safari. Следующие по универсальности форматы иконки для webсайта – PNG, JPEG, и GIF их поддерживают все браузеры, кроме Internet Explorer’а. А вот анимированные иконки для сайта GIF-формата поддерживают только Firefox и Opera.

Все возможности поддержки браузерами форматов иконок для сайтов представлены ниже:

Когда картинка создана и сохранена в нужном формате, можно переходить к тому, как установить иконку на сайт.

Как добавить иконку на сайт? Установка иконки на сайт

Первым нужно сделать не что иное, как добавить иконку на сайт в прямом смысле слова. Нужно загрузить изображение иконки, сохраненное в выбранном формате, на сервер: в корневую папку сайта (обычно она называется public_html). Как загрузить иконку на сайт? Это можно сделать с помощью специальных программ, помогающих соединиться по FTP или же в менеджере файлов, через панель управления сайтом.
После того, как вставка иконки на сайт произведена, необходимо сделать так, чтобы изображение отображалось в браузере. Для установки иконки на сайт (отображения в браузере) необходимо прописать специальный код и поместить его в правильное место.

Html код иконки для сайта

<link rel="SHORTCUT ICON" href="/favicon.ico" type="image/x-icon">

Обратите внимание на тип картинки иконки, его нужно прописывать в «type».
Например, если у вас картинка иконки имеет формат GIF, тогда код будет выглядеть следующим образом:

<link rel="SHORTCUT ICON" href="/favicon.gif" type="image/gif">

Данный Html код иконки для сайта нужно вставить в произвольном месте между тегами <head> и </head> в файл страницы, на которую нужно поставить иконку.

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

Как поменять иконку сайта? замена иконки сайта

Если вас интересует, как изменить иконку сайта, значит, она уже есть у вас на сайте. Смена иконки сайта осуществляется практически по той же схеме, что и добавление. Для замены иконки сайта первым делом также необходимо нарисовать новую картинку и сохранить ее в нужном формате. Далее сохраненное изображение добавляется на сайт в корневую папку. После этого необходимо найти файл, где уже есть прописанный html код иконки для сайта между тегами и проверить его правильность. Если в коде прописаны верный путь к новой картинке, а так же ее название и формат, то браузер будет отображать изображение на вкладках, сразу после сохранения файла и обновления страницы.
Итак, теперь вы знаете и как сменить иконку сайта на новую.

 


Статьи по теме:

Самостоятельное продвижение сайтов в Интернете
Как закрыть внешние ссылки от индексации
Как подобрать ключевые слова на сайт
Где взять контент для сайта
Какой URL добавить на страницу

Комментарии к записи:
  1. Людмила

    а у меня исчезла иконка сама по себе что мне предпринять?

    • admin

      Проверьте, наличие картинки «иконки» в папке сайта, пропишите заново ее в коде страниц в header’е.

  2. Александр

    Спасибо за дельную статью

  3. Николай

    Не понятно. Файл нужно назвать: favicon.ico? — это если в корневой папке. А что тогда означает «type=»image/x-icon»>? В вашем примере, как был назван файл? x-icon, что-ли, который находится в папке image? Объясните мне пожалуйста чайнику. И еще. Мне нужно вставить в header.php на вордпресс, там можно вставить в любое место? Так как там на PHP нет тегов .

    • admin

      Николай, Да, файл обязательно нужно назвать favicon и перенесети в любую папку, можно в корень (docs), можно и в image. Если вы положите картинку в папку image, тогда пропишите правильный путь к ней, например href=»seokleo.ru/image/favicon.ico type=»image/x-icon» — означает тип картинки — иконки. Если у вас картинка формата: jpg, то type= «image/jpg», gif — type= «image/gif» и т.д. Чтобы в вордпрессе добавить иконку сайта, нужно внести код «иконки» в header.php, для этого нужно зайти в панель управления в раздел «внешний вид» — «Редактор» и выбрать файл header.php и там вставить данный код: между тегами . Не забудьте сохранить файл.

  4. Николай

    Спасибо! Теперь все понятно ))

  5. Алекс

    Здравствуйте.
    Что не правильно сделал?
    На главной странице поставил:
    Кэш почистил! Иконкинеть ;-(

  6. Алекс

    Упс!
    Код не прошёл.
    Надеюсь админу он виден.
    Уточню.Иконку видно сверху-в горизонтальной
    линейке,а в браузерах и закладках её нет.

    • admin

      Алекс, здравствуйте! Иконка в поисковиках появилась?

  7. Прохожий

    маленькая поправочка…
    в теге нужно указывать точное расширение иконки!
    если например иконка имеет экстеншн gif
    то в теге пишем
    обратите внимание, в конце тега тоже пишем gif
    Иначе, браузер всё равно покажет иконку. но в ftp-логах сервера постоянно будет висеть ошибка 404.
    можете сами поэкспериментировать из любопытства… Создайте иконку gifб а в теге напишите в конце x-icon.
    А потом посмотрите файл error_log…
    спасибо за внимание.

    добавлю:
    <link rel="SHORTCUT ICON" href="/favicon.gif"type="image/gif">

  8. Александр

    Помогите !!!
    favicon.ico залил в корневую папку
    ПОСТАВИЛ
    (НА ВСЕ СТРАНИЦЫ)
    почистил ctrl+F5
    и ничего .Да,при открытии папки favicon.ico изображения там нет,хотя сносил и ставил много раз.Иконку качал сразу в формате .ico
    Люди что не так ?

    • admin

      Александр, вы залили иконку в корневую папку, те у вас по адресу http://yoursite.ru/favicon.ico — открывается картинка-иконка сайта, так? Если да, этот адрес нужно подставить в тег Данный тег необходимо вставить в любое место в тег здесь должен быть код

  9. Юрий

    Здравствуйте!
    А у меня не получается.Сделал все как у вас написано.
    Вопросы есть:
    1.Вставлять между тегами в любом месте?(пробовал
    и в начале и в конце)
    2.Формат картинки м.б. png? или толькоjpg,gif?

    • admin

      Юрий, здравствуйте! 1.Вставлять между тегами в любом месте?(пробовал и в начале и в конце) Вставлять код нужно в любом месте между тегами , попобуйте найти закрывающий тег и вставить код прямо перед ним, чтобы был такой вид: ………. ………. 2.Формат картинки м.б. png? или толькоjpg,gif? Формат картинки иконки сайта может быть и png, и jpg, и gif, и ico — главное прописать тип файла в коде правильно: type="image/формат картинки"

  10. olegtimchenko

    Получилось, спасибо. Не сразу понял, где на сервере расположена корневая папка. У меня эта папка находится в папке public_html, название соответствует имени сайта.

  11. Дмитрий

    Положил в папку public_html. По адресу мой сайт/favicon.ico иконка открывается. Иконку видно в браузере на вкладках, в поисковой строке нет, в закладках нет, в поисковиках нет. В чем причина?

    • admin

      Дмитрий, а вы путь к картинке правильный написали? Если да, то скорее всего картинка просто пока не проиндекировалась. Робот дойдет — появится в поиске.

  12. Антон

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

    • admin

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

  13. Маша

    Спасибо за подробное описание, Получилось установить фавикончик

  14. Михаил

    Нет у меня папки public_html… Сайт на WordPressе, а отображается иконка Joomla! в Хроме, но в Опера ни чего не отображается.
    Как найти и изменить на свою иконку??????

  15. Сахалинский

    Привет,admin ! А папки «image» и папка «images» — это одно и то же ?
    И ещё…. Как в эту папку «images» перетащить файл 16х16 под именем favicon ?
    Спасибо.

    • admin

      Здравствуйте, Сахалинский! Вы можете это сделать через ftp-клиент или через панель управления сайтом.

  16. Постройкин

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

  17. Анжелика

    Здравствуйте. Поменяла значок сразу появился во вкладке сайта. Набираю в поисковике, мой сайт со старым значком. Что нужно сделать чтобы в поисковике тоже поменялся, или нужно просто какое то время?

    • admin

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

  18. Елена

    Всё получилось! Правда, пришлось помучаться с форматами. Начала с ico. Не определялся в лисе только в хроме. Потом gif сделал — в хроме нормально, в лисе его стало колбасить как анимированный — среднее между первым хромовским (там изображение немного менялось) и новым. Наконец, сделала png. И алилуйа! Везде одинаково и не маячит ))

  19. Лана

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

    • admin

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

  20. Юрий

    Долго мучился. Хитрость в форматах оказалась. Все получилось как использовал png, в других не сработало. Спасибо за статью и разъяснения!

  21. Степан

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

    • admin

      Скорее всего поисковые системы еще не успели проиндексировать изменения.

  22. WAKE

    Сделал все как сказали + прочитал все комменты. Вообщем картинка в формате favicon.ico — отображается только в фаерфоксе, а в хроме остается почему-то старая, даже после Ctrl+F5

    • admin

      Подождите немного, пока проиндексируется картинка.

  23. Дмитрий

    Добрый день. сайт работает на Битриксе. Изначально стояла ихняя иконка, заменил иконку favicon.ico в корневой папке на свой логотип. Видна только в административной части. Подскажите где и что нужно прописать, чтобы новая иконка была видна везде.

    • admin

      Здравствуйте, Дмитрий! Если это битрикс, то для того, чтобы поставить иконку на сайт, вам нужно в разделе шаблон сайта прописать код. Прилагаю ссылку на изображение, как это выглядит в движке: http://seokleo.ru/wp-content/uploads/2014/05/как-установить-иконку-на-сайт.jpg

  24. Дмитрий

    У меня сайт обновлен и выглядит все по другому, плюс стоит два шаблона. Т.е. я не смог найти как по вашей ссылке прописать код. Может быть еще где-то можно поменять?

    • admin

      Дмитрий, так в обоих шаблонах пропишите просто код.

  25. Дмитрий

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

    • admin

      А где вы меняли? Если в движке, он сам, по идее, должен был на сервере хостинга сохранить. Так же может быть, что картинка иконки сайта еще просто не проиндексировалась поисковиками. В браузерах на вкладках появилась? Если нет, напишите нам на почту seokleo@ya.ru, с пометкой «иконка для сайта» и мы поможем вам установить иконку на сайт.

  26. Лисенок

    Привет! Создала иконку, поместила в корневой каталог. Скажите пожалуйста самое главное, в какую страничку этот HTML-й код вписывать? Я вписала в index.html, прописала полный путь в href, — не работает.

    • admin

      Здравствуйте! Вам нужно прописать код в хедере, между тегами и . У вас на какой системе управления сайт?

  27. Влад

    сделал иконку в формате .ico на компе в браузере хром видать её ,а в поисковике яндекс нет,сделал давно время прошло порядочно.посмотрите что не так пожалуйста.

    • admin

      Скорее всего еще не проиндексировалась. Гугл видит картинку?

  28. Doctor0895

    Иконка на сайте — это целая проблема! Очень долго обновляется favicon.ico в браузере firefox; иногда даже не помогает чистка кеша сайта

  29. belaleksey

    Здравствуйте. Обновил иконку сайта, она отображается в браузере, слева от названия, но не отображается в поисковиках. Поисковые системы долго индексируют изменения? Интересует Yandex

    • admin

      Здравствуйте. За неделю должны проиндексироваться изменения.

  30. кошка

    А если фавикон в той же папке что и индекс? то есть все в одной папке?

    • admin

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

  31. Александр

    Спасибо за полезную и интересную информацию!

Оставить комментарий: