Фавикон сайта — что это такое? Как разместить Favicon.ico на сайт?
1166 Время чтения: 5 мин 23.08.2018
Что такое favicon (фавикон)?
Фавикон (в переводе с английского FAVorite ICON — «значок для избранного») — миниатюрное изображение, выполненное в формате ico. Он виден как в поисковой выдачи, так и при открытии самого сайта, а именно: в верхней части браузера (смотрите на картинку). Favicon является миниатюрным изображением, которое относится к числу основополагающих составляющих любого интернет-ресурса. Если в 2006 году сайты в большинстве своем работали без прикрепленных фавиконов, то сегодняшние веб-сайты невозможно представить без них. Конечно, остались проекты, запущенные без favicon, но в 2017 году это единичные случаи, найти которые очень сложно, так как сами поисковики в 95% случая не пропускают их в свой ТОП по высокочастотным запросам.
Предназначение favicon:
Основным предназначением favicon.
ico является привлечение внимания интернет-пользователя к сайту. Благодаря использованию фавиконов отдельно взятым интернет-проектам удается выделиться из общего перечня проектов, что в какой-то степени положительно сказывается на их рентабельность в массах.
Где демонстрируется favicon (фавикон):
- В поисковой выдачи — когда пользователь вводит в поиске поисковой системы какой-либо запрос, он в 90% случаях видит как названия страниц сайтов, так и их индивидуальные 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 PNG рисунок, картинки и пнг прозрачный для бесплатной загрузки
тропическое растение зеленый лист
кран капли
tongue faucet dragon head hand drawn faucet color faucet
Всемирный день воды с краном
red round save water faucet
faucet sink kitchen furniture cabinet
бочка пива
смеситель для раковины
нажмите значок вектор
dragon looking up february 2 haircut characters shaving faucet
dragon looked up february 2 cute kid illustration shaving faucet
вектор кран
другой кран бесшовные модели вектор
Нарисованная рукой иллюстрация общественного благосостояния розового крана
creative faucet hand painted faucet cartoon faucet faucet decoration
water house silhouette illustration save water illustration black faucet silhouette illustration
water saving faucet warning sign water
umbrella cleucet bat запрещено символ
подбор персонала поиск человеческие ресурсы люди плоский цвет ico
slash ico slash icon
химия химлаборатории образование резюме квартиру цвет мок лаборатория
подбор персонала поиск человеческие ресурсы люди плоский цвет ico
форма отчета о соглашении макет синяя пунктирная линия ico
приборная панель администратора монитор мониторинг обработки плоский цвет ico
турникеты контроля доступа подземный абстрактный плоский цвет ico
бизнес конференция конвенция презентация семинар в квартире мок
ico icon фруктовый значок автомобильный значок
соглашение
маятник качели привязанный шарик движения жирный и тонкая черная линия ico
патентное заключение решение суда закон аннотация плоский цвет ico
книга роман история теория квартиру цвет значок вектор мок писать
close close button icon ico
набор смайликов в медицинской маске ico emoji персонаж социальные медиа сообщение
Метеор значок набор больших плоских иконок в стиле длинной тени ico
Кампания Политическая политика Голосовать плоский цвет значок вектор ico
минусы документ бизнес ровная линия заполнена мок плюс плюсы
кампания политическая политика голосование жирная и тонкая черная линия ico
жест пальцем жесты рукой плоский цветной значок вектор ico
набор логотипов современная и креативная коллекция идей брендинга для бизнес компании простые логотипы минималистский абстрактный векторный дизайн иконка favicon фирменный стиль
набор логотипов современная и креативная коллекция идей брендинга для бизнес компании простые логотипы минималистский абстрактный векторный дизайн иконка favicon фирменный стиль
Набор иконок вектор тонкой линии ico биткойн
файл отчет накладная карта контрольный список синяя пунктирная линия ico
Мобильный ui Социальный адрес Видео Контакты Телефон Значок ico
sketch ico icons download
учитель образование презентация школа аннотация плоский цвет ico
банковская карта кредит платеж безопасная безопасность плоский цвет ico
зубчатые передачи установка бирюзовый выделить круг точка вектор ico
договор документ документ примечание отчет аннотация плоский цвет ico
инженерный проект инструменты мастерская обработка плоский цвет ico
png icon arrow ico icon icon download
ампер ампер метр электрическая энергия аннотация плоский цвет ico
луна ночь любовь романтическая ночь плоский цвет значок вектор ico
education icon ico app
блок схема блок схема данных база данных синяя пунктирная линия ico
инженерный проект инструменты мастерская обработка плоский цвет ico
украшение пасхальное яйцо яйцо плоский цветной значок вектор ico
adobe cc folder icon download png icon ico icon
железнодорожный билет станция абстрактный круг фон плоский цвет ico
Праздник середины осени электронной коммерции вектор значок ico
набор логотипов современная и креативная коллекция идей брендинга для бизнес компании простые логотипы минималистский абстрактный векторный дизайн иконка favicon фирменный стиль
джойстик беспроводной геймпад xbox бизнес плоская линия заполнена ico
напряжение энергии силовой трансформатор жирный и тонкая черная линия ico
найти в области людских ресурсов люди цвета ico квартиру набор поиск
ico биткойн вектор бесшовный фон
принтер печать печать образование плоский цветной значок вектор ico
здание рождественская церковь весна плоский цвет значок вектор ico
значок камеры набор больших плоских иконок в стиле длинной тени ico
значок камеры набор больших плоских иконок в стиле длинной тени ico
Генератор Favicon — Emoji to Favicon
Выберите один из сотен эмодзи, чтобы создать свой фавикон.
Изображения эмодзи из проекта Twemoji.
Emoji Favicons
Графика emoji взята из проекта с открытым исходным кодом Твемодзи. Авторские права на графику принадлежат Twitter, Inc и другим компаниям, 2020 г. участники. Графика лицензирована CC-BY 4.0. Вы должны просмотреть лицензию перед использованием в своем проекте.
Категории
деятельность животные и природа компонент флаги еда, напиток объекты люди и тело смайлики и эмоции символы путешествия и места
| Preview | Name | Category | ||
|---|---|---|---|---|
| alien | smileys & emotion | |||
| alien monster | smileys & emotion | |||
| anger symbol | smileys и эмоции | |||
| злое лицо | смайлики и эмоции | |||
| злое лицо с рогами | smileys & emotion | |||
| anguished face | smileys & emotion | |||
| anxious face with sweat | smileys & emotion | |||
| astonished face | smileys & emotion | |||
| сияющее лицо с улыбающимися глазами | смайлики и эмоции | |||
| бьющееся сердце | смайлики и эмоции | |||
| black heart | smileys & emotion | |||
| blue heart | smileys & emotion | |||
| bomb | smileys & emotion | |||
| broken heart | smileys & эмоции | |||
| коричневое сердце | смайлики и эмоции | |||
| кот со слезами радости | Smileys & Emotion | |||
| Кошка с кривой улыбкой | Смайты и эмоции | |||
| Clown Face | Smileys & Emoth | столкновение | смайлики и эмоции | |
| растерянное лицо | смайлики и эмоции | |||
| confused face | smileys & emotion | |||
| cowboy hat face | smileys & emotion | |||
| crying cat | smileys & emotion | |||
| crying face | smileys & emotion | |||
| мчаться | смайлики и эмоции | |||
| разочарованное лицо | смайлики и эмоции | |||
| disguised face | smileys & emotion | |||
| dizzy | smileys & emotion | |||
| dizzy face | smileys & emotion | |||
| downcast face with sweat | смайлики и эмоции | |||
| слюни | смайлики и эмоции | |||
| взрывающаяся голова | smileys & emotion | |||
| expressionless face | smileys & emotion | |||
| eye in speech bubble | smileys & emotion | |||
| face blowing a kiss | smileys & emotion | |||
| лицо смакует еду | смайлики и эмоции | |||
| лицо кричит от страха | смайлики и эмоции | |||
| face vomiting | smileys & emotion | |||
| face with hand over mouth | smileys & emotion | |||
| face with head bandage | smileys & emotion | |||
| лицо с медицинской маской | смайлики и эмоции | |||
| лицо с моноклем | смайлики и эмоции | |||
| face with open mouth | ||||
| face with raised eyebrow | smileys & emotion | |||
| face with rolling eyes | smileys & emotion | |||
| face with пар из носа | смайлики и эмоции | |||
| лицо с символами на губах | смайлики и эмоции | |||
| face with tears of joy | smileys & emotion | |||
| face with thermometer | smileys & emotion | |||
| face with tongue | smileys & emotion | |||
| face without mouth | смайлики и эмоции | |||
| испуганное лицо | смайлики и эмоции | |||
| покрасневшее лицо | smileys & emotion | |||
| frowning face | smileys & emotion | |||
| frowning face with open mouth | smileys & emotion | |||
| ghost | smileys & emotion | |||
| гоблин | смайлики и эмоции | |||
| зеленое сердце | смайлики и эмоции | |||
| grimacing face | smileys & emotion | |||
| grinning cat | smileys & emotion | |||
| grinning cat with smiling eyes | smileys & emotion | |||
| grinning face | smileys и эмоции | |||
| улыбающееся лицо с большими глазами | смайлики и эмоции | |||
| улыбающееся лицо с улыбающимися глазами | smileys & emotion | |||
| grinning face with sweat | smileys & emotion | |||
| grinning squinting face | smileys & emotion | |||
| growing heart | smileys & emotion | |||
| не слышишь злой обезьяны | смайлики и эмоции | |||
| сердечко украшение | смайлики и эмоции | |||
| heart exclamation | smileys & emotion | |||
| heart with arrow | smileys & emotion | |||
| heart with ribbon | smileys & emotion | |||
| hole | смайлики и эмоции | |||
| горячее лицо | смайлики и эмоции | |||
| обнимающее лицо | smileys & emotion | |||
| hundred points | smileys & emotion | |||
| hushed face | smileys & emotion | |||
| kiss mark | smileys & emotion | |||
| целующийся кот | смайлики и эмоции | |||
| целующееся лицо | смайлики и эмоции | |||
| kissing face with closed eyes | smileys & emotion | |||
| kissing face with smiling eyes | smileys & emotion | |||
| left speech bubble | smileys & emotion | |||
| loudly crying лицо | смайлики и эмоции | |||
| любовное письмо | смайлики и эмоции | |||
| лежащее лицо | smileys & emotion | |||
| money mouth face | smileys & emotion | |||
| nauseated face | smileys & emotion | |||
| nerd face | smileys & emotion | |||
| нейтральное лицо | смайлики и эмоции | |||
| людоед | смайлики и эмоции | |||
| orange heart | smileys & emotion | |||
| partying face | smileys & emotion | |||
| pensive face | smileys & emotion | |||
| persevering face | smileys & emotion | |||
| куча какашек | смайлики и эмоции | |||
| умоляющее лицо | смайлики и эмоции | |||
| pouting cat | smileys & emotion | |||
| pouting face | smileys & emotion | |||
| purple heart | smileys & emotion | |||
| red heart | smileys и эмоции | |||
| облегченное лицо | смайлики и эмоции | |||
| вращающиеся сердца | smileys & emotion | |||
| right anger bubble | smileys & emotion | |||
| robot | smileys & emotion | |||
| rolling on the floor laughing | smileys & emotion | |||
| грустное, но облегченное лицо | смайлики и эмоции | |||
| не вижу злой обезьяны | смайлики и эмоции | |||
| shushing face | smileys & emotion | |||
| skull | smileys & emotion | |||
| skull and crossbones | smileys & emotion | |||
| sleeping face | smileys и эмоции | |||
| сонное лицо | смайлики и эмоции | |||
| слегка нахмуренное лицо | smileys & emotion | |||
| slightly smiling face | smileys & emotion | |||
| smiling cat with heart eyes | smileys & emotion | |||
| smiling face | smileys & emotion | |||
| улыбающееся лицо с ореолом | смайлики и эмоции | |||
| улыбающееся лицо с глазами-сердечками | smileys & emotion | |||
| smiling face with hearts | smileys & emotion | |||
| smiling face with horns | smileys & emotion | |||
| smiling face with smiling eyes | smileys & emotion | |||
| улыбающееся лицо в солнечных очках | смайлики и эмоции | |||
| улыбающееся лицо со слезами | smileys & emotion | |||
| smirking face | smileys & emotion | |||
| sneezing face | smileys & emotion | |||
| sparkling heart | smileys & emotion | |||
| не говори злой обезьяны | смайлики и эмоции | |||
| речевой шар | смайлики и эмоции | |||
| squinting face with tongue | smileys & emotion | |||
| star struck | smileys & emotion | |||
| sweat droplets | smileys & emotion | |||
| thinking face | смайлики и эмоции | |||
| шар мыслей | смайлики и эмоции | |||
| усталое лицо | smileys & emotion | |||
| two hearts | smileys & emotion | |||
| unamused face | smileys & emotion | |||
| upside down face | smileys & emotion | |||
| усталый кот | смайлики и эмоции | |||
| усталое лицо | смайлики и эмоции | |||
| white heart | smileys & emotion | |||
| winking face | smileys & emotion | |||
| winking face with tongue | smileys & emotion | |||
| woozy face | smileys & emotion | |||
| взволнованное лицо | смайлики и эмоции | |||
| зевающее лицо | смайлики и эмоции | |||
| yellow heart | smileys & emotion | |||
| zany face | smileys & emotion | |||
| zipper mouth face | smileys & emotion | |||
| zzz | smileys и эмоции |
Добавить фавикон — Торговля | Динамика 365
Редактировать
Твиттер LinkedIn Фейсбук Электронная почта
- Статья
- 2 минуты на чтение
В этой статье объясняется, как добавить на сайт значок избранного.
Фавикон — это небольшой графический файл, который отображается на вкладке веб-браузера, в адресной строке, в истории просмотров, а также в закладках или избранном, среди прочего. Мы рекомендуем вам добавить значок фавикона на свой сайт, поскольку он представляет и укрепляет ваш бренд, а также помогает отличить ваш сайт от других сайтов, которые посещают ваши клиенты.
Несмотря на то, что вы можете добавить на свой сайт несколько значков избранного разных размеров и типов файлов, в этой статье показано, как добавить один значок фавикона. Однако тот же процесс и место используются для добавления дополнительных фавиконов.
Загрузите значок в коллекцию ресурсов вашего сайта
Чтобы загрузить значок в коллекцию ресурсов вашего сайта, выполните следующие действия.
На левой панели навигации выберите Медиатека .
На панели команд выберите Загрузить > Загрузить элементы мультимедиа .
В окне проводника перейдите к файлу изображения значка, который вы хотите загрузить, выберите его, а затем выберите Открыть .
В диалоговом окне Upload Media Item введите требуемый заголовок и замещающий текст.
Если вы хотите опубликовать изображение сразу после загрузки, установите флажок Публиковать элементы мультимедиа после загрузки .
Примечание
Если вы не установите флажок Публиковать элементы мультимедиа после загрузки , вы должны вернуться на страницу Элементы мультимедиа и опубликовать значок вручную позже.
Выберите OK .
На панели свойств справа скопируйте общедоступный URL-адрес фавикона. Вы будете использовать этот URL позже.
Создайте HTML-код для своего значка
Чтобы создать HTML-код для значка, используйте следующую строку HTML.
Для href замените Public_URL_for_your_favicon общедоступным URL-адресом, который вы скопировали ранее.
Создайте фрагмент, содержащий метатег для вашего фавикона
Чтобы создать фрагмент, содержащий метатег для вашего фавикона, выполните следующие действия.
- Перейдите к Фрагменты и выберите Новый .
- В Новый фрагмент выберите Metatags в качестве модуля, на котором основан фрагмент.
- Введите имя фрагмента и выберите OK .
- В дереве иерархии фрагментов выберите дочерний элемент Default metatags .
- На правой панели в разделе Метатеги выберите Добавить , а затем введите строку HTML, созданную ранее для значка фавикона.
- Выберите Завершите редактирование , а затем выберите Опубликовать для публикации фрагмента.
Добавьте фрагмент метатега в раздел заголовка HTML
Чтобы добавить фрагмент метатега в раздел заголовка HTML , выполните следующие действия.
- Перейдите к Templates , откройте шаблон для страниц, на которые вы хотите добавить значок, а затем выберите Edit .
- В дереве иерархии шаблонов нажмите кнопку с многоточием ( … ) справа от Контейнер заголовка HTML , а затем выберите Добавить фрагмент .
- В диалоговом окне Выбрать фрагмент выберите созданный ранее фрагмент метатега, а затем выберите OK .
- Выберите Завершить редактирование , а затем выберите Опубликовать , чтобы опубликовать шаблон.
Примечание
Если на вашем сайте используется более одного шаблона, вы должны добавить фрагмент метатегов ко всем из них.