Фавиконы заменяют значок земного шара в адресной строке.
Кредит изображения: r0mu / iStock / Getty Images
Фавикон - это творческий и практичный способ добавить тонкой визуальной изюминки вашему сайту. Фавиконы - это небольшие изображения, которые веб-браузеры используют на вкладках страниц и в адресных строках. Они отображают логотип или изображение, связанное с веб-сайтом, которое действует как визуальный идентификатор бренда рядом с заголовком или URL-адресом. Фавиконы являются особенно полезными идентификаторами сайтов при просмотре с вкладками, потому что доступное текстовое пространство, используемое для заголовков страниц, уменьшается почти до нуля, когда пользователь открывает больше вкладок.
Шаг 1
Создайте значок, который хотите использовать в программе редактирования фотографий или графики. Вы можете взять существующий логотип или изображение, связанное с вашим сайтом или брендом, и настроить его в соответствии со стандартами favicon. Фавиконы всегда имеют квадратные размеры и имеют максимальный поддерживаемый размер 256 на 256 пикселей. Обрежьте и измените размер изображения, чтобы оно поместилось в квадрате размером 256 на 256 пикселей, если вы собираетесь использовать упаковщик значков для поддержки нескольких размеров. Если вы собираетесь создать только одну версию, выберите размер 16 на 16 пикселей.
Видео дня
Шаг 2
Экспортируйте изображение значка как файл изображения PNG из программы графического дизайна. PNG - это стандартный формат изображений W3C для значков. Некоторые браузеры могут отображать файлы JPG в виде значков, но стандарт официально не поддерживается. Кроме того, программы-упаковщики значков могут не работать с изображениями в других форматах. Фавиконы также поддерживают файлы GIF и ICO.
Шаг 3
Упакуйте экспортированный файл PNG в файл ICO с помощью программы-конвертера ICO. Программа-конвертер значков обрабатывает значок PNG, форматирует его для нескольких различных широко поддерживаемых размеров значков и встраивает их в один файл. Файлы ICO содержат значки с более высоким разрешением, чем 16 на 16 пикселей для устройств, которые их поддерживают.
Шаг 4
Войдите в службу хостинга своего веб-сайта и загрузите файл PNG или ICO на медиа-сервер вашего веб-сайта. Скопируйте URL загруженного файла; он понадобится вам, чтобы прикрепить значок к сайту.
Шаг 5
Откройте программу редактирования вашего сайта и добавьте следующий код, измененный указанным URL-адресом файла favicon, в раздел вашего сайта.
Для файлов PNG:
Для файлов ICO:
Если вы не используете сайт под управлением CMS или не включаете раздел на основе файлов, вам нужно будет добавить код на каждую страницу, на которой вы хотите разместить значок. Значок появляется после сохранения и обновления страниц сайта.
Подсказка
Программы редактирования фотографий, такие как Photoshop и Corel Draw, хорошо подходят для создания и форматирования значков. В качестве альтернативы вы можете использовать бесплатные программы, такие как Paint.net и Pixlr.
Предупреждение
Некоторые браузеры автоматически связывают файл изображения, расположенный в каталоге / favicon, как значок favicon; однако организация W3C не одобряет эту практику, потому что это не общепринятый стандарт и противоречит принципам веб-архитектуры. Кроме того, многие службы веб-хостинга и системы CMS не позволяют пользователю размещать мультимедийный контент вне каталогов мультимедийных файлов, что делает эту практику невозможной.
