Коллекция фавиконов: Коллекция favicon.ico (фавикон) на Favicon.by

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

1219 Время чтения: 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

#Маркетинг

Favicon — иконка сайта, в переводе «значок для избранного» (FAVorite ICON). Обычно Favicon сайта отображает логотип компании, первую букву ее названия или какое-либо изображение, характеризующее тематику/направленность сайта.

Где можно встретить Favicon и для чего он нужен

Фавикон можно увидеть:

• на открытой вкладке в браузере около названия страницы или сайта;
• в браузерной истории;
• в панели закладок;
• в панели «Избранное»;
• в мобильной и обычной выдаче поисковых систем.

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

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

Доступные форматы и основные параметры Favicon

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

Самый известный, но уже немного устаревший формат Favicon — ICO. Плюсы этого формата заключаются в том, что в одном файле может одновременно храниться сразу несколько иконок разного размера.

Размеры — второй важный параметр для Favicon. Ранее иконки сайтов могли иметь размеры лишь 16 на 16 пикселей. А современные браузеры поддерживают изображения размерами 32 на 32 пикселя.

Для создания Favicon в интернете есть множество онлайн-сервисов — генераторов. Иконка для сайта может быть разработана в каком-либо графическом редакторе.

Поддержка браузерами

Ранее браузеры поддерживали исключительно ICO-формат, но сегодня веб-мастера могут использовать более широкий набор форматов Favicon:

• png;
• svg;
• gif;
• jpeg.

Исключение — браузер Internet Explorer 10 версии и более ранних. Он поддерживает исключительно формат ICO.

Все остальные современные браузеры (по типу Google Chrome, Mozilla Firefox и т. д.) могут работать с анимированными Фавикон формата png. И такое решение позволяет владельцам сайтов еще сильнее выделять свои ресурсы среди конкурентных.

Анимированные png-иконки сайтов отличаются высоким качеством изображения, которое не страдает ни в мобильном, ни в десктопном браузере. Основной недостаток иконок формата svg, gif, jpeg заключается в том, что не каждый браузер их поддерживает.

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

Как добавить фавикон на свой сайт

Фавикон — это графический изображение (значок), связанное с определенной веб-страницей и/или веб-сайтом. сайт. Многие последние пользовательские агенты (например, графические браузеры и программы чтения новостей) отображают их как визуальное напоминание о веб-сайте. в адресной строке или на вкладках. В википедии есть статья о favicons [FAVICON-WIKIPEDIA].

Чтобы добавить фавиконку на свой веб-сайт, вам потребуется как изображение, так и метод указания того, что изображение должно использоваться в качестве фавиконки. Этот документ объясняет метод, предпочитаемый W3C для указания фавикон. Существует еще один распространенный метод, который показан ниже. с объяснением того, почему этот метод несовместим с некоторыми принципы веб-архитектуры. Оба метода применимы только к HTML и XHTML, одно из обсуждаемых ограничений ниже.

В этом документе подробно не обсуждается, как создать значок сайта. изображение. Однако формат выбранного вами изображения должен быть 16×16. пикселей или 32×32 пикселей с использованием 8-битных или 24-битных цветов. формат изображения должен быть одним из PNG (файл стандарт W3C), GIF или ICO.

Метод 1 (предпочтительный): использование значения атрибута

rel определенный в профиле

Первый подход к указанию фавикона заключается в использовании

rel значение атрибута «значок» и определить, что означает значение через профиль; профили обсуждаются более подробно ниже. В этом примере HTML 4.01 фавикон, идентифицированный через URI http://example.com/myicon.png как фавикон:

 

 profile="http://www.w3.org/2005/10/profile"  >
  <ссылка отн = "значок"
      тип = "изображение/png"
      href="http://example.com/myicon.png"> 
[…]

[…]
 

Версия XHTML 1.0 очень похожа:

 
  w3.org/1999/xhtml"
      xml: lang="en-US"
      lang="en-US">
 profile="http://www.w3.org/2005/10/profile"  >
  <ссылка отн = "значок"
      тип = "изображение/png"
      href="/где-то/myicon.png" /> 
[…]

[…]
 

Способ 2 (не рекомендуется): размещение значка на предопределенном URI

Второй метод указания значка основывается на использовании предопределенный URI для идентификации изображения: «/favicon», который относится к корень сервера. Этот метод работает, потому что некоторые браузеры запрограммирован на поиск фавиконов с использованием этого URI. Этот подход несовместимы с некоторыми принципами веб-архитектуры и в настоящее время обсуждается группой технической архитектуры W3C (TAG) в качестве их выдачи siteData-36. Подводя итог этой проблеме: веб-архитектура разрешает менеджерам сайтов управлять своим пространством URI (для данного доменного имени), как они видят соответствовать. Соглашения, которые не представляют согласия сообщества и которые уменьшить параметры, доступные менеджеру сайта, не масштабируются и могут привести к конфликту (поскольку общеизвестного списка этих предопределенные URI). Одно практическое соображение иллюстрирует проблему: многие пользователи имеют веб-сайты, даже если у них нет собственных доменное имя. Эти пользователи не могут указывать фавиконы, используя второй метод, если они не могут писать в корень сервера. Однако они могут использовать первый способ указать фавикон, так как он более гибкий и не запретить менеджеру сайта использовать один значок значка в одном месте на сайте.

