Как добавить значок html

Иконка-ссылка в 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.

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

Ну, во-первых, надо убедиться, что icon/favicon.ico — верный путь до иконки. Ну если все в порядке, то значит браузер виноват, т.е. кэш. Бывало такое. Но попробуй обмануть, в обоих случаях помогает, так как код страницы меняется.

или так (задать абсолютный путь)

Отслеживать
ответ дан 4 ноя 2012 в 17:07
4,278 1 1 золотой знак 25 25 серебряных знаков 33 33 бронзовых знака

У вас какой сервер? Если апач, то кинте favicon.ico в корень сайта и будет вам счастье.

Отслеживать
ответ дан 4 ноя 2012 в 17:06
5,109 11 11 золотых знаков 49 49 серебряных знаков 97 97 бронзовых знаков

У меня denwer стоит, так я когда иконку загрузил, сколько не бился, так и не появилась. Появилась через дня три — неделю. Вот так вот, время — лучший помощник)

5 ноя 2012 в 17:48
Отслеживать
ответ дан 21 янв 2019 в 15:30
Alexander Kartsev Alexander Kartsev
185 7 7 бронзовых знаков
Как писал комментатор снизу: «Очччень своевременный ответ».
21 янв 2019 в 15:33

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

Отслеживать
ответ дан 16 апр 2019 в 4:45
lazyproger lazyproger
1,067 9 9 серебряных знаков 13 13 бронзовых знаков

Я всегда вставляю следующим образом (обычно ложу в корень сайта, туда же куда и index.html или index.php:

Многие поисковики и браузеры, сами ищут эту иконку в корне сайта по имени favicon

В вашем случае код должен быть таким (если вы указываете относительный путь):

Да я использую две строки с разными rel=»» атрибутами. Так сложилось исторически из-за браузеров и их «перетягиваний одеяла»

А еще иконка может не показываться, если у неё неверно указан формат. Например сделать иконку в ФШ и сохранить её как .ico почему то не всегда срабатывает. Я делаю иконки в ФШ, сохраняю как jpg а потом программой IcoFX конвертирую их в .ico уже несколько лет так и все отлично работает.

HTML Иконка

Иконка — это небольшое изображение, отображаемое рядом с заголовком страницы на вкладке браузера.

Как добавить иконку в HTML

Вы можете использовать любое изображение, которое вам нравится, в качестве своего значка. Вы также можете создать свою собственную иконку на таких сайтах, как https://www.favicon.cc.

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

Изображение значка отображается слева от заголовка страницы на вкладке браузера, вот так:

Чтобы добавить иконку на свой веб-сайт, либо сохраните изображение вашего значка в корневом каталоге вашего веб-сервера, либо создайте в корневом каталоге папку с именем images и сохраните изображение вашего значка в этой папке. Общее название изображения фавиконки — «favicon.ico».

Далее, добавьте элемент в свой файл «index.html» после элемент , например:

Пример

Это заголовок

This is a paragraph.

Теперь сохраните файл «index.html» и перезагрузите его в своем браузере. На вкладке вашего браузера теперь должно отображаться изображение вашего значка слева от заголовка страницы.

Поддержка файла favicon

В следующей таблице показана поддержка формата файла для изображения favicon:

Браузер	ICO	PNG	GIF	JPEG	SVG
Edge	Да	Да	Да	Да	Да
Chrome	Да	Да	Да	Да	Да
Firefox	Да	Да	Да	Да	Да
Opera	Да	Да	Да	Да	Да
Safari	Да	Да	Да	Да	Да

Краткое содержание главы

• Используйте элемент HTML для вставки значка

HTML link

Тег	Описание
	Определяет связь между документом и внешним ресурсом

Для получения полного списка всех доступных HTML тегов Справочник HTML Тегов.