Как сделать иконку для сайта? (файл favicon.ico)
Иконка для сайта (файл favicon.ico) – это картинка размером 16Х16 пикселей, характерная для большинства профессионально сделанных сайтов.
Favicon – сокращение от Favorite Icon (любимая иконка) . Ее можно наблюдать в адресной строке, в папке Избранное(Закладки) , также во вкладках браузеров и в результатах выдачи Яндекса.
По умолчанию в качестве иконки сайта отображается неприметный стандартный значок:
Рис.1 Пример внешнего вида иконки в адресной строке
1 - Внешний вид при наличии иконки;
2 - Вид по умолчанию (без иконки) ;
Рис.2 Пример внешнего вида иконки в Избранном(Закладки)
1 - Внешний вид при наличии иконки;
2 - Вид по умолчанию (без иконки) ;
Рис.3 Пример внешнего вида иконки во вкладках браузеров
1 - Внешний вид при наличии иконки;
2 - Вид по умолчанию (без иконки) ;
Рис.4 Пример внешнего вида иконки в результатах выдачи Яндекса
1 - Внешний вид при наличии иконки;
2 - Вид по умолчанию (без иконки) ;
Иконка придает сайту индивидуальность, делает его не похожим на другие. Актуальность иконок для сайтов на сегодняшний день обуславливается и тем, что Яндекс начал показывать их в результатах поиска , поэтому если иконка имеет привлекательный вид, есть шанс, что взгляд пользователя "зацепится" за нее, и он перейдет по ссылке на Ваш ресурс.
Короче говоря, если Вы хотите, чтобы Ваш сайт был оригинальным и уникальным в глазах посетителей, то пора задуматься над созданием иконки favicon.ico .
Обычно, на иконке изображают мини-логотип компании...
Самый простой и быстрый способ сделать иконку для сайта - воспользоваться сервисом http://favicon.ru/.
Для этого Вам желательно заранее подготовить изображение вашей будущей иконки. Лучше делать квадратное изображение, т.к. сервис favicon.ru будет уменьшать это изображение до размера 16х16 пикселей, и если оно изначально было не квадратное, то могут появиться незначительные искажения. Размер файла не должен превышать 300кб.
Такое изображение можно сделать в любом графическом редакторе, я например делаю все в Adobe Photoshop. Можно вообще найти подходящее изображение в Google, воспользовавшись поиском по картинкам. Короче нужно подключить фантазию...
После того, как изображение найдено или сделано, его нужно загрузить на сервис http://favicon.ru/ , затем нажать кнопку "Создать favicon.iсo" , затем скачать получившуюся иконку, перейдя по ссылке "Скачать favicon.ico!" , и наконец главное, что нужно сделать, это закачать получившийся файл favicon.iсo в корневую директорию Вашего сайта(туда, где лежит главная страница). Браузер автоматически найдет этот файл и добавит его в адресную строку и закладки.
Если по каким-то причинам Вы не можете разместить этот файл в корне сайта, тогда нужно указать браузеру, где он находится, для этого в каждую страницу сайта , между тегами head нужно вставить тег link:
<head>
<link rel="shortcut icon" href="icon/favicon.ico">
</head>
Как Вы наверное уже знаете, атрибут href указывает на расположение файла. В данном случае файл иконки favicon.iсo лежит в папке icon .
Оценить результаты Вашей работы можно сразу, для этого нужно ввести адрес сайта в браузере . Если все сделали верно, то иконка должна отображаться слева от адреса (так как показано на Рис.1) .
В результатах выдачи Яндекса, иконка появится не сразу. Это связано с временем обновления кэша поисковика, которое может составлять от недели до нескольких месяцев.
Есть вопрос? Получи ответ на ФОРУМЕ ПОДДЕРЖКИ
 Создан: 2009-02-24 Просмотров: 92550 Автор:Андрей Галямов
