Содержание

Как создать фавикон для сайта. Пошаговая инструкция от А до Я

Vasyl Holiney

Обновлено

Loading…

Содержание:
1.Что такое фавикон?
2.Почему фавикон важен?
3.Как создать фавикон?
4.Как установить фавикон на сайт?

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

Идеальный пример — фавикон сайта. Знаете ли вы, что такое фавикон? Эффективно ли вы его используете?

Что такое фавикон?

Для тех, кто не знает, что такое фавикон, дадим небольшую справку, которая позволит войти в курс дела. Фавикон – это небольшая иконка размером 16х16 или 32х32 пикселей, содержащая, как правило, логотип, первую букву бренда или характерное изображение, отражающее тип бизнеса или тематику сайта.

Почему фавикон важен?

Фавикон выполняет следующие функции:
— Брендинг.
— Идентификация сайта пользователем (удобство использования).
— Придает сайту профессиональный вид.

Остановимся более подробно на основных преимуществах использования фавиконов.

Узнаваемость бренда

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

Доверие

Пользователи, как правило, судят о продавцах товаров и услуг в Интернете на основании того, насколько профессионально сделан их сайт. Небрежность в виде отсутствия фавикона (поисковые системы отображают сайт без фавикона иконкой пустого документа) легко может привести к потере доверия, особенно, в сравнении с конкурентами.

Повторные посещения

Известно, что люди лучше реагируют на изображение, чем на текст. Давайте представим, что посетитель вашего сайта торопился, когда впервые посетил его, и решил добавить его в закладки, чтобы вернуться позже. Допустим, этот человек впоследствии решает снова посетить ваш сайт, для чего обращается к своим закладкам. Вам повезло, если у вас есть узнаваемый фавикон, такой, как заметная и уникальная буква G у Google, так пользователь найдёт вас. Если фавикона нет, вас могут даже удалить из списка закладок.

Экономит время пользователя

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

Преимущества для SEO

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

Как создать фавикон?

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

Для этого следуйте пошаговой инструкции:

Шаг 1. Зайдите на Logaster и нажмите «Создать логотип»

Шаг 2. Создайте логотип

Logaster – это онлайн-генератор логотипов, поэтому для создания фавикона вам нужно сначала создать логотип. На основании вашего логотипа, Logaster предложит именно те фавиконы, которые вам нужны. Но не беспокойтесь, это не отнимет много времени и сил.

Шаг 3. Выберите понравившийся логотип

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

Как выбрать правильный дизайн?

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

Обратите внимание на иконку, именно ее чаще всего используют в качестве фавикона. Если нужно выбрать другой цвет или шрифт, вы можете отредактировать эти элементы дизайна (шрифт, цвет, текст) на 3 шаге создания логотипа. Как редактировать логотип, вы можете узнать здесь.

Шаг 5. Создайте и скачайте дизайн фавикона

На странице бренда выберите “Фавикон”.

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

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

Шаг 6. Скачайте фавикон

Вы можете скачать фавикон совершенно бесплатно в формате PNG и ICO.

Где я могу использовать фавикон?

Вы можете использовать фавикон:

— на сайте;
— мобильных устройствах. Пользователь может добавить фавикон на домашний экран своего устройства (нечто вроде закладки) — Android, IOS, Windows Phone и т.п;
— программах и приложениях для РC/Mac.

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

После того, как вы получили фавикон, его установка на сервер займет не больше пары минут и выполняется в два этапа. Для этого вам потребуется доступ к корневому каталогу вашего сайта и текстовый редактор, чтобы изменить HTML-код сайта.

Шаг 1.
Вам необходимо загрузить файл favicon.ico на сервер. Чтобы это сделать, вам нужно скачать и установить ftp клиент, например, FileZilla.

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

Шаг 2.
Теперь вам нужно отредактировать HTML-страницу вашего сайта, чтобы помочь браузерам находить изображение вашего фавикона. При открытом окне FTP, найдите и скачайте с сервера файл index.html или header.php.

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

Откройте файл index.html в текстовом редакторе — блокнот, Notepad++, Sublime Text.

Если ваш сайт содержит чистый HTML, вставьте специальный код в область HEAD файла index.html.

Если вы используете WordPress, вставьте приведенный ниже код в область HEAD файла header.php.

