Как сделать иконку ссылкой в html

Пишем URL, получаем бесплатную иконку

Сервис omg-img позволяет вставлять иконки вот так:

Чувствуете, к чему я клоню? Сделали вставление иконок не выходя из IDE. Просто пишете URL, параметры вроде цвета и стиля — мы отрендерим иконку и отдадим через хороший, годный CDN.

Вместо search можно написать любое название иконки:

• home
• sheep-on-bike
• trump

Выбрать можно любую иконку с сайта Icons8 или из приложения под Винду и Мак.

Если точного совпадения по имени не нашлось, мы отдадим что нашли. Часто угадывает: например, в примере выше иконки trump нет, есть donald trump. Но ведь нашлось.

Можно выбрать другой стиль

Всего стилей несколько:

Угадайте, какие самые популярные?

первый и последний

Вот тот же список со ссылками. Заходите и будьте как дома, обещаем не приставать:

• iOS icons
• Windows 10 icons
• Windows Metro icons
• Material Design Filled icons
• Android Ice Cream icons
• Flat Color
• Office
• Ultraviolet, Free Blue UI Icons
• Free Dotted Icons
• Gradient Line icons
• Dusk, Free Cute Color Icons

Можно покрасить

Можно указать размер

Ради такого случая Icons8 убрал бесплатное ограничение 100х100 пикселов и оставил только 512×512 (чтобы не положить сервер). Но ссылку все равно ставить нужно.

CDN

Все хостится на KeyCDN — он на хорошем счету. Для нас с вами все бесплатно — они большие молодцы и нас спонсируют. Так что можно использовать иконки в коммерческих проектах: все будет работать и не упадет.

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

Пинг 1 мс до Билайна, 18 мс — до Ульяновска. И даже до моего Буэнос-Айреса… доходит.

Вопрос из зала: так есть же уже Font Awesome, Material Icons?

Есть, и тоже с CDN, и тоже можно включать одним кодом. Но у них их очень мало, около 600 и 900 соответственно. А у нас 46,000, сами рисовали.

Кстати, если у вас Font Awesome, можете заменить на наши Line Awesome. Они, кажется, более сексапильные (по крайней мере, по нашей аналитике). Ну и Material у нас на 4200 иконок.

Идея

Вообще-то не наша, а microicon. Большое спасибо автору за идею.

Вопрос из зала: а зачем вы нужны?

У него 1327 опенсорсных иконок, а у нас — 46000 уникальных. Кстати, опенсорсные мы тоже выложили, 9000 штук.

Вопрос из зала: что, вставлять иконку не глядя?

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

Если вы используете WebStorm, PhpStorm и тому подобное, он при наведении показывает картинку.

Под Visual Studio Code есть плагины. Например, Image Preview.

Как помочь

• Поставьте на нас ссылку с сайта, где используете наши иконки. SEO — это наше все.
• Это не обязательно, но если не хотите ставить ссылку, можно купить платную лицензию
• Расскажите о нас соседу по этажу. Ну или зашарьте этот пост.
• Потестить поиск. Мы переписали алгоритм, должен быть хорошим и очень быстрым (до 1 мс + расходы на транспорт). Посмотреть всю выдачу (а не только первый результат), можно в черновой утилите.
• Потестить растеризацию. Если что-то съехало, вылезло за границы или размазалось, поправим.

Иконка-ссылка в HTML

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

Сперва пример HTML-кода, если иконка все же является обычной картинкой:

Как Вы видите, внутрь тега помещена картинка . Это самый простой и быстрый способ добавления обычной картинки на сайт, а семантически правильная вставка изображения описана здесь — «Как же все-таки правильно вставить картинку в HTML».

Что делать, если картинка в формате svg? Это вообще отдельная тема, и она тщательно описана здесь — «Как вставлять SVG-иконки в HTML — 5 способов и выбор наилучшего».

Лучше добавлять иконку именно через HTML. Но есть возможность привязать иконку к ссылке не через HTML, а через CSS. Делается это через CSS-свойство background в файле типа файл.css. Пример:

При этом нужно прописать для ссылки display: block; и указать размеры width и height.

