Фавикон сайта — что это такое? Как разместить Favicon.ico на сайт?
1061 Время чтения: 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), обычно размером 16х16px или 32х32px, которая выводится во вкладке браузера перед названием сайта или любой его страницы. Фавикон придает индивидуальность сайту и узнаваемость в череде открытых вкладок браузера, а также имеет значение в плане SEO. Вы можете сделать фавикон онлайн с помощью онлайн генераторов или скачать готовые, выбрав из коллекции фавиконок или создать в фотошопе (нужен плагин).
Онлайн генераторы фавикон
Самым удобным способом при создании фавиконок, наверное будут онлайн генераторы фавикон, которые позволяют в считанные секунды получить готовый файл файл favicon.ico
ВАЖНО: Изображение которое станет прототипом фавикон, необходимо загружать квадратное.
То есть, если оригинальная картинка прямоугольная, то предварительно ее нужно вписать в квадрат, сохранить и далее использовать.
Favicon CC
Мой любимый генератор фавикон. Пользуюсь им периодически до сих пор. Простой, удобный, качественный.
Favicon BY
Генератор такой же как и Favicon CC, но на русском языке. Также присутствует предпросмотр готового результата.
Bestwebservice RU
Генератор фавикон позволяющий создать иконки в нескольких типовых размерах от 16 x 16 до 512 x 512px.
В качестве заготовок для фавиком, можно использовать графическую часть вашего логотипа (если он состоит из картинки и текста), обрезав и вписав в квадрат. Или же, можно взять тематическую иконку (тематика вашего сайта) в формате PNG на прозрачном фоне и залить бэкграунд главным цветом вашего сайта. Само собой иконка должна контрастировать при этом. Примеры готовых фавиконок, вы можете подсмотреть в Коллекциях фавикон.
Коллекции фавиконок
Ниже приедставлены онлайн каталоги с коллекциями фавиконок.
Посетив любой из них вы сможете бесплатно скачать готовые фавикон для последующего размещения на своем сайте.
Подобные коллекции могут пригодиться для временных сайтов: презентаций, лендингов, резюме и прочее. Для постоянных сайтов, следует все же устанавливать оригинальный или уникальный фавикон, чтобы сайт во всех своих проявлениях был неповторимым. Поисковые системы это приветствуют.
Вы можете уникализировать фавикон, изменив фон (бэкграунд) добавив преобладающий цвет из цветовой схемы вашего сайта. От этого выиграет и уникальность и стиль сайта.
Faviconka RU
Favicon BY
Icons8 RU
Создать фавикон самому в Photoshop
Также мы можем создать фавикон самостоятельно в Photoshop, однако в стандартной версии формат ico отсутствует в качестве сохраняемого файла. Поэтому прежде, нужно поискать в Интернет и установить Плагин ico для Photoshop. Но как вы понимаете, проще сделать фавикон онлайн.
Выводы
Чтобы сделать фавикон для своего веб проекта, достаточно обзавестить идеей — какой должна быть иконка, а все остальное можно сделать онлайн.
Времени при этом мы затратим минимально, а финансовых затрат, так и вообще, никаких не потребуется.
Предыдущая страница
Далее
Генератор 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 | |
| cat with wry smile | smileys & emotion | |
| clown face | smileys & emotion | |
| cold face | smileys & emotion | |
| столкновение | смайлики и эмоции | |
| растерянное лицо | смайлики и эмоции | |
| 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 | smileys & emotion | |
| face with raised eyebrow | smileys & emotion | |
| face with rolling eyes | smileys & emotion | |
| face with пар из носа | смайлики и эмоции | |
| лицо с символами на губах | смайлики и эмоции | |
| Лицо со слезами радости | Смайты и эмоции | |
| Лицо с термометром | Смайты и эмоции | |
| Face | ||
| FACE | ||
| FACE | ||
. | смайлики и эмоции | |
| испуганное лицо | смайлики и эмоции | |
| покрасневшее лицо | 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 и эмоции |
Коллекции иконок
Вы здесь: Главная / Бесплатные ресурсы / Коллекции иконок
| Лучшие графические ресурсы для мейкеров | Иконки и иллюстрации. | Бесплатные и платные |
| Шрифты Dingbat | Шрифты для создания значков. Увеличивайте по мере необходимости. | Бесплатно |
| Элементы Envato: Графика | Очень большой выбор иконок. См. значок фильтра слева. | Услуга подписки на все мультимедийные ресурсы с неограниченным количеством загрузок |
| Freebiesbug Icons | Цветные значки в формате PSD (при необходимости используйте инструмент преобразования PSD в JPG) | Бесплатно |
| Freepik | Хороший источник векторной графики, включая иконки. | Бесплатно, ссылка на сайт обязательна или платная, без указания авторства |
| Скачать бесплатный вектор | Множество наборов иконок разного качества. | Бесплатно |
| Glyphish | 50 четких значков для приложений | Бесплатно, ссылка на сайт обязательна |
| Иконки | 300 бесплатных светло-серых иконок | Бесплатные и платные |
| IconArchive | На этом сайте можно загрузить большой ассортимент иконок разного качества. Он загроможден, но его можно использовать. | Бесплатно |
| IconFinder | Поисковая система для поиска иконок. Узнайте, является ли значок лицензированным или бесплатным для использования, щелкнув вкладку «Информация». Здесь также есть ссылка на все иконки в наборе. | Бесплатные и платные иконки. |
| iconmnstr | Более 1500 простых черно-белых иконок. | Бесплатно. |
| Iconspedia | Еще одна хорошая коллекция. Когда вы найдете нужный значок, выберите его и щелкните предпочтительный размер в пикселях. | Бесплатно |
| istockphoto | Отличные наборы бесплатных векторных иконок, созданных дизайнерами-фрилансерами. Используйте «значок» в поисковом запросе для достижения наилучших результатов. Вам предоставляется исходный файл, чтобы вы могли изменить изображение. См. их лицензионные соглашения. | Оплата набором иконок |
| Noun Project | Известен огромной коллекцией иконок на любую тему. Оставить комментарий
|