Мар 11
19

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

Добавляем иконку favicon

Иконку добавить совсем несложно. Давайте разбираться. Этой статьёй я начинаю серию уроков технической помощи для моих партнёров. Чуть позже для этого будет отдельная рубрика!

Для тех кто не знает, что такое иконка фавикон :

favicon.ico - это небольшая картинка в специальном формате, которая отображается рядом с URL – адресом Вашего сайта в адресной строке браузера и рядом с названием Вашего сайта в «Избранном» или в «Закладках» вместо стандартной, общей для всех иконки.

Для чего нужна иконка favicon? Этот элемент дизайна предназначен для создания уникального отображения сайта или блога в строке поиска. Иконка облегчает поиск нужного сайта в Ваших закладках. Наверняка, Вы не раз замечали, заходя в закладки, что ищете сайт не по его имени, которое теряется на фоне других закладок, а по уникальному значку – иконке для сайта. Так вот, это и есть favicon.ico. В поисковиках сайт будет отображаться с той иконкой, которую Вы для него установите.

Иконку можно создать самому в графическом редакторе PhotoShop. Создаём файл 16 x 16 px или 48х48 пикселей при разрешении 72 dpi. Рисуем и сохраняем в *.jpg или в *.gif. Ещё проще – выбрать её из предложенных в интернете. Подойдёт любое изображение или фотография, которые не защищены авторскими правами. Иконку добавить можно с этого бесплатного ресурса

Установить иконку на сайт или блог можно в такой последовательности:

1. Создать либо скачать из интернета подходящую картинку.

2. Перейти на страницу сервиса favicon.ru (на этом сервисе иконку можно перевести в формат *.ico)

3. Закачать картинку, кликнув «Обзор» и жмите «Сreate favicon.ico» (нижнее окно оставьте незаполненным).

4. После генерации Вам будет предложено скачать иконку. Нажмите «Download» и сохраните favicon на своём компьютере.

5. Далее загрузить favicon на своем web-сервере в папку «public_html» (для WordPress и большинства других).

6. Теперь Вам необходимо отредактировать header.php (заголовок) Вашего блога. На администраторской панели откройте панель редактора, найдите файл header.php, используемой Вами темы, и добавьте следующий код в любом месте между тэгами <head> и </head> :

<link rel=»shortcut icon» href=»http://www. вашсайт/favicon.ico»>

«Вашсайт»— Ваш домен (название сайта).

7. Сохраните Ваш файл header.php

8. Обновите Ваш браузер нажатием комбинации клавиш Ctrl+F5. Если ничего не изменилось, перезагрузите Ваш браузер. Если это не помогает, то перезагрузите компьютер . Теперь Вы должны увидеть иконку рядом с Вашим URL – адресом. Иногда она проявляется не сразу, а спустя несколько минут.

Hаслаждайтесь результатом! Будут вопросы - задавайте. Oперативно отвечу на Ваш комментарий!

Игорь Щепетов

Спасибо за добавление статьи в:

Popularity: 100%

Tags: favicon, favicon.ico, header.php, блог, иконка фавикон, иконку на сайт

This entry was posted on 19.03.2011 at 11:14 пп. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Posted in Главная by Игорь Щепетов 37 Comments

Сергей says:

20.03.2011 в 7:58 дп

Ответить

Спасибо за подсказку, непременно воспользуюсь.

Игорь Щепетов says:

22.03.2011 в 7:45 пп
Ответить
Пожалуйста, Сергей

Ludmila Ponomareva says:

22.03.2011 в 3:14 пп

Спасибо, Игорь!
Буду разбираться.
Мое музыкальное образование немного помогает чуть быстрее шлепать по клавишам, а вот с освоением технических премудростей сложнее.
Теперь знаю. к кому обратиться!

Игорь Щепетов says:

22.03.2011 в 7:48 пп
Ответить
Здорово, значит, мы коллеги, Людмила Обращайтесь

23.03.2011 в 9:24 дп

Дошла до 5 пункта и заблудилась в управлении собственным блогом..

Игорь Щепетов says:

23.03.2011 в 3:22 пп
Ответить
Людмила, папка «public_html» находится не в админке блога, а на web-сервере (хостинге). На каком сервере Вы выкупали доменное имя? Туда и надо в пункте пятом сходить в гости, найти папку «public_html» и загрузить favicon

24.03.2011 в 2:53 пп

Спасибо, Игорь, поняла, в чем дело. Не там искала. Хостинг-провайдер TimeWeb, а блог на WordPress. Надеюсь, получится!

Игорь Щепетов says:

26.03.2011 в 12:53 дп
Ответить
Ну, слава Богу

28.03.2011 в 11:21 пп

Еще раз спасибо, установил себе прикольный фавикончик.

Игорь Щепетов says:

30.03.2011 в 1:28 пп
Ответить
Действительно, милый фавикончик получился. Молодцы

Денис Михайличенко says:

30.03.2011 в 12:12 пп

Не смог у себя найти и : можете привести пример? Например взять часть из редактора и написать здесь, чтобы было понятно, куда вставлять код. Я у себя сделал фавикон, но только при помощи моей темы, которая позволяет сделать это проще.

30.03.2011 в 12:54 пп

В общем в тегах head и head. Я не смог найти у себя в редактировании.

Игорь Щепетов says:

