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


Как добавить иконку сайта в адресную строку браузера?

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

Отображение иконки в строке браузера

Чтобы установить подобную «фичу», необходимо нарисовать изображение размером 16х16 пикселов и сохранить его в формате ICO в корне сайта под именем favicon.ico.

Adobe Photoshop не понимает формат ICO и не сохраняет в нем рисунки, так что для этой цели требуется дополнительный плагин.

Для работы плагина файл необходимо распаковать и сохранить в папке Plug-Ins\File Formats. По умолчанию программа Photoshop CS под Windows устанавливается в папке c:\Program Files\Adobe\Photoshop CS. Тогда полный путь для файла плагина будет c:\Program Files\Adobe\Photoshop CS\Plug-Ins\File Formats.

Размещение плагина для сохранения файлов в формате ICO

После добавления плагина, при сохранении рисунка в списке доступных форматов появляется новый пункт «Windows Icon».

Тип файла для сохранения иконки

Остается сделать желаемую иконку 16х16 пикселов и сохранить ее под именем favicon.ico в корне сайта. Браузер автоматически ищет этот файл и добавляет его в адресную строку, а также закладки.

Файл не обязательно должен располагаться в корне сайта, но тогда следует указать браузеру, где он находится. Это делается через тег <link>, как показано ниже.

<head> <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon"> </head>

Атрибут href задает расположение и имя файла.

Формат рисунка не обязательно должен быть ICO, также допускается использование GIF и PNG. При этом необходимо сменить значение атрибута type на image/gif или image/png, в зависимости от типа изображения.

<head> <link rel="shortcut icon" href="/images/favicon.png" type="image/png"> </head>

html - Как добавить значок вкладки браузера (фавикон) для веб-сайта?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании

Загрузка…

    .Учебное пособие по

    Иконкам



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

    Чтобы вставить значок, добавьте имя класса значка к любому встроенному элементу HTML.

    Элементы и широко используются для добавления иконы.

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


    Font Awesome 5 иконок

    Чтобы использовать значки Free Font Awesome 5, перейдите по ссылке fontawesome.com и войдите в систему, чтобы получить код для использования на своих веб-страницах.

    Узнайте больше о том, как начать работу с Font Awesome, в нашем Font Awesome 5 глава.

    Примечание: Скачивание или установка не требуется!

    Пример




    yourcode .js ">






    Попробуй сам "

    Font Awesome 4 иконки

    Чтобы использовать значки Font Awesome 4, добавьте следующую строку в раздел своей HTML-страницы:

    Примечание: Скачивание или установка не требуется!

    Пример










    Попробуй сам "

    Bootstrap 3 иконки

    Чтобы использовать глификоны Bootstrap 3, добавьте следующую строку в раздел своей HTML-страницы:

    Примечание: Скачивание или установка не требуется!

    Пример










    Попробуй сам "

    Примечание: Глификоны не поддерживаются в Bootstrap 4.

    Для получения дополнительной информации о Bootstrap 3 и Glyphicons посетите наш учебник по Bootstrap 3.


    Google Иконки

    Чтобы использовать значки Google, добавьте следующую строку в раздел своей HTML-страницы:

    Примечание: Скачивание или установка не требуется!

    Пример





    облако
    избранное
    вложение
    компьютер
    трафик


    Попробуй сам "

    Чтобы просмотреть полный список ВСЕХ значков (font awesome, bootstrap и google), посетите Ссылка на значок.



    .

    Добавление значка на статическую HTML-страницу

    Переполнение стека
    1. Около
    2. Товары
    3. Для команд
    1. Переполнение стека Общественные вопросы и ответы
    2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
    3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
    4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
    5. Реклама Обратитесь к разработчикам и технологам со всего мира
    6. О компании
    .

    Как создать панель значков


    Узнайте, как создавать панели значков с помощью CSS.



    Как создать панель значков

    Шаг 1) Добавьте HTML:

    Пример









    Шаг 2) Добавьте CSS:

    Вертикальный пример

    .панель значков {
    ширина: 90 пикселей; / * Устанавливаем конкретную ширину * /
    цвет фона: # 555; / * Темно-серый фон * /
    }

    . Icon-bar a {
    дисплей: блок; / * Сделаем так, чтобы ссылки отображались друг под другом вместо бок о бок * /
    выравнивание текста: по центру; / * Выровнять текст по центру * /
    отступ: 16 пикселей; / * Добавляем отступы * /
    transition: all 0.3s easy; / * Добавляем переход для эффектов наведения * /
    цвет белый; / * Белый цвет текста * /
    font-size: 36px; / * Увеличенный размер шрифта * /
    }

    .панель значков a: hover {
    background-color: # 000; / * Добавляем наведение цвет * /
    }

    .active {
    background-color: # 4CAF50; / * Добавляем активный / текущий цвет * /
    }

    Попробуй сам "

    Горизонтальный пример

    .icon-bar {
    ширина: 100%; / * На всю ширину * /
    background-color: # 555; / * Темно-серый фон * /
    перелив: авто; / * Переполнение из-за поплавка * /
    }

    .icon-bar a {
    плыть налево; / * Размещение ссылок рядом * /
    text-align: центр; / * Выровнять текст по центру * /
    ширина: 20%; / * Равная ширина (5 иконок по 20% ширины каждая = 100%) * /
    padding: 12px 0; / * Некоторые отступы сверху и снизу * / переход
    : все 0.3с легкость; / * Добавляем переход для эффектов наведения * /
    color: white; / * Белый цвет текста * /
    размер шрифта: 36 пикселей; / * Увеличенный размер шрифта * /
    }

    .icon-bar a: hover {
    цвет фона: # 000; / * Добавляем цвет при наведении * /
    }

    .active {
    цвет фона: # 4CAF50; / * Добавляем активный / текущий цвет * /
    }

    Попробуй сам "

    Связанные страницы

    Совет: Перейдите к нашему руководству CSS Navbar Tutorial, чтобы узнать больше о панелях навигации.

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



    .

    Смотрите также