Сделав это, загрузите файл обратно туда, где вы его взяли. Готово! Перезагрузите страницу вашего сайта, чтобы увидеть фавикон.

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

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

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

Обновлено

Posted inHow To, Общее

Фавикон сайта — что это такое? Как разместить Favicon.ico на сайт?

1013 Время чтения: 5 мин 23.08.2018

Что такое favicon (фавикон)?

Фавикон (в переводе с английского FAVorite ICON — «значок для избранного») — миниатюрное изображение, выполненное в формате ico. Он виден как в поисковой выдачи, так и при открытии самого сайта, а именно: в верхней части браузера (смотрите на картинку). Favicon является миниатюрным изображением, которое относится к числу основополагающих составляющих любого интернет-ресурса. Если в 2006 году сайты в большинстве своем работали без прикрепленных фавиконов, то сегодняшние веб-сайты невозможно представить без них. Конечно, остались проекты, запущенные без favicon, но в 2017 году это единичные случаи, найти которые очень сложно, так как сами поисковики в 95% случая не пропускают их в свой ТОП по высокочастотным запросам.

Предназначение favicon:

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

Где демонстрируется favicon (фавикон):

  • В поисковой выдачи — когда пользователь вводит в поиске поисковой системы какой-либо запрос, он в 90% случаях видит как названия страниц сайтов, так и их индивидуальные favicon.
  • В верхней части браузера — переходя на какую-либо страницу сайта, в верхней части браузера, пользователь всегда наблюдает картинку, под которой подразумевается favicon. Именно она в какой-то степени позволяет не ошибиться с веб-ресурсом при большом скопе открытых в браузере вкладок.
  • В закладках/истории браузера
    — современные версии браузеров демонстрируют в своей истории и закладках не только названия сайтов и их страниц, но и favicon.
  • На экране приложений в смартфоне — favicon отображаются не только в браузере и поисковой выдачи, но и на экранах смартфонов. Так если, при сохранении сайта в качестве приложения в своем смартфоне (что сегодня является нормой), пользователь вместе с его названием будет видеть favicon. Это в свою очередь облегчает сортировку интересных сайтов.
  • На внутреннем домашнем столе компьютера — когда пользователь сохраняет сайт на рабочем столе, он создает иконку, представляющую собой какое-либо изображение, под которым подразумевается favicon.

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

Размер фавикона

Favicon — миниатюрная иконка, которая имеет квадратную форму. Ее размер в большинстве своем равен 8х8, 16х16, 32х32, 64х64 и 128х128 пикселей. Именно поэтому возникает сложность при перекодировании объемных картинок в формат ico, ведь подчас в такого рода изображениях присутствует более 1280 пикселей, что сильно портит внешний вид конечной ico картинки, превращая ее в квадрат со всевозможными красками.

Где взять favicon?

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

  • Скачанный из интернета favicon. Основным преимуществом является то, что такой фавикон полностью бесплатен. Вторым же достоинством стоит считать то, что в качестве такого фавикона может выступать любое изображение, главное правило: перекодировать его в формат ico. Но бесплатность не несет в себе ничего хорошего, все скаченные из интернета фавиконы являются собственностью их авторов, и в 99% случаях они присутствуют на других сайтах, что лишает их какой-либо уникальности.
    Например, в Европе и Соединенных Штатах Америки нередки случаи, когда владельцев сайтов привлекали к уголовной ответственности за кражу favicon (нарушение авторских прав).
  • Созданный самостоятельно favicon. Создать фавикон самостоятельно сегодня может даже школьник. Для этого потребуется лишь воспользоваться возможностями, которые предоставляются специально разработанными для этих целей онлайн-генераторами иконок (icon) в формате ico. Основным преимуществом данного метода является то, что в качестве favicon может выступать логотип компании/фирмы/организации, перекодированный с помощью генератора фавиконов в формат ico.
  • Заказанный у специалиста favicon. Разумеется, фрилансеры и компании, ориентирующиеся на создании фавиконов используют доступные в открытом доступе всем пользователям интернета российские и иностранные генераторы и редакторы изображений в формате ico. Хотя при этом, профессиональный фавикон всегда будет стоять выше того, который пользователь сможет создать самостоятельно.

