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

что это, для чего нужен, форматы 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.

Что такое favicon: как создать и установить

Содержание

Многие пользователи интернета не знают, что такое фавикон, хотя регулярно сталкиваются с ним во время работы в сети. Слово favicon происходит от английского словосочетания favorite icon – избранная иконка или значок. Эта пиктограмма отображается во вкладках браузеров перед названием страницы (которое выводится с помощью тега title) и в качестве иконки в закладках.

Где можно увидеть favicon сайта?

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

Более подробно об иконке сайта

Содержание:

• Более подробно об иконке сайта
• Назначение favicon
• Способы создания favicon
• Добавление на сайт
• Ответы на популярные вопросы
• Заключение

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

Favicon – это отображаемая в открытой вкладке браузера, левее от названия открытой странички, пиктограмма, так называемый мини-логотип. Является своеобразной визитной карточкой ресурса, независимо от движка (CMS), на котором тот создан, установленной темы и используемого шаблона. Пиктограмму можно встретить на сайтах под управлением как популярных CMS, таких, как WordPress, Bitrix, Joomla, Drupal, так и на менее распространенных. Изображение имеет размеры 16×16 пикселей и зачастую хранится в формате ico.

Назначение favicon

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

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

Favicon в поисковой выдаче Яндекса

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

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

Все эти факторы могут повлиять на увеличение посещаемости страниц вашего сайта.

Способы создания favicon

Так как фавикон — это пиксельный графический файл, то и создать его можно таким же образом, как и обычное изображение в формате ico. Сделать фавиконы можно следующими способами:

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

Разберемся с каждым способом подробнее.

Галереи готовых значков

Интернет пестрит различными ресурсами, в том числе и узкоспециализированными. Одними из таких сайтов являются ресурсы, хранящие и постоянно пополняющие коллекцию созданных пользователями (а порой и роботами) иконок.

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

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

1. www.iconj.com/favicon-gallery-page1.html — содержит более 4 тысяч изображений, позволяет скачивать готовые решения необходимого размера в форматах ico и gif. После регистрации появится возможность добавления значков в избранное. Скопировав HTML-код, можно быстро вставить его в код своего сайта.

Добавление иконок в избранное на сайте ICON J

2. www.favicon.cc — большая коллекция значков, которые можно найти по дереву тегов или путем перелистывания страниц. Из функционала доступны загрузка в формате ico, online-редактирование оригинальной пиктограммы, конвертирование картинки в значок и просмотр новых/популярных файлов.

Сайт favicon.cc

3. www. freefavicon.com/freefavicons/objects — крупнейший тематический каталог, где можно отыскать и загрузить иконку. Файлы рассортированы по категориям для удобства выбора и названы согласно своему содержимому.

Категории для поиска фавикон на сайте freefavicon.com

Онлайн генераторы

При помощи специализированных сервисов нужную favicon можно создать самому за несколько минут.

1. Favicon.cc – редактор, который дарит возможность выбрать фон и пиксель за пикселем нарисовать рисунок при помощи кисти, поддерживающей прозрачность. Также на сайте можно преобразовать любой графический файл в фавикон с его последующим редактированием.

Создание с помощью онлайн-редактора Favicon.cc

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

Регистрация на сайте Logaster.ru

3. www.favicon-generator.org — простой сервис, создающий favicon из выбранного изображения без возможности его редактирования или обрезки.

Сервис favicon-generator.org

4. www.michurin.net/online-tools/favicon-editor.html — узконаправленный ресурс, где после загрузки картинки в jpeg, bmp или gif формате она будет уменьшена до 16 пикселей по обеим сторонам без сохранения пропорций, а число цветов уменьшится до 16 для минимизации размера файла на выходе. Дополнительно доступна функция модификации готовых ico.

Онлайн-редактор иконок favicon.ico

5. www.favicon.by и favicon.ru поддерживают рисование собственных пиктограмм и превращение области или целого изображения в фавикон. Есть инструменты заливки и пипетка.

Рисование собственных пиктограмм

6. www. favicomatic.com превратит загруженный графический файл в ico размером 16×16, загрузит его на ПК и сгенерирует HTML-код для вставки на сайт.

Фавикон генератор Favic-o-matic

7. www.antifavicon.com — генератор простых favicon с текстовыми надписями, в котором пользователь задает текст, выбирает цвет фона, букв и границы, и получает готовую иконку.

Генератор favicon с текстовыми надписями

Графические программы

При помощи IconFX, Axialis IconWorkshop и подобных графических редакторов можно легко создать иконку для любого портала, но лишь при условии владения пользователем базовыми навыками работы с подобными приложениями. Если вы работаете в Photoshop, загрузите для него расширение под названием ICOFormat, тем самым добавив поддержку импорта иконок в формате ico.

Расширение ICOFormat