Комментарии: Автор: Garry Дата : 2009-02-25 Большое спасибо, очень интересный материал! Автор: rekachili Дата : 2009-02-25 Такая мелочь, а значительная вещица! Спасибо за инфу, не придется юзать поиск. Автор: Monc Дата : 2009-02-25 Спасибки, мне оч понравилось) Автор: Sati Дата : 2009-02-25 Здорово! Спасибо, взяла кое-что из логотипа, получилось довольно симпатично... http://www.meteo-tv.am
Автор: Алексей Дата : 2009-02-25 Спаибо, давно хотел узнать об этом.
Автор: Кирилл Дата : 2009-02-25 Огромное спасибо! очень помогло Автор: Леонид Дата : 2009-02-25 Очень интересная и нужнейшая информация, но к моему сожалению мой компьютер стал тормозить и поэтому начать пользоваться данной информацией смогу не сразу.Вернёмся к разговору после того как поверю всё сам. Автор: Наталья Сычёва Дата : 2009-02-25 Спасибо, Андрей! Автор: Вадим Дата : 2009-02-25 Спасибо, Андрей! Очень интересный материал, давно хотел сделать такое! ;) Автор: Игорь Дата : 2009-02-26 Спасибо Андрей, тема классная. Автор: Agasi Дата : 2009-02-26 Большое спасибо Автор: Василий Дата : 2009-02-26 спасибо, это как раз то, что надо!!! Автор: artem Дата : 2009-02-26 Спасибо =) Автор: Гарик Дата : 2009-02-26 Мелоч, а приятно. Такая деталь в адресной строке казалась чем-то нереальным. Оказывается всё очень просто. Андрею большое спасибо. Автор: Саша Дата : 2009-02-26 Супер спасибо! Автор: Светлана Дата : 2009-02-27 спасибо большое Автор: Владимир Дата : 2009-02-27 Отлично, Андрей. Молодец!
Главное, всё кстати. Ждём ещё чего-нибудь интересного. Лучше пользоваться 2-3 -мя источниками, чем по всему нету бороздить. Автор: саня Дата : 2009-02-28 класс сайт знают как людей позабавить Автор: andrij-ka Дата : 2009-02-28 очень полезная штука Автор: Максим Дата : 2009-02-28 Только сидел и думал как это сделать. Даже чувствовал, что все очень просто, а как сделать....? И тут этот урок. Супер. Автор: валера Дата : 2009-03-07 я через юкоз маю та прошче воно автоматично ставить яку ти тіки незахочеш іконку Автор: Олег Дата : 2009-03-09 Андрей, спасибо за помощь неучам. Автор: роман Дата : 2009-03-21 блин, а у меня не выходит
http://iprivet.ru/
вот гляньте, в опере иконка отображается, а в эксплорере и яндексе нет. что не так делаю? Автор: роман Дата : 2009-03-21 ах парднон, оказывается и правда достаточно было воспользоваться http://favicon.ru/
а я до этого иконку делал с помощью ArtIcons Pro Автор: Victor Дата : 2009-03-22 Интересный русскоязычный сервис по созданию
http://www.favicon.erus.info/
Позволяет создавать анимированные иконки и со скроллинг-текстом Автор: www.lekal.ru Дата : 2009-03-30 Прочитав сразе же поставил себе на http://lekal.ru кулебяку. Доволен. Спасибо автору. Автор: владислав Дата : 2009-08-21 люди, спасите!
в опере - работает, в фаерфоксе - тоже, а в ИЕ - нет!
кто-нить знает в чём дело? помогите, плиз *_* Автор: владислав Дата : 2009-08-22 блин, я заметил, что с видео на моём сайте тоже самое! не понимаю в чём дело(( Автор: Сергей Дата : 2009-09-10 Подскажите пожалуйста, при индексации, например Яндексом, иконка одновременно с сайтом индексируется или как получится? Автор: Сергей Дата : 2009-10-01 Чето я крутил вертел эту иконку и так и сяк ставил не отображается и все. Автор: Сергей Дата : 2009-10-02 Блин блинский в опере отобразилась а в мозиле не отображается. Автор: xJlaIIax Дата : 2009-11-08 Спасибо за урок, это то что я искал! Автор: Вадим Дата : 2009-11-09 Спасибо Андрюха ! Инфа просто супер !!!
http://www.magnomer.narod.ru Автор: Мак дак Дата : 2009-12-06 А я себе такую сделал http://seosites.ucoz.com/ Автор: slon29 Дата : 2009-12-31 Спасибо андрей вы как всегда на высоте благодаря вашему сайту мой тоже преобразился www.slonrecords.com.ua Автор: Александр Дата : 2010-01-14 Спасибо!!! Автор: Лана Дата : 2010-01-20 Подскажите плиз, как так в платном хостинге отображается иконка а на бесплатном не отображается, хотя все то же самое и код и иконка??? Автор: Николай Дата : 2010-05-15 А как делают широкие иконки ? Автор: Владимир Дата : 2010-05-28 У меня на сайте когда вводишь vipkulinar.ru всё выходит, а когда пишешь www.vipkulinar.ru почему то не отображается! Автор: Елена Дата : 2010-06-04 В Эксплоере отображается, а в Мозилле - нет :( Автор: Александр Hecfrjd Дата : 2010-06-15 Продается иконка для Google. Цена 25 000 долл.
alrustver@yandex.ru Автор: triuer Дата : 2010-07-07 Спасибо! Автор: Vlad Дата : 2010-07-31 спс Автор: ольга Дата : 2010-08-15 Самое лучшее объяснение на 5+, спасибо! Автор: Evgeniy Дата : 2010-08-24 Огробное спасибо за информацию.
...Очень полезная тема, особенно для начинающих :) Автор: Настя Дата : 2010-10-25 Спасибо, Андрей, Ваши уроки очень полезны!
подскажите плиз скинула иконку в корневую папку, а отображается все равно иконка джумлы, как её поменять можно? Автор: Настя Дата : 2010-10-25 Урра!! заработало! Не обратила сразу внимание, что у вас есть еще и замечательный форум, где есть ответы на многие вопросы)
|