Генераторы фавиконов:

  • https://www.favicon.cc — один из самых первых онлайн-генераторов фавиконов, используя его пользователь сможет не только перекодировать картинку из классических изобразительных форматов в ico (например, логотип своей компании), но и создать свою иконку, которая хорошо будет выглядеть как при поисковой выдачи в Яндексе и Google, так и адресной панели браузера.
  • https://www.favicongenerator.com — минималистический сервис, облегчающий генерацию фавиконов и упрощающий процесс редактирования изображений в формате JPG в ico. Результат моментально демонстрирует в специально отведенном окошке.
  • https://www.genfavicon.com — этот сервис достаточно прост в понимании, так как создание фавикон проходит в три этапа, а именно: выбор файла в формате JPEG, GIF, PNG на компьютере; выбор конечного размера изображения и повсеместное его перекодирование в формат ico. Учтите, что изображение должно иметь квадратную основу.

Генераторы фавиконов с нуля:

  • https://antifavicon.com
  • https://favicon-generator.org
  • https://favicon.ru
  • https://www.favicon.cc
  • https://www.degraeve.com/favicon

Коллекции фавиконов:

  • https://www.iconj.com/gallery.php — коллекция фавиконов, насчитывающая свыше 10000 иконок.
  • https://www.audit4web.ru/info/favicon/ — коллекция с фавиконами для сайта, в базе которой хранится более 20000 изображений в формате icon (ico).
  • https://www.favicon.cc/?action=icon_list&order_by_rating=1 — генератор фавиконов и галерея анимированных и статичных иконок
  • https://www.favicon.co.uk/gallery.php — генератор фавиконов для сайта и блога, а также каталог статичных и анимированных картинок.
  • https://thefavicongallery.
    com
    — многообещающая веб-коллекция изображений в формате ico, доступных для бесплатного скачивания.
  • https://findicons.com — самый масштабный сток на просторах российского и иностранного интернета с изображениями в формате icon (ico).

Как разместить фавикон на сайте?

Для размещения Вам потребуется лишь доступ к серверу. Формат фавикон: ICO (рекомендуемый), GIF, JPEG, PNG, BMP.

1. Разместите favicon в корневую папку сайта.
2. Добавьте в HTML-код главной страницы сайта, в элемент , ссылку на размещенный файл.
… …

Как сделать иконку (фавикон) для сайта — пошаговая инструкция

Сделать фавикон для своего сайта я решил не случайно. В бизнесе не выигрывают посредственности, залог вашего успеха – это умение быть уникальным и выделяться среди других. И наш сайт не исключение. Уникальные статьи, уникальные картинки, уникальный дизайн — все это способы выделиться среди конкурентов и получить больше посетителей на сайт. Еще одним элементом, способным отличить ваш сайт от других, будет уникальная иконка вашего сайта — favicon.ico.

Содержание:

  1. Что такое фавикон?
  2. Зачем сайту фавикон?
  3. Как нарисовать иконку самостоятельно?
  4. Как сделать favicon.ico из картинки?
  5. Как установить фавикон на сайт?
  6. Как сделать иконку запоминающейся?

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

Что такое фавикон?

Если вы еще не знаете, что это такое, то посмотрите в верхнюю часть вашего браузера, туда, где находятся закладки открытых вами сайтов, вы увидите следующую картинку:

Значки, которые вы видите рядом с названием сайта – это и есть favicon. Кроме закладок в браузере, фавикон понимают некоторые поисковики, например, в результатах поисковой выдачи Яндекса, возле сайта, имеющего favicon будет отображаться соответствующий значок.

Удивительно, но такие иконки имеют не все сайты, а среди тех, у которых они есть, большинство значков стандартные, вшитые в какую либо общедоступную систему управления сайтом, типа WordPress, или в тему оформления. На картинке видно, что владелец сайт на 17 позиции поленился создать favicon.

Размер фавикона 16 на 16 пикселей. Картинку можно сделать соответствующего размера или, сначала сделать большую, а потом сжать ее. И тот и другой способ приемлем.

Зачем сайту фавикон?

У использования favicon для сайта есть много полезных преимуществ, но я бы выделил два:

  • Во-первых, ваш сайт лучше запоминается. И люди, нашедшие в первый раз полезный контент, в следующий раз в поиске выберут снова ваш ресурс по запомнившейся картинке. Это работает на создание брэнда и повышению узнаваемости.
  • Во-вторых, в результатах поисковой выдачи, сайты имеющие фавикон, интуитивно притягивают больше посетителей, чем их соседи и конкуренты без иконок. Зачастую, этот элемент дает больше пользы, чем правильно написанные статьи.

