Интернет и с чем его едят
Favicon
Favicon для сайта - это небольшой значок (фавиконка), соответствующая тематике ресурса, повышающая его узнаваемость.
Что такое фавикон и зачем он нужен
Примерами фавиконов для веб-ресурсов могут служить логотипы автомобильных брендов, размещаемых на капоте авто: у Шевроле это гастук-бабочка, у Шкоды - образ индейца со стрелой, у Ауди, “властелина колец” - четыре кольца, у Фольца - сплетение букв V и W и т.д.
Favicon отображается в поисковой выдаче Яндекса, на странице закладок и привязывается к веб-ресурсу при выборе, если пользователь добавляет веб-страницу в “Избранное”.
Зачем нужен фавикон и стоит ли вообще с ним заморачиваться?
Как известно, пользователи сети активнее реагируют на картинку, чем на текст. Кроме того, данный значок повысит узнаваемость вашего веб-ресурса, создаст дополнительное удобство для ваших посетителей и привлечет дополнительное внимание. Разве это плохо?
Как сделать favicon
Фавикон - это файл favicon.ico размером 16х16 pix или в 2 раза больше, который поддерживают все известные браузеры. Может быть анимационным (поддерживается только Firefox и Opera выше 7.0).
Может быть формата PNG и GIF, его поддерживают все новые браузеры, а также JPG - с данным расширением работают все новые браузеры, кроме IE.
Фавиконки типа SVG и APNG создавать не рекомендуется, так как они не будут видны в основных бразуерах.
Исходя из вышесказанного, фавикон - это обычный графический файл. Сделать его можно несколькими способами.
Создать самостоятельно в графическом редакторе.
Нарисовать при помощи интернет-сервисов типа favicon, а затем скачать.
Взять готовое изображение и также воспользоваться сервисом в Интернете, который при загрузке начальной картинки преобразует ее в фавиконку.
скачать готовый favicon из банка графических иконок, которых в Интернете очень много.
Но скачать или создать фавикон - это только первый шаг. Его необходимо установить на ваш сайт.
Загрузите файл на ваш веб-сайт (желательно, в его корневую папку). Как правило, браузерам теперь не нужно на него указывать, если файл имеет стандартное название и находится в корне. Но все же для явного указания на фавикон пропишите в <head> сайта следующие строки:
<link rel="icon" type="image/тип файла" href="путь от корня к фавикон" />
Для IE указываем shortcut icon (с конкретным примером для иконки PNG):
<link rel="shortcut icon" type="image/png" href="/assets/img/icon.png" />
При этом можно указать 2 разных изображения: одно для IE, другое - для остальных веб-браузеров.
Не забывайте про отображение фавикона для мобильных устройств. В <head> следует указать <link rel="apple-touch-icon" и т.д.>, при этом изображение должно иметь размер 60х60 или 120х120.
Яндекс отображает иконку веб-ресурса после того, как она попадет в его индекс. Специальный робот обходит сайты примерно 1 раз в месяц и обновляет свою базу.
Для изменения старого favicon на новый следует просто закачать новую иконку с таким же названием на место старого изображения и дождаться ее переиндексации.
Правильный favicon - какой он
Фавиконка - это визитная карточка, она не должна контрастировать со стилем и тематикой веб-ресурса. Если ваш сайт про автомобили, то стиральная машинка на фавиконе будет выглядеть странно.
Иконка должна легко восприниматься. Не стоит рисовать на ней полную картину: достаточно 1-2 схематичных изображения.
Популярны в фавиконах логотипы или пиктограммы. К примеру, портал по автомобилям - это авто или дорожный знак; интернет-магазин телефонов - трубка. Не изображайте в пиктограмме сайта по продаже бытовой техники утюг - ведь помимо этих товаров вы торгуете еще и другой техникой.
Фавиконка должна быть запоминающейся, поэтому используйте запоминающиеся простые образы. К примеру, социальная сеть Одноклассники имеет favicon с оранжевыми буквами “ОК”. Цвет указывает на стилевое решение веб-ресурса, а буквы расшифровываются как две аббревиатуры: сокращенное название веб-ресурса и принятое во всем мире “Окей”.
Дело остается за малым - иконка должна быть одновременно простой и оригинальной.
#6023 в Разное
#52 в Бизнес-литература
#367 в Развитие личности
интернетмаркетинг, продвижение в интерн..., заработок в интернете
16+
Отредактировано: 31.10.2019
Добавить в библиотеку