Через IconFX и альтернативы, можно как нарисовать, так и конвертировать картинку или ее часть в иконку, отредактировав ее, выбрав цвет и размер.

Создание нового рисунка в IconFX

Добавление на сайт

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

<head>
...
<link rel="shortcut icon" ENGINE="image/x-icon" href="директория_хранения_файла/favicon.xxx">
...
</head>

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

Ответы на популярные вопросы

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

Делаем иконку из картинки или фото

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

На примере IcoFX это делается следующим образом:

1. Открываем редактор и перетаскиваем в его окно графический файл.
2. Выбираем вариант создания иконки из изображения.

Создания иконки из изображения

3. После редактирования сохраняем полученный ico-файл и загружаем его на сайт.

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

Делаем прозрачный фавикон

Известно, что среди распространенных графических форматов прозрачность поддерживается файлами с расширением png. В качестве исходника берем файл png и конвертируем его в фавикон с помощью Photoshop (установив перед этим плагин ICOFormat), иного графического редактора или онлайн-сервиса, поддерживающих прозрачный слой, например, Favicon.cc.

Как получить анимированную иконку

Создать анимированный favicon поможет специализированный сервис:

1. Переходим по ссылке favicon.
   htmlkit.com/favicon/.
2. Жмем «Обзор» и указываем путь к первому слайду (кадру) анимации.

Создание анимированного favicon

3. Кликаем по кнопке «Add another image», дабы добавить второй кадр и указываем желаемую картинку, и так со всем кадрами.
4. По окончании добавления слайдов щелкаем «Download FavIcon Package».

Скачивание FavIcon Package

Как скачать favicon?

Пиктограммы, как правило, лежат в открытом доступе. Простейший способ копирования фавиконки с чужого сайта заключается в переходе по адресу: www.google.com/s2/favicons?domain=1 или favicon.yandex.net/favicon/1, где единицу в обоих случаях заменяем на URL площадки.

Копирование фавиконки с другого сайта

Также помогает дописывание /favicon.ico в конце корня сайта, к примеру, www.youtube.com/favicon.ico.

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

Допишите /favicon.ico в конце названия сайта

Что делать если не отображается фавикон в Яндексе

Если в поисковике не визуализируется недавно добавленная пиктограмма, скорее всего проблема кроется в следующем:

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

Заключение

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

Автор статьи:

Олег Скрып

Руководитель компании ApollonGuru, ментор SEO-материалов vc. ru. В интернет-маркетинге с 2012 года. Люблю чтобы все было четко.

Коллекция иконок

| Документация Mendix

Последнее изменение: 20 апреля 2023 г.

1 Введение

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

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

2 Добавление коллекции значков

Чтобы добавить коллекцию значков, выполните следующие действия:

1. Щелкните правой кнопкой мыши модуль в App Explorer .
2. Выберите Добавить другое > Коллекция иконок .
3. Назовите свою коллекцию значков.

3 Действия с коллекциями значков

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

Некоторые действия можно применить к нескольким значкам. Вы можете выбрать все значки с помощью Ctrl + A или выберите несколько значков, нажав Ctrl или Shift

3.1 Импорт файла шрифта

Кнопка Импорт файла шрифта позволяет выбрать файл шрифта чтобы основать вашу иконку сбор на. Импортированным значкам будет присвоено имя на основе их кодов символов в файле шрифта. Это возможно, только поддерживается формат ttf .

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

3.2 Импорт данных значков

Кнопка Импорт данных значков позволяет вам пакетно импортировать имена и теги для ваших значков. Вы можете предоставить данные в виде текстового файла, файла .csv или даже вставить их прямо из буфера обмена. Единственное требование состоит в том, чтобы данные были в следующем формате и порядке:

 [Char_code];[Name];[Search_Tags (необязательно)]
[Char_code];[Имя];[Search_Tags (необязательно)]
...
 

Например, это может выглядеть так:

 F01C9;ab-тестирование;UX, исследования
F16E0;счеты;расчет
F1328;абджад-арабский;Алфавит, Язык
 

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

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

3.3 Настройка

Для вашей коллекции значков автоматически создается таблица стилей CSS. Кнопка Configure позволяет изменить настройки, влияющие на созданные классы CSS. Это не обязательно, но рекомендуется. Можно настроить два значения: класс коллекции и префикс.

3.3.1 Класс коллекции

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

Чтобы гарантировать, что класс коллекции является допустимым классом CSS, он должен начинаться с буквы или символа подчеркивания и может содержать только буквы, цифры, дефисы и символы подчеркивания.

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

3.3.2 Префикс

Префикс будет использоваться вместе с именем значка для создания уникального класса CSS для каждого значка в коллекции значков.

Чтобы убедиться, что префикс приводит к действительному классу CSS, он должен начинаться с буквы или символа подчеркивания и может содержать только буквы, цифры, дефисы и символы подчеркивания.