Как нарисовать фавикон самостоятельно

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

Не забудьте поделиться ссылкой на этот урок в твиттере, фэйсбук и других социалках, если он вам был полезен — вам не трудно, а мне будет приятно 🙂

Итак, создать картинку favicon.ico для сайта у нас получилось, ее нужно скачать.

Как сделать иконку из картинки?

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

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

Перейдите на iconizer.net и в строчку для поиска введите ключевое слово или фразу, которая характеризует или описывает тематику вашего блога. Например, WordPress или продвижение, раскрутка, заработок. Только, вводимое вами ключевое слово, должно быть написано английском языке. Если возникнут проблемы с переводом, то воспользуйтесь переводчиком Яндекс или Google. После ввода нажмите кнопку «Search».

Результаты будут выглядеть следующим образом:

Теперь вам остается определиться с подходящей картинкой и щелкнуть по ней так, что она открылась в другом окне с панелью настроек.

Советую сделать настройки с точно такими же параметрами, которые показаны на изображении, чтобы избежать лишних проблем. И уже после этого нажать на «Generate Icon» и далее «Download».

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

Полученный файл favicon. ico нужно поместить в корневой каталог вашего сайта.

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

В моем браузере Хром фавикон подопытного сайта www.tb1000tur.ru, появился сразу, а вот в “Мозиле” пришлось подождать. Что касается Яндекса, то там процесс распознавания иконки сравним с процессом индексации страниц сайта – может затянуться и на пару месяцев.

Для ускорения индексации можно прописать между тегами <head></head> вашего сайта следующую строчку:

<link rel="icon" href="http://tb1000tur.ru/favicon.ico" type="image/x-icon">

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

Как сделать favicon более запоминающимся?

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

Совет номер раз. Старайтесь сделать изображение понятным и соответствующим тематике вашего сайта. Если сайт о путешествиях, как я приводил пример выше, то изображение пальмы будет в тему. В том случае, когда картинку под нужную вам тему подобрать сложно — используйте буквы, как это делают Youtube или поисковая система Яндекс.

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

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

шаблонов веб-сайтов Ico | ThemeForest

Цена указана в долларах США без учета налогов

биткойн 297

криптовалюта 261

ико 245

блокчейн 217

крипто 154

обмен валюты 152

ико агентство 146

криптотрейдинг 125

добыча 125

ико консалтинг 109

ико шаблон 102

цифровая валюта 94

ико посадка 93

бизнес 86

советник по криптовалюте 77

инвестиции в криптовалюту 69

обмен 68

финансы 67

монета валюта 66

инвестиции 56

эфириум 55

отзывчивый 50

запускать 48

посадка биткойнов 47

сайт ico 47

криптовалюта 46

валюта 45

корпоративный 44

целевая страница 41

жетон 41

Нет продаж 17

Низкий 3

Середина 151

Высокая 251

Лучшие продавцы 12

Показать все 434

1 звезда и выше 93

2 звезды и выше 91

3 звезды и выше 89

4 звезды и выше 85

Любая дата 434

В прошлом году 78

В прошлом месяце 8

На прошлой неделе 1

В последний день 1

Все версии программного обеспечения 434

переключатель#переключатель» >❯ Вордпресс 75

WordPress 6. 0.x 50 WordPress 5.9.x 54 WordPress 5.8.x 57 WordPress 5.7.x 53 WordPress 5.6.x 51 WordPress 5.5.x 46 WordPress 5.4.x 41 WordPress 5.3.x 40 WordPress 5.2.x 41 WordPress 5.1.x 40 WordPress 5.0.x 38 Вордпресс 4.9.Икс 30 WordPress 4.8.x 8 WordPress 4.7.x 8 WordPress 4.6.1 6 Вордпресс 4.6 6 WordPress 4.5.x 6 WordPress 4. 5.2 6 WordPress 4.5.1 6 Вордпресс 4.5 6 WordPress 4.4.2 4 WordPress 4.4.1 4 Вордпресс 4.4 4 WordPress 4.3.1 2 Вордпресс 4.3 1 Вордпресс 4.2 1 Вордпресс 4.1 1 Вордпресс 4.0 1

переключатель#переключатель» >❯ Adobe 76