Есть несколько других известных посягательств на пространство URI, включая файл «robots.txt» и местонахождение P3P-конфиденциальности политика. Группа технической архитектуры изучает альтернативы которые не затрагивают пространство URI без лицензии.

Использование профилей для определения таких терминов, как «значок»

Грубо говоря, профиль — это определение набора условия. В идеале профиль включает как машиночитаемую информацию, и удобочитаемая информация. В HTML 4.01 и XHTML 1.0 несколько атрибуты, такие как rel атрибут не имеет предопределенного набора ценности. Вместо этого автор может предоставить значения в соответствии с потребностями и затем используйте профиль, чтобы объяснить, что означают значения. В нашем случае мы рекомендовали авторам использовать значение «значок» и профиль, который объясняет, что «когда мы говорим значок, мы имеем в виду «это значок сайта».

В методе 1 выше мы используем атрибут rel с СВЯЗЬ элемент и выбираем профиль с атрибутом профиль в элементе HEAD.

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

Ограничения

Описанные выше подходы имеют несколько ограничений. включая предпочтительный метод (именно поэтому TAG продолжает работать по вопросу):

• Подходы работают только в HTML или XHTML
• Предпочтительный подход связывает значок с HTML-документом, не собрание документов (т.е. сайт)
• Предлагаемый профиль для определения значения «значок» не является общепризнанный стандарт, что означает, что могут быть проблемы с функциональной совместимостью на практике.
• Стандарт отсутствует (по крайней мере, определенный в HTML 4.01) для машиночитаемых профилей, которые позволить браузеру узнать, что «это означает, что изображение является фавиконом». Таким образом, браузер должен быть запрограммирован заранее, чтобы распознать это конкретное значение отн. . Для получения дополнительной информации об использовании профилей в HTML и XHTML см. GRDDL [ГРДДЛ].

Ссылки

FAVICON-WIKIPEDIA

Фавикон , Википедия, Доступно по адресу http://en.wikipedia.org/wiki/Фавикон.

ГРДДЛ

Сбор Описания ресурсов из диалектов языков , D. Азаэль-Массье, Д. Коннолли, редакторы, представление команды W3C, 16 мая. 2005 г., http://www.w3.org/TeamSubmission/2005/SUBM-grddl-20050516/. Последняя версия доступно на http://www.w3.org/TeamSubmission/grddl/.

HTML401

HTML 4. 01 Спецификация , Д. Раггетт, А. Ле Хорс, И. Джейкобс, Редакторы, рекомендация W3C, 24 декабря 1999, http://www.w3.org/TR/1999/REC-html401-19991224. Последняя версия доступно на http://www.w3.org/TR/html401.

ДАННЫЕ САЙТА-36

Улучшение метаданных веб-сайта в файлах robots.txt, w3c/p3p и favicon и т. д. , TAG, Доступно на http://www.w3.org/2001/tag/issues.html#siteData-36.

XHTML1

XHTML™ 1.0 Расширяемый язык гипертекстовой разметки (второе издание) , S. Пембертон, редактор Рекомендации W3C, 1 августа 2002 г., http://www.w3.org/TR/2002/REC-xhtml1-20020801. Последний версия доступна на http://www.w3.org/TR/xhtml1.

Благодарности

Следующие участники QA Interest Group и сотрудники W3C внесли значительный вклад в содержание этого документа: Доминик Азаэль-Массье (W3C), Крис Лилли (W3C) и Оливье Теро (W3C).

5 API-интерфейсы Favicon и список бесплатных альтернатив — апрель 2023 г.

Об API-интерфейсах favicon

API-интерфейс генератора favicon можно использовать для беспрепятственного создания, интеграции и извлечения значков.

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

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

Версии логотипов favicon включают в себя некоторые из самых узнаваемых изображений современной эпохи, включая красную кнопку воспроизведения YouTube, простую букву «W» из Wikipedia и замысловатую букву «T» из Нью-Йорка. раз.

Как работает API favicon?

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

Для кого именно фавиконки?

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

Почему так важны значки и API-интерфейсы значков?

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

Два основных варианта использования API-интерфейсов генератора фавиконов: 1) случаи, когда разработчику нужен интуитивно понятный способ ссылки на сайт с узнаваемым значком на сайте, над которым он работает, и 2) ситуации, когда разработчик хотел бы манипулировать фавикон.

Что можно ожидать от API favicon?

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

Есть ли примеры бесплатных API-интерфейсов favicon?

Grabicon API — это полностью бесплатный API, который позволяет разработчикам получать значки сторонних веб-сайтов с единой конечной точки. API-интерфейсы, связанные с Favicon, как с бесплатным, так и с платным уровнем, включают API RealFaviconGenerator, который создает значки как для мобильных приложений, так и для веб-сайтов и позволяет пользователям просматривать и анализировать значки. API Logoraisr позволяет пользователям обрабатывать значки для улучшения их качества, а API Favicon и API Favicon Finder позволяют извлекать значки favicon.

Лучшие API-интерфейсы Favicon

1. Favicon
2. Грабикон
3. Стек технологий
4. Поиск фавиконок
5. Генератор реальных фавиконок

Favicon API SDK

Все Favicon API поддерживаются и доступны на нескольких языках программирования для разработчиков и в SDK, включая:

1. Node.js
2. PHP
3. Питон
4. Рубин
5. Объектив-C
6. Java (Android)
7. С# (.