Иконочный шрифт

Добавим ссылку иконку через иконочный шрифт на примере шрифта FontAwesome. Шрифт нужно сперва скачать в папку сайта. Потом подключить шрифт в теге строкой вида:

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

Далее использовать иконку в ссылке надо так:

Все иконки можно увидеть на этой странице — fontawesome.ru/all-icons.

Подключение иконки Font Awesome через CSS

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

Чтобы подключить иконку Font Awesome через CSS нужно в CSS-файле использовать код вида:

a:before

Здесь иконка добавлена через псевдокласс :before. В свойстве контент указывается код иконки. Код иконки можно взять на странице fontawesome.ru/all-icons. Нужно кликнуть правой кнопкой мышки на нужную иконку и посмотреть её псевдокласс :before. Смотрите картинку:

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

Этот сайт, как и все сайты, использует cookie. Продолжая использовать этот сайт, Вы даете свое согласие на обработку cookie.OK

Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.

Always Enabled

Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Analytics».
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category «Functional».
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category «Necessary».
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Performance».
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Functional

Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.

Performance

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.

Advertisement

Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.

Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.

Как создать фавиконку и подключить ее к сайту

Favicon (сокращение от Favorites Icon) — иконка с логотипом или первой буквой названия сайта, которая отображается на вкладках браузера, в списке закладок и в интерфейсе некоторых поисковых систем.

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

Так Favicon выглядят на вкладках в браузере Safari:

А вот так в поисковой выдаче Яндекса:

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

Вот, как это реализовано у Apple и Яндекса:

Далее разберемся, как сделать иконку сайта и подключить ее к нему.

Характеристики значков

Взять любую понравившуюся картинку и с ходу использовать ее как Favicon не получится. Надо соблюсти два несложных требования: выбрать подходящее расширение и размер.

Формат

Тут есть из чего выбирать:

• .ico (.icns в macOS) — своего рода стандарт, используется повсеместно.
• .png — более современный вариант, тоже широко распространен и поддерживается даже во многих старых браузерах.
• .svg — перспективный векторный формат с вариативным разрешением под нужды конкретной страницы. Настраивается через CSS.

.svg не поддерживается в старых браузерах для ПК и некоторых Android-браузерах

У .png поддержка заметно шире

Можно использовать и другие форматы. Какой-нибудь .jpeg или .gif. Проблема может возникнуть лишь в поддержке со стороны программного обеспечения клиента.

Из-за особенностей браузеров в разных ОС я бы рекомендовал выбрать .ico. Самый каноничный формат, с которым точно не ошибешься.

Размер

Здесь тоже есть некие стандарты, но они разнятся от системы к системе. Часто используются размеры:

• 16 на 16 точек
• 32 на 32
• 192 на 192
• 512 на 512

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

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Как сделать иконку для сайта HTML?

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

Рисуем Favicon в Sketch или Photoshop

Значок можно нарисовать там же, где рисуются и другие части интерфейса. Например, Photoshop или Sketch. Покажу, как это работает на примере Sketch:

1. Открываем редактор и рисуем иконку.
2. Потом выделяем нарисованный элемент и меняем разрешение в боковом меню.
3. Затем одновременно нажимаем клавиши Shift + Cmd + E.
4. После этого нажимаем на кнопку Export Selected…

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

Большинство редакторов не умеют экспортировать в .ico по умолчанию. Придется скачать сторонний плагин для Фотошопа или шаблон для Sketch.

Преобразуем готовое изображение в фавиконку

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

1. Открываем будущую иконку.
2. Меняем размер.
3. Указываем нужный размер и формат. Сохраняем.
4. Открываем меню «Файл» и нажимаем на пункт «Экспортировать…».
5. Указываем расширение .png.

Рисуем значок в браузере

Если нет Фотошопа или просто не нужен какой-то сложный дизайн, то можно на скорую руку нарисовать себе лого на сайте Favicon.cc. В этом случае все запредельно просто:

1. Рисуем любую картинку во встроенном редакторе.
2. А потом нажимаем на кнопку Download внизу.

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

