Иконка сайта — как сделать и установить
Наверняка вы иногда любуетесь значком в начале адресной строки браузера. Этот же значок появляется рядом с закладкой на этот сайт в браузере, и в "Журнале" ("Истории" - в браузерах, отличных от IE). Favicon или иконка сайта - небольшая картинка, позволит выделить свой сайт из ряда подобных. Некоторые иконки - настоящее "произведение искусства" - в том плане, что помогают запомнить сайт и быстро найти его, например, в закладках. Как же создать свою иконку сайта? Но вначале - что представляет собой favicon.
Favicon («изображение, значок») - этот термин образован от слова «Favorites» и "Icon", значит "картинка в избранных ссылках" в Internet Explorer). Это небольшая картинка, которая отображается рядом с адресом вашего сайта, в адресной строке браузера, вместо стандартной.
Что представляет собой иконка сайта (favicon)
Обычно используется изображение размера 16x16 пикселов формата ICO. Традиционно помещается в корень сайта под именем favicon.ico, так как исторически сложилось, что там его ищет Internet Explorer. Все современные браузеры понимают явное указание положения значка в HTML-коде и могут использовать вместо формата ICO формат PNG, GIF, BMP и других...
Путь к файлу, его формат и размеры изображения могут быть любыми, допустимыми для WWW (за исключением Internet Explorer, который допускает для значка только формат ICO, «лежащего» в корне сервера).
На сегодняшний день Internet Explorer — это единственный браузер, который показывает иконку сайта только если сайт добавлен в «Избранное» (Закладки), иконка называется favicon.ico и лежит только в корневой папке сервера, но в последующих версиях разработчики обещают это исправить.
К сайту иконка подвязывается прописыванием в коде документа, между тегами
<head></head>
следующего кода:
<link rel="icon" href="/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
Для того, чтобы создать иконку для сайта, можно воспользоваться несколькими способами:
- Использовать специальные программы Microangelo, QTam Bitmap to Icon, Axialis IconWorkshop
- Использовать специальный плагин для Photoshop, например - IconBuilder-XP100
- Использовать онлайн ресурсы для создания favicon. Например -
Делаем иконку сайта онлайн
Сайт Favicon.ru полностью посвящен иконкам сайта favicon.ico. Сайт содержит форму, позволяющую загрузить собственную картинку размером не более 300 Кб для создания иконки. В этой форме предусмотрена возможность поставить галочки для добавления в favicon.ico значков 32х32 и 48х48 для десктопа.
Кроме вышесказанного, данный сервис позволяет отредактировать и обрезать исходную картинку перед созданием иконки. Конечно данному графическому редактору далеко до фотошопа, но он довольно прост в использовании и содержит понятные и достаточные инструкции. К тому же для редактирования изображения под иконку функций данного редактора вполне достаточно.
Подходящую картинку вы можете нарисовать сами или взять в Интернете (в Интернете есть масса коллекций подобных иконок).
Совет: не пытайтесь поставить в качестве favicon какую-нибудь фотографию, или сложную картинку - все равно ничего видно не будет. Иконка показывается в браузере как изображение размером 16x16 пикселей. Ожидать что в таком виде можно изобразить что-то сколько-нибудь сложное не приходится. Например, что бы изобразить хоть сколько-нибудь узнаваемо человеческое лицо, надо начинать с размера картинки 48x48. Поэтому, правило при создании иконок сайтов одно — следует изображать один, хорошо узнаваемый предмет, с четкими границами и контрастным фоном. Лучше всего для иконки сайта подходит логотип компании или столь же простое изображение.
Иконка моего сайта, изначально соответствовала первому названию блога - "Компьютерные Курсы", решил её не переделывать - уж больно она мне нравится 
В Joomla favicon.ico находится в папке ./images/ - его и нужно заменить на свой. Поместите его также в корень сайта.
В Wordrpess - поместите иконку в корень сайта и в папку темы. Укажите в шаблоне (файл header.php) , где-то между тегами <head> </head>, следующий код:
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
Если эту иконку вы сразу не увидите, попробуйте очистить кэш вашего браузера. В выдаче поисковика, ваша иконка может появиться только через несколько дней, т.к. бот, собирающий иконки, ходит не каждый день.
Метки: , favicon | Рубрика: ВЕБ мастеру
Комментарии читателей
Оставьте свой комментарий
Я уж давно для каждого нового сайта сразу ставлю favicon для индивидуальности сайта.
А можно ставить анимашки на favicon? Это было бы прикольно!
Почему нет? Анимированный GIF уже многие ставят. Правда анимация пока видна только в Файерфоксе.
А как удалить этот favicon? Сколько требуется времяни, что бы он изчез после удаления файла favicon.ico и записи в .
Вы вероятно не почистили кэш браузера. Кроме этого, есть кеш Яндекса, например, где иконка сайта будет ещё находиться напротив ссылки на сайт. Должно пройти несколько апдейтов, пока она будет заменена.
Интересно а можно за место файла favicon.ico указать например: favicon.png