30.03.2011 в 1:26 пп
Ответить
Денис, я ответил Вам на электронную почту, так как коды в комментариях, к сожалению, не отображаются
- Денис Михайличенко says:
  
  31.03.2011 в 10:22 дп
  Ответить
  Все получилось спасибо большое.
  - Игорь Щепетов says:
    
    31.03.2011 в 11:45 дп
    Ответить
    Пожалуйста, Денис

Андрей Алехин says:

31.03.2011 в 9:02 дп

Игорь спасибо! Правда есть один вопрос.
Я сделал пункт №5, к 6-ому не приступал а фавикон появился!
Так оставить или в заголовок вставить

Игорь Щепетов says:

31.03.2011 в 9:36 дп
Ответить
В некоторых темах блога, Андрей, достаточно просто загрузить фавикон на web-сервер, даже не прописывая в заголовке блога (header.php). И он уже отображается. Тем проще! Поздравляю!

Юлиана says:

31.03.2011 в 11:40 пп

Отличная статья, Игорь! Ты – молодец ) Это удивительно, когда творческий человек еще и вот такие фишки делать умеет в общем то сугубо технические. Могу лишь добавить, что лучше отрисовать иконку в векторном редакторе, а уж потом перевести в растр (Photoshop например). Кстати, размер может быть и 32х32 px, это не суть важно, главное – чтобы в квадрат вписалось) И еще есть такой плагин – так и называется favicon. Не знаю, можно ли найти у нас , но буржунете попадался
С уважением

Игорь Щепетов says:

11.04.2011 в 1:30 дп
Ответить
Спасибо, Юлиана, за ценное дополнение к теме!

Елена Бубеева says:

14.04.2011 в 7:52 дп

Игорь, спасибо за прекрасную,а главное очень полезную статью! Воспользовалась вашей рекомендацией. С уважением Елена.

Игорь Щепетов says:

14.04.2011 в 12:08 пп

Всегда пожалуйста, Елена

getnaked says:

29.04.2011 в 3:55 дп

В коде много кавычек и скобок ненужных, видимо типограф постарался ICO немного ущербный в плане количества цветов, вместо него можно использовать PNG.

Игорь Щепетов says:

29.04.2011 в 8:12 пп
Ответить
Не знаю насчёт лишних скобок, а кавычки в комментариях WordPress отображаются действительно странно (сбоку, а не как две чёрточки сверху). Но на конечный результат это не влияет. Я описываю то, что сам уже прошёл. Мой результат, как доказательство, виден всей общественности рядом с моим URL

Владимир says:

29.04.2011 в 8:03 дп

Урок хороший, но вот лично у меня уже была запись, (у меня вордпресс)

в файле
header.php

Может так не у всех, проверяйте! Не стоит дублировать то что у вас уже есть!
Вместо /favicon.ico вам нужно подставить адресс к вашей иконке, в данном случае это
http://www.вашсайт/favicon.ico
Такой адресс подходит если вы загрузили картинку в каталог www на своем ftp
Я скачал с интернета иконку 24х24, с расширением png
переименовал ее в favicon.ico (если только у вас стоят расширения файлов(это – название файла.расширение(в моем примере png)))
Подтвердил изменения расширения файла
Залил на свой ftp в папку www уже переименованную иконку favicon.ico
Далее в в файле header.php нашел строчку

если ее нету, пишите ее сами
далее подставил адресс своего сайта

и иконка готова!

Игорь Щепетов says:

29.04.2011 в 7:57 пп
Ответить
Владимир, коды в header.php бывают разными. Мне пришлось вписывать. Другим вписывать не пришлось. Месяц назад перезагружал тему блога (её неожиданно перекосило). Tак после этого иконка исчезла, и пришлось заново прописывать её в header.php. В общем, смотрим внимательно (пробегаем глазками по коду). Если Вы найдёте тег /favicon.ico, то просто подставите перед ним адрес Вашего сайта. Если нет, то … читайте сначала всю статью. Шутка! … прописываем весь код.

Дарья says:

08.05.2011 в 10:35 пп

А если у меня блог на бесплатном хостинге? куда закачивать картинку?

Игорь Щепетов says:

08.05.2011 в 11:48 пп
Ответить
К сожалению, Дарья, на бесплатном хостинге Вы ограничены в функциональности. Есть повод задуматься о приобретении платного

09.05.2011 в 7:11 дп

Да, повод задуматься есть

vakul64 says:

25.10.2011 в 6:16 дп

Спасибо, все описано понятно, у меня кажется получилось. На сайте иконка появилась. A в поисковике она появится со временем? Или для этого надо что-то еще делать?

Тимур says:

26.10.2011 в 6:54 дп

а как добавить иконку в чат на php ? ( http://chat.nextim.ru )

Елена says:

21.12.2011 в 10:49 дп

Я установила плагин favicons Но как там установить новый рисунок А не тот что предлагают никак не соображу Те что есть слишком однотипные Сайт не будет выделяться

Aleksandor says:

04.01.2012 в 8:53 пп

спасибо

KateNebo says:

10.02.2012 в 1:44 пп

Приветствую, Игорь!!!!!) спасибо! следовала по пунктам. пока не появилась иконка. может, чуть позже))

Souren says:

08.03.2012 в 10:47 дп

Благодарю за поддержку С разрешением помаялся, а так все в порядке вроде. Девушек с 8 марта

Александр says:

11.03.2012 в 9:53 дп

Да, это сделать очень просто вставить между и , с условием, если файл написан в html.
А если в моём случае (на другом сайте использован движок VK Engine 1.0) файл header.php – там вообще не прописан html (пытался примерно «выдернуть» часть кода с WordPress, только всё сломал)