Adobe XD CC 8 Adobe Фотошоп СС 30 Adobe CS4 3 Adobe CS6 6 AdobeXD 8 Adobe CS3 8 Adobe CS 8 Adobe CS5 13 Adobe Photoshop 30

переключатель#переключатель» >❯ Джумла 2

Джумла 4. 0.х 1 Джумла 3.9.х 1 Джумла 3.10.x 1

переключатель#переключатель» >❯ Муза 5

Муза CC 2018.0.x 3 Муза CC 2017.0.x 2 Муза CC 5

Эскиз 14

переключатель#переключатель» >❯ OpenCart 1

Опенкарт 3.0.3.х 1 Опенкарт 3.0.2.х 1 Опенкарт 3.0.1.х 1 Опенкарт 3.0.0.x 1

Фигма 14

Призрак 1

Начальная загрузка 225

WPML 54

WooCommerce 45

Конструктор страниц WPBakery 29

Элементор 24

РеактJS 18

Календарь событий 10

Элементор Про 8

Календарь событий Pro 8

bbPress 8

визуальный композитор 7

Фейсбук 5

Гравитационные формы 5

Простые цифровые загрузки 3

AngularJS 2

Угловой 1

Редактор блоков 1

VirtueMart 1

WP EasyCart 1

434 Предметы

  • Термин: «ико»

Очистить все

Добавить в корзину

Cryptoking — Биткойн и

ICO Тема
  • Биткойн, ICO, Криптовалюта Тема WordPress
  • Биткойн Криптовалюта, Целевая страница ICO
  • Конструктор страниц — установка в один клик Биткойн

Добавить в корзину

ICO — HTML5-шаблон Crypto BlockChain
  • Агентство ICO Block Chain, Бизнес, крипто
  • Bootstrap 4, Отзывчивый, Современный стиль
  • предложение криптовалюты, криптовалюта

Добавить в корзину

Как найти и удалить вредоносное ПО в файлах Favicon (.

ico)

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

Другие симптомы могут включать:

  • Предупреждения «Этот сайт может быть взломан»
  • Странные перенаправления на спам-сайты
  • Внесение в черный список Google, Bing и другими поисковыми органами
  • Папки со случайными именами, содержащие спам-файлы и большие карты сайта спама

Если вы испытываете эти симптомы или обнаружили файлы .ico , разбросанные по всему вашему веб-сайту, и вы не уверены, что это такое, то вы попали в нужное место.

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

Содержание:

  • Что такое файл favicon (.ico)?
  • Как злоумышленники используют фавиконы в своих вредоносных программах?
  • Каковы симптомы вредоносного ПО в файлах .ico?
  • Как я могу обнаружить вредоносное ПО favicon на моем сайте?
  • Как удалить вредоносное ПО favicon или .ico?

Что такое файл фавикона (.ico)?

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

Эти маленькие файлы очень распространены. Большинство веб-сайтов размером от 16 × 16 до 512 × 512 используют фавиконы для настройки и брендинга. Вы можете найти значок веб-сайта на вкладках браузера, в закладках, результатах истории и на панелях инструментов.

К сожалению, эти безобидные файлы значков также используются злоумышленниками в своих вредоносных программах (точнее, вредоносных файлов, просто использующих расширение .ico). Давайте рассмотрим некоторые распространенные сценарии.

Как злоумышленники используют фавиконы в своих вредоносных программах?

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

По умолчанию файлы .ico не являются исполняемыми и обычно содержат изображение фавикона сайта, поэтому большинство владельцев веб-сайтов не ожидают найти вредоносное ПО, скрытое в содержимом файлов. Это именно то, что некоторые злоумышленники используют, чтобы предотвратить обнаружение и избежать дальнейшего изучения.

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

Создание новых файлов

.ico на взломанных сайтах

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

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

Вредоносная программа PHP обнаружена во вредоносном фавиконе, который перенаправляет на спам-сайты

Злоумышленники помещают свои вредоносные файлы favicon в разные каталоги (вместо корневых каталогов или каталогов изображений) на скомпрометированном веб-сайте. Поскольку операторы PHP include , include_once , require и require_once не заботятся о расширении файла, это позволяет хакеру легко вызывать содержимое файла вредоносного изображения и использовать его в своих вредоносных программах. .