Если оставить это поле пустым, префикс будет сгенерирован на основе имени коллекции значков.

3.4 Удалить

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

При удалении значка он не удаляется из файла шрифта.

3.5 Find Usages

Расположенная в Find Results кнопка Find Usages отображает все места, где этот значок используется в вашем приложении.

4 Переименование и пометка значков

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

Имя значка будет использоваться для создания класса CSS. Чтобы гарантировать, что имя значка приводит к допустимому классу CSS, оно должно начинаться с буквы или символа подчеркивания и может содержать только буквы, цифры, дефисы или символы подчеркивания.

Два значка в одной коллекции не могут иметь одно и то же имя.

Теги позволяют определить список условий поиска, упрощающих поиск нужного значка. Иконке можно присвоить несколько тегов, введя их в виде списка, разделенного запятыми. В отличие от имен значков, два значка могут иметь одинаковые теги. Например, вы можете применить тег «звук» к значку отключения звука, а также к значку включения звука.

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

5 Расширенное использование

5.1 Непосредственное использование сгенерированных классов CSS

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

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

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

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

• Переименование значка изменяет класс CSS этого значка
• Изменение настроенного класса коллекции или префикса коллекции значков, включая удаление любой опции (это влияет на все значки в коллекции)
• Если класс коллекции или префикс явно не настроен, переименование коллекции значков или перемещение ее в другой модуль (это влияет на все значки в коллекции)

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

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

Обратная связь

Была ли эта страница полезной?

Рад слышать это! Благодарю за ваш ответ.

Жаль это слышать. Пожалуйста, расскажите нам, как мы можем улучшить.

Роскошный отель в центре Хьюстона, Техас

Перейти к основное содержание

Выберите язык

Найдите вдохновение в нашем неоклассическом отеле в Хьюстоне, штат Техас

Отель ICON, Autograph Collection — один из самых уникальных отелей в центре Хьюстона, штат Техас. Наша собственность имеет грандиозную неоклассическую архитектуру и 135 номеров, включая 18 люксов. Найдите наш отель, где разрешено размещение с домашними животными, в центре Хьюстона, штат Техас, рядом с деловыми, юридическими, развлекательными и спортивными районами города. Воспользуйтесь нашим бесплатным трансфером до центра города и высокоскоростным Wi-Fi. В отеле ICON также есть ультрасовременный круглосуточный фитнес-центр. Отдохните в просторной ванной комнате, отделанной плиткой, с тропическим душем, джакузи и антикварной ванной, доступной в каждом гостиничном номере и люксе. Наш роскошный отель в центре Хьюстона также предоставляет охраняемую крытую парковку за дополнительную плату. Поужинайте в отмеченном наградами ресторане и лаундже LINE & LARIAT, где ежедневно подают завтрак, обед, легкий полдник и ужин. Кроме того, отель ICON является одним из немногих отелей на 7,5-мильной линии METRORail, обеспечивающей быстрое сообщение с Техасским медицинским центром, а также стадионом и ареной Reliant. Сделайте отель ICON своим любимым местом для проживания в центре Техаса.

ПОЛИТИКА ОТЕЛЯ В ОТНОШЕНИИ ОГНЕСТОГО ОРУЖИЯ

В СООТВЕТСТВИИ С РАЗДЕЛОМ 30.06/30.07 УГОЛОВНОГО КОДЕКСА (ПРЕСТУПНОСТЬ ВЛАДЕЛЬЦА ЛИЦЕНЗИИ С СКРЫТЫМ РУКОВОДСТВОМ), ЛИЦО, ИМЕЮЩЕЕ ЛИЦЕНЗИЮ В СООТВЕТСТВИИ С ПОДРАЗДЕЛОМ H ГЛАВЫ 411 ПРАВИТЕЛЬСТВЕННОГО КОДЕКСА (РУКОВОДСТВО) ЛИЦЕНЗИОННОЕ ЗАКОНОДАТЕЛЬСТВО), НЕ МОЖЕТ ВХОДИТЬ НА ЭТУ СОБСТВЕННОСТЬ СО СКРЫТЫМ ИЛИ ОТКРЫТЫМ ОРУЖИЕМ

ОСОБЫЕ УДОБСТВА НА МЕСТЕ

Устойчивое развитие

Ресторан

Фитнес-центр

Конференц-зал

Бесплатный Wi-Fi

Бесплатный кофе/чай

Круглосуточный магазин

Химчистка

Обслуживание номеров

Звонки для пробуждения

Ежедневная уборка

Запрос на обслуживание

ЧТО ОЖИДАТЬ

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

Узнать больше

LINE & LARIAT

LINE & LARIAT прославляет современную техасскую кухню под влиянием близлежащего побережья Мексиканского залива и близлежащих ранчо

Исследовать

Бар L&L

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