Html иконка в закладке

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

Для того чтобы добавить иконку сайта на вкладке, нужно использовать тег со значением атрибута rel равным «shortcut icon» и атрибут href указывающий на путь к изображению.

  rel="shortcut icon" href="path/to/icon.png" />  

В этом примере, мы добавляем иконку с путем «path/to/icon.png». Важно, чтобы путь был указан правильно и иконка была доступна по этому пути.

Чтобы добавить иконку для MS Edge, нужно добавить следующие теги внутри тега :

 name="msapplication-TileColor" content="#ffffff" />  name="msapplication-TileImage" content="path/to/ms-icon-144x144.png" />  name="theme-color" content="#ffffff" /> 

Здесь мы указываем цвет плитки приложения для MS Edge в атрибуте content тега с именем msapplication-TileColor . Также мы указываем путь к иконке для MS Edge в атрибуте content тега с именем msapplication-TileImage .

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

Чтобы добавить иконку для IOS, нужно добавить следующие теги внутри тега :

 rel="apple-touch-icon" sizes="180x180" href="path/to/apple-touch-icon.png" />  name="apple-mobile-web-app-capable" content="yes" />  name="apple-mobile-web-app-status-bar-style" content="black" /> 

Здесь мы указываем путь к иконке для IOS в атрибуте href тега . Также мы указываем размеры иконки в атрибуте sizes . Для IOS рекомендуется использовать размер 180×180.

Атрибуты name и content тега определяют поведение веб-приложения на IOS. В данном случае мы указываем, что веб-приложение может быть запущено на IOS и что стиль статус-бара должен быть черным.

Источник

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

Наверняка вы часто видели на других сайтах, что во вкладке рядом с названием сайта находиться маленькая иконка? Обычно там располагается логотип компании. Это привлекает внимание и придает больший авторитет вашему ресурсу. Именно поэтому её и стоить добавить на свой сайт. Ниже я покажу как. Если у вас пока нет иконки — можете попробовать нарисовать тут.

Обычная верстка (HTML)

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

Выше был пример для изображения в формате png. Можно и использовать другие форматы. Например, gif или ico. Для этого нужно заменить значения атрибута type на image/gif или image/x-icon соответственно.

WordPress

Установить иконку во вкладке сайта на WordPress ещё легче.

1. Для начала войдите на сайт с админа. Далее переходите на главную страницу сайта. Тут вверху вы увидите такую кнопку:

2. Нажав на неё, вы увидите меню, в котором нужно нажать, на указанный пункт.

3. В низу данного пункта, вы увидите кнопку «Выберите иконку сайта», кликнув на которую, вы сможете выбрать favicon для своего сайта.

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

Full Stack разработчик, Frontend: Vue.js (2,3) + VueX + Vue Router, Backend: Node.js + Express.js. Раньше работал с РНР, WordPress, написал несколько проектов на Laravel. Люблю помогать людям изучать что-то новое)

Источник

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

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

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

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

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

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

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

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

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

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

Формат

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

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

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

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

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

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

Размер

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

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

Как сделать иконку для сайта 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.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.

Источник