Известно, что в некоторых случаях атаки нацелены на index.php и wp-config.php для включения вредоносных файлов .ico, поскольку они гарантированно загружают вредоносную полезную нагрузку.

PHP-скрипт включает вредоносный файл .ico

В приведенном выше примере мы видим, что злоумышленники включили вредоносный файл .ico (находящийся в фиктивном каталоге) в основной файл index.php WordPress, используя базовую маскировку:

 @ включить "/home/REDACTED/REDACTED.com/sdqzlig/cache/.2c96f399.ico";
 

Использование уязвимостей подключаемых модулей для загрузки вредоносных файлов .ico

Большинство подключаемых модулей содержат функции безопасности, которые ограничивают типы файлов, которые можно загружать на веб-сайт, чтобы предотвратить внедрение кода. Ограничивая возможность подключаемого модуля загружать файлы PHP или HTML на сайт, разработчики могут ограничивать атаки, которые могут доставлять вредоносную полезную нагрузку на сайт жертвы.

Но поскольку фавиконы рассматриваются как относительно безопасные файлы значков, их иногда упускают из виду при разработке плагинов, и злоумышленники могут загрузить свой вредоносный файл . ico , а затем использовать другую уязвимость для его выполнения. незащищенный 9Панели администратора 0223 wp-admin также являются распространенным вектором атаки.

Сокрытие скиммеров кредитных карт

Вредоносные перенаправления являются наиболее распространенным примером вредоносного ПО .ico , но мы видели, как злоумышленники используют этот тип файлов и для других целей. В предыдущем посте мы обнаружили вредоносное ПО для скимминга кредитных карт в среде WooCommerce, которое скрывало полезную нагрузку в фавиконе:

. раскрывается в более удобном для человека формате:

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

Каковы симптомы вредоносного ПО в файлах .ico?

Некоторые из наиболее распространенных признаков вредоносного ПО, обнаруженного в фавиконах, включают:

  • Странные перенаправления на спам или другие нежелательные домены
  • Неожиданный, незнакомый и странно расположенный favicon или . ico файлы
  • Предупреждения Google о возможном взломе вашего веб-сайта
  • Черный список поисковых систем
  • Предупреждения от антивирусных программ
  • Папки со случайными именами, содержащие спам-файлы и большие карты сайта спама

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

  • Украденная информация о кредитной карте из-за похитителей кредитных карт
  • Злонамеренные пользователи-администраторы
  • SEO и фармацевтический спам

Как я могу обнаружить вредоносное ПО favicon на своем сайте?

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

Шаг 1. Сканирование с помощью SiteCheck

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

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

Чтобы просканировать ваш сайт с помощью SiteCheck:

  1. Перейдите на https://sitecheck.sucuri.net/
  2. Введите URL-адрес вашего домена и нажмите Сканировать веб-сайт .
  3. Проверьте результаты.

Если на стороне клиента не обнаружено вредоносного ПО, вы получите отчет, аналогичный приведенному ниже.

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

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

Шаг 2. Проверьте свой отчет о прозрачности Google

Компания Google предлагает отчет о состоянии сайта безопасного просмотра в рамках своих обязательств по сканированию и выявлению небезопасных веб-сайтов.

Чтобы проверить результаты сканирования Google Transparency:

  1. Перейдите к https://transparencyreport.google.com/safe-browsing/search
  2. Введите URL вашего домена и нажмите Введите .
  3. Проверьте результаты.

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

Шаг 3: Используйте плагин безопасности

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

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

Шаг 4. Используйте сканер на стороне сервера и мониторинг целостности файлов

Одним из наиболее важных аспектов безопасности веб-сайта является мониторинг целостности файлов. Злоумышленники постоянно создают новые вредоносные программы, поэтому даже простая модификация файлов может быть признаком компрометации. Использование ежедневного сканера файлов на стороне сервера, который регистрирует изменения файлов и выдает предупреждения об известном вредоносном содержимом, является важным аспектом обеспечения безопасности веб-сайта.

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

Как удалить с сайта вредоносное ПО favicon или .ico?

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

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

В зависимости от используемой вами CMS вы можете обратиться к одному из наших обширных руководств для получения пошаговых инструкций по выявлению и удалению вредоносных программ:

  • Как очистить взломанный сайт WordPress
  • Как очистить взломанный сайт Drupal
  • Как очистить взломанную Joomla! сайт
  • Как очистить взломанный сайт Magento

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

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