В Favicon.cc можно сохранять рисунки только в расширении .ico. Имейте это в виду.

Конвертируем текст или эмоджи в значок

Есть вариант еще проще — сервис Favicon.io. На нем есть три конвертера: из картинки, из текста или из эмоджи в значок.

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

Но я попробую скачать иконку с эмоджи:

1. Нажимаю на соответствующий конвертер.
2. Кликаю по названию понравившегося смайлика.
3. А потом жму на кнопку Download.

Как подключить Favicon к сайту?

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

АТРИБУТ

ЗНАЧЕНИЕ

icon указывает на тип используемого ресурса.

Здесь указывается путь до файла. Можно ввести ссылку до сервера или внешнего каталога.

Тут указывается тип изображения. Например, image/png для картинок в формате .png, image/svg для .svg. или image/x-icon для .ico

Можно вписать несколько разных значков. Браузер все равно сам выберет подходящую иконку. Такой подход предлагается в Favicon.io.

Например, я скачал себе .ico с сайта. Затем делаю следующее:

1. Кидаю картинку в корневой каталог ресурса (туда же, где лежит index.html).
2. Потом открываю index.html и прописываю в head строчку .

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

Теперь вы знаете, как сделать иконку сайта на вкладке HTML. Рисуем картинку в .ico или .svg, кидаем ее в любое удобное место, а затем прописываем адрес с форматом в head.

Как сделать ссылку — одновременно и текст и картинку (иконку)?

Есть пункт меню, надо сделать так, чтобы при клике на любом его месте, в том числе и на иконке, открывалась соответствующая ссылка.
Можно, конечно, сделать по-простому, типа:
Link1,
объявив ссылку как display:block. Но встает вопрос: как отнесутся к такой ссылке поисковики? В смысле — не нарушит ли это тематичность ссылки — ведь рядом с анкором будет находиться изображение? Если же делать так:
Link1, то при нажатии на картинку перехода по ссылке не произойдет.
Или мне не заморачиваться и выбрать первый вариант? Как кто считает?

Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Sql SERVER как сохранить в базе картинку и текст одновременно
Привет, всем! У меня вопрос, я хотела загрузить тестовые вопросы на таблицу SQL Server 2008.

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

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

Сохранить текст и картинку одновременно
Как сохранить текст и картинку в delphi,чтоб потом при нажатии на кнопку выбирали что открыть и всё.

653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374

Сообщение было отмечено Htext как решение

Решение

Сообщение от Htext

как отнесутся к такой ссылке поисковики?
Не знаю как к этому отнесутся поисковики, но если вас это так волнует, можете задать ссылке

1 2 3 4 5 6 7 8 9

a{ display:block; padding-left:30px; height:30px; background-image:url('pic.jpg'); background-repeat:no-repeat; background-size:30px 30px; background-position:left top; }

356 / 117 / 20
Регистрация: 08.01.2015
Сообщений: 1,348
Записей в блоге: 1

Спасибо, я не знал, что так возможно. Но в итоге — почему-то перестает работать a:hover<>, а у меня там при помощи SCC другой фон задается — при наведении на ссылку (весь пункт меню окрашивается в другой цвет). Или, получается, для фона hover теперь надо прописать другой url, в котором будет содержаться картинка с этим самым другим цветом? Хотя, нет, все работает, там ошибка была.

Добавлено через 22 минуты
Только в url кавычки ненужны.

87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Как сделать ссылку на свой текст ?
Всем привет вообщем я делал так через 2 файла ну мне нужно все сделать в одном файле можно ли так.

Как в QtDesigner сделать на QToolBox иконки и текст одновременно ?
Салют. В дизайнере кидаю экшен на тулбар, могу задать текст этого экшена, всё ок, но если добавляю.

Как преобразовать ссылку на картинку в саму картинку с необходимыми атрибутами?
Здравствуйте, подскажите как реализовать следующее: к примеру вставляешь ссылку на изображение в.

HTML — Надо: вставить картинку в картинку, в эту картинку, ссылку в картинку
Вот схема моего сайта. http://s020.***********/i716/1404/8c/254516feacb3.jpg У меня пока что на.