Если вы обнаружили на своем веб-сайте вредоносное ПО favicon или .ico , мы будем рады помочь очистить зараженный сайт.

Создание значка избранного (favicon.ico) для вашего сайта

Перейти к основному содержаниюПерейти к навигацииПоискСправка

Главная > Статьи > Ресурсы для веб-мастеров > Создание фавиконов

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

На этой странице я расскажу вам, как я делал иконки избранного на разных страницах моего сайта. На этом снимке экрана моей домашней страницы в Internet Explorer значки обведены красным:

Снимок экрана со значком избранного в адресной строке и списком избранного в Internet Explorer

Что такое favicon.

ico?

Это изобретение Microsoft. Internet Explorer будет искать его, когда кто-то посещает ваш сайт. Если он есть, он будет отображаться в виде значка в адресной строке с вашим URL-адресом. Если его там нет, браузер показывает стандартное изображение IE в виде листа бумаги с буквой «е» на нем. Он также будет отображаться вместе с заголовком вашей веб-страницы в списке избранного. Посетители могут перетащить значок из адресной строки на свой рабочий стол, чтобы там тоже была ссылка на ваш сайт, и логотип используется там в двойном размере.

Favicon.ico теперь также распознается Netscape.

Как его сделать?

  1. Создайте файл изображения. Он должен быть 16×16 пикселей, хотя IE также масштабирует значок 32×32 на лету. Я использовал бесплатный Irfanview, чтобы изменить размер изображения и преобразовать его в формат ICO.
  2. Загрузите его в корень вашего сервера как favicon.ico. Так и должно быть, но это не всегда так работает.
  3. Итак, включите этот код на свою веб-страницу между тегами и: sean.co.uk/favicon.ico"> Но ссылка на собственную иконку, очевидно. Когда вы ссылаетесь на свой значок таким образом, вы можете дать ему другое имя favicon.ico и можете иметь множество разных значков избранного для разных страниц вашего сайта, ссылаясь на разные значки с каждой страницы. Я создал разные значки для нескольких разделов своего сайта, как показано на скриншоте выше. Вам необходимо включить соответствующий код LINK REL на каждую веб-страницу вашего сайта, поэтому включение его в шаблон может значительно облегчить вашу жизнь.

Как сделать значок для iPod Touch или iPhone?

Браузер Safari в iPod Touch и iPhone позволяет пользователям добавлять в закладки сайты, которые отображаются в виде ярлыков в интерфейсе, как показано на фотографии справа. На жаргоне Apple они называются «закладками веб-клипов».

Чтобы настроить его для своего сайта, необходимо создать файл изображения размером 57×57 пикселей и сохранить его в формате PNG. Затем загрузите его в корень вашего веб-сайта (где хранится ваша веб-страница по умолчанию, например index.htm) с именем файла apple-touch-icon.png. iPod Touch или iPhone наложат на него стеклянную накладку, чтобы он выглядел как значок Apple.

Если это не работает или если вы хотите иметь разные значки для разных страниц, вы можете добавить ссылку на значок, аналогично тому, как вы ссылаетесь на обычный значок:

…где customicon.png — это имя файла вашего пользовательского значка, включая путь к нему, если необходимо.

Кредиты

© Шон МакМанус. Все права защищены.

Посетите сайт www.sean.co.uk, чтобы получить бесплатные главы из книг Шона по программированию (включая Mission Python, Scratch Programming in Easy Steps и Coder Academy) и многое другое!

Откройте для себя мои последние книги

100 лучших советов: Microsoft Excel

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

  • Подробнее

Программирование с нуля IES

Эта книга, теперь полностью обновленная для Scratch 3, проведет вас от основ языка Scratch к глубинам его более продвинутых функций. Отличный способ начать программировать.

  • Подробнее

Миссионерский питон

Создайте космическую приключенческую игру в этой книге по программированию на Python, изданной No Starch Press.

  • Подробнее

крутых скретч-проектов в простых шагах

Узнайте, как создавать 3D-игры, создавать лабиринты, создавать драм-машину, создавать игры с мультяшными животными и многое другое!

  • Подробнее

Raspberry Pi для чайников

Настройте свой Raspberry Pi, а затем научитесь использовать с ним командную строку Linux, Scratch, Python, Sonic Pi, Minecraft и электронные проекты.

